Author Archives: day-journal

Python #005 – ディレクトリをファイルごと全て削除

 

Pythonでディレクトリをファイルごと全て削除したい時は下記のように記述します。

 

sample.py

 

今回は、事前にsampleディレクトリを準備しました。

 

下記コマンドを実行すると、sampleディレクトリがファイルごと全て削除されます。

 

ディレクトリの有無:

 

ディレクトリをファイルごと全て削除:

 

shutilを利用するとディレクトリをファイルごと全て削除することができます。

 
 

  • 参考文献

shutil

 

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

 

webpack #001 – インストール&ビルド

 

 

webpackは、複数のJSファイルを1つにまとめるビルドツールです。CSS等もJSに含めてビルドすることもできるようです。利用するときは、webpack単体で利用するかgulp等と組み合わせるかの判断が必要そうですね。

今回は、webpackをインストールしてビルドするところまでを試したいと思います。

 

まず、Node.jsでwebpackをインストールします。今回は最新版のwebpack3をインストールしてみます。

 

 

インストールが完了したら、package.jsonのscriptsの項目を書き換えます。

 

次に、ビルドをしてみたいと思います。今回は複数のJSファイルを統合します。

まず下記のような構造で実行ファイルを作成します。

 

sample01.js

 

sample02.js

 

main.js

 

webpack.config.js

 

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

 

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

app.js

 

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

index.html

 

 

現在はgulpを利用しているのですが、環境によってはそろそろ(いまさら?)webpackも必要になってきているので導入していこうと思います。今回はwebpackをインストールしてビルドするところまで確認しました。

 
 

 

Try #006 – Azure FunctionsやGoogle Apps ScriptでSlack Statusを操作してみた

 

 

 

今回は、Azure FunctionsGoogle Apps Scriptを利用してSlack Statusを操作してみようと思います。

 

まずは、Slackでトークンを取得する必要があります。今回はテスト用としてLegacy tokensを取得します。

 

トークンが取得できたら次に、Azure Functionsで定期的にSlack Statusを実行してみます。
Azure Functionsの操作方法は「Try #005 – Node.jsとAzure FunctionsでSlack botを作ってみた」を参考にしてみてください。

開発 → コードに下記のようなスクリプトを記述します。

index.js

 

token:に取得したトークンを記述
emojiに表示したいアイコンを記述
textaddに表示したいテキストを記述

 

タイマーも設定しておきます。

 

スクリプトを保存して実行してみます。タイマーで設定した時間にStatusが変更されるのが確認できます。

 

最後に、Google Apps ScriptでGoogleカレンダーとSlack Statusを同期してみたいと思います。事前に同期させたいGoogleカレンダーのカレンダーIDを取得しておきます。

新規にファイルを作成して、下記のようなスクリプトを記述します。

script.gs

 

cdidに取得したカレンダーIDを記述
slackTokenに取得したトークンを記述
currentEvent.textに表示したいテキストを記述
currentEvent.emojiに表示したいアイコンを記述

 

今回はカレンダーに全日予定で当日登録されている場合、Slack Statusを設定するスクリプトの記述としましたが、スクリプトを書き換えると時間単位予定や予定の内容の表示なども指定も可能です。

 

スクリプトを記述したら、トリガーの設定をします。トリガーを設定するとAzure Functionsのタイマーのように定期的にスクリプトを実行することが可能です。1分おきや5分おきで設定することでGoogleカレンダーの監視が可能です。

 

スクリプトを保存して実行してみます。GoogleカレンダーとSlackのStatusが同期されるのが確認できます。