Monthly Archives: 8月 2017

webpack #004 – gulpとBrowsersyncと連携

 

node.js_016_02

node.js_023_01

 

今回は、webpackgulpBrowsersyncを連携した環境を構築してみます。

 

まず、gulpでwebpackを読み込むために、「webpack-stream」をインストールします。
その他にもお好みで、「Node.js #023 – gulpとBrowsersyncでブラウザ同期」や必要なモジュールをインストールしておきます。

 

今回は、下記のようなディレクトリ構造にします。

 

それぞれのコードを記述します。

 

webpack.config.js

 

gulpfile.js

 

package.json

 

main.js

 

index.html

 

stylesheet.css

 

sample01.js

 

sample02.js

 

gulpを実行します。編集後保存すると、圧縮されたHTML・CSSとコンパイルされたJSがそれぞれ生成されます。

 

gulpfile.js
gulpでwebpackを読み込む:

 

gulpfile.js
gulpでコンパイル処理:

 

webpackとgulpとBrowsersyncを利用した開発環境を構築してみました。

 
 

 

Leaflet #038 – レイヤの画面連動

 

Leafletでレイヤの画面連動を実装するには、「Leaflet.Sync」と言うプラグインを利用すると便利です。
※Leafletのバージョンは1.0.0以上を利用する必要があります。

 

index.html

 

stylesheet.css

 

script.js

 

index.htmlを実行すると下記のようにブラウザで表示されます。

example

 

Map分のdivタグを作成:

 

Mapのレイアウトを作成:

 

Mapをそれぞれ宣言:

 

Mapを連動:
カーソルON:

 
 

レイヤの画面連動を実装したい時に便利なプラグインです。2画面以上の連動も可能です。

 
 

 

Riot.js #011 – webpackでビルド

 

riot-js_001_01

 

今回は、Riot.jswebpackでビルドしてみます。

 

まず、riot関係の必要なモジュールをインストールします。

 

今回は、下記のようなディレクトリ構造にします。

 

それぞれのコードを準備します。

 

webpack.config.js

 

index.html

 

sample.tag

 

sample2.tag

 

main.js

 

ビルドすると、コンパイルされたapp.jsが生成されます。

 

index.htmlを実行すると下記のようにブラウザで表示されます。

 

main.js
各タグを読み込み:

 

webpack.config.js
タグを読み込むローダー:

 

webpack.config.js
Riot.jsを認識:

 

webpack.config.js
出力するJSを圧縮:

 

tagファイルをwebpackでビルドすると、app.jsのみを読み込むことによりコンテンツの表示が可能です。

 
 

 

webpack #003 – コードの圧縮

 

 

今回は、webpackでコードを圧縮してみます。

 

まず、「webpack.config.js」を書き換えます。

webpack.config.js

 

ファイルの準備ができたらビルドします。

 

ちなみに一度グローバルでインストールしておくと「webpack」コマンドだけでビルド可能です。

 

 

ビルドが成功すると、buildディレクトリに全てのコードが圧縮されたapp.jsが作成されます。

app.js

 

app.jsを読み込むindex.htmlを作成して実行してみます。前回と同じ内容を確認できます。

index.html

 

 

webpackでコードを圧縮してビルドすることも可能です。利用する時はどこでgulpとの使い分けをするか考える必要がありそうです。

 
 

 

Leaflet #037 – レイヤの分割表示

 

Leafletでレイヤの分割表示を実装するには、「leaflet-side-by-side」と言うプラグインを利用すると便利です。

 

index.html

 

stylesheet.css

 

script.js

 

index.htmlを実行すると下記のようにブラウザで表示されます。

example

 

分割設定:

 
 

レイヤの分割表示を実装したい時に便利なプラグインです。

 
 

 

webpack #002 – CSSの読み込み

 

 

今回は、webpackでCSSを読み込みます。

 

まず、CSSのサンプルを用意しておきます。

 

次に、CSSの読み込みに必要なローダーをインストールします。

 

インストールが完了したら、「webpack.config.js」と「main.js」を書き換えます。

webpack.config.js

 

main.js

 

ファイルの準備ができたらビルドします。

 

ビルドが成功すると、buildディレクトリに全てのJSとCSSが統合されたapp.jsが作成されます。

app.js

 

app.jsを読み込むindex.htmlを作成して実行してみます。stylesheet.cssの内容が実行されているのを確認できます。

index.html

 

 

webpackでCSSも読み込んでビルドすることが可能です。

 
 

 

Python #004 – コマンド引数設定

 

Pythonでコマンド引数を実装したい時はdocoptを利用すると便利です。

 

docoptはpipでインストールすることができます。

 

sample.py

 

下記コマンドを実行でヘルプを確認。

 

下記コマンドを実行でバージョンを確認。

 

下記コマンドを実行でsample01の引数を確認。

 

下記コマンドを実行でsample02の引数を確認。

 

不正なコマンドを実行すると、正しいコマンドの説明が表示されます。

 

引数を定義:

 

全ての引数を格納:

 

各引数を格納:

 

docoptを利用するとコマンド引数を実装できます。

 
 

  • 参考文献

docopt

 

Python #003 – プログレスバー

 

Pythonでプログレスバーを実装したい時はtqdmを利用すると便利です。

 

tqdmはpipでインストールすることができます。

 

インストールできているか確認してみます。

 

sample.py

 

下記コマンドを実行すると、プログレスバーで処理経過が表示されます。

 

ループにtqdmを記述する:

 

tqdmを利用すると手軽にプログレスバーが実装できます。

 
 

  • 参考文献

tqdm