サーバーサイド用にWebpackでプリコンパイルする

サーバーサイド用のNode.jsのソースコードをWebpackでプリコンパイル&バンドルした際に少しハマったので備忘録的に残しておきたいと思います。
ぼくの場合は、Node.jsのサーバーでReactのサーバーサイドレンダリングをする時に必要になりました。クライアントのソースコードがES2015だったりJSX使って書いてるのでそれをサーバーサイドで実行するのにWebpackしておく必要があったという感じです。

続きを読む

ブラウザの識別にMobile Detectが良い感じ

できればUserAgentを判別する処理は入れたくないんですが「iOSのSafariの時だけ○○したい」等のケースが出てきてしまったので使えるNPMがないか調べました。NPMは探せば何かしらありますね。

続きを読む

Laravelを1ヶ月ほど触ってみて

Laravelを使い始めて1ヶ月ほどが経ちました。まだまだ使い込んでる感じではないんですが、今どんな感じで開発してるかとか、やって良かった事・ハマりがちだった事などをまとめます。

続きを読む

iPhoneで撮った写真をアップロードする際の画像補正

iPhoneやデジカメで撮った写真をフォームのfile等からそのままアップロードすると、iPhoneでは正常に表示されるんですがPC等で見ると横になってたり逆さまになったりして表示されてしまいます。これはiPhone等で撮った写真にExifのOrientationで向きが記録されておりiPhoneではその補正をかけて表示してくれるのにPC等ではそこが無視されるから起こるようです。

今回はこのiPhone等で撮った写真の画像補正をブラウザ側のJavaScriptだけで行えるか試してみました。

続きを読む

Laravel ElixirをWebpackと組み合わせて使う

Laravel Elixirを使ってみます。Laravel Elixirとはフロントまわり(SCSS、JavaScript)のプリコンパイル等の処理を行ってくれるツーリングです(テスト実行などもやってくれるみたい)。フロントのまわりのプリコンパイルは古くはgrunt、最近ではgulp、Webpackを利用しますが、Laravel Elixirではgulpをラップする形でより簡潔に設定できるようになっているようです。

なお、通常Laravel ElixirではJavaScriptのモジュール管理にBrowserifyを使うようですが、ぼくは最近はBrowserifyではなくWebpackを利用するようにしているのでWebpackが使えないかも試してみました。

続きを読む

Laravel5とWebSockets: Broadcasting Eventsを試してみる

Laravel5.1からの新機能でBroadcasting Eventsという機能があります。これはとても素敵な機能でどういうものかと言うとLaravelのイベントの仕組みを通してWebSocketsを利用してブラウザへ直接プッシュ通信ができるというものです。Laravel作者のTaylorの動画があります。

Broadcasting Events in Laravel 5.1

WebSockets + PHPを今回プロジェクトで使う予定なので、このBroadcasting Eventsが使えそうか試してみました。

続きを読む

はじめて公式ディレクトリにWordPressプラグインを登録しました

ACF_Images_Search_And_Insert_—_WordPress_Plugins

はじめて公式ディレクトリにWordPressプラグインを登録しました。ACF Images Search And Insertというプラグインです。あまり大したものではないんですが、Advanced Custom Fields(ACF)の画像フィールドにCC0の商用利用可なフリー素材を検索して差し込んでいけるというものです。

WordPressとACFを使って図鑑のようなコンテンツサイトを作成する場合にはある程度役に立つと思います。

続きを読む

API GatewayとLambdaでSlackのbotを運用する

以前はHubotをHeroku等のサーバーを使ってbotを運用していましたが、最近はAWSのAPI GatewayとLambdaを利用してサーバーレスでbotを作る方法が出てきてます。今回下記の記事を参考にbotを作ってみました。

サーバーレスで運用するとサーバーを建てた場合と比べてコストがかからなくなるので、botなどでは積極的に利用できると良いと思います。

続きを読む

Webpackを使ってみる

Redux界隈だとHot Module Reloading(HMR)が特徴な事もあって、モジュール管理にWebpackが使われる事が多いです(HMRはWebpackの機能)。今までStarter Kitを利用していたので既存の設定で動かすことが多かったのですが、基本的な動作の確認のためにゼロから設定を作ってみたいと思います。

続きを読む

Reactで簡単なアニメーションを実装する

ReactのCSSTransitionGroupを利用して簡単なエフェクトを実装します。CSSTransitionGroupはCSSのアニメーションをReactで手軽に利用できるように作られたものです。

Animation | React

続きを読む