読者です 読者をやめる 読者になる 読者になる

パステル色な日々

pastelIncが気ままに綴るブログ

Windows上でAnsibleを使えるまで試行錯誤

皆様あけましておめでとうございます。
当ブログ2017年最初の記事いってみましょう!!!

WindowsでAnsibleを使うにはどうするか

一番ラクなのはWindows上のターミナルからansibleコマンドを実行する方法でしょうか。
ここを目指して試行錯誤したのですがどうにもうまくいきませんでした。
結局DockerやVagrantを用途ごとに利用する方法が一番ラクだということがわかりました。
以下は試行錯誤した結果をまとめてみます。
最後にWindows上でDockerを使ったAnsibleのRole再利用方法について書き留めます。

MSYS2上でじゃれ合う

Bashの導入にMSYS2を利用しています。

  • ConEmu (Terminal)
  • Bash (Shell)

まずAnsibleをwindowsネイティブのプログラムとしてインストールしてみたいと思います。
MSYS2はMSYSTEM=mingw64としてシェルを起動します。
インストールはpip経由で行いました。
Python2とpipはmingw64リポジトリで公開されているものを利用しました。
途中pycryptoやcryptographyのビルド時にライブラリが足りないことがあります。
そんなときにはCFLAGSをセットしておけばgccコンパイル時にincludeのパスを矯正できます。

結果インストールまではこぎつけました。Windowsネイティブのバイナリが生成できました。
しかし実行してみると ImportError: No module named fcntl となり失敗になりました。

次にMSYSTEM=msysとしてシェルを起動します。
Python2とpipはmsysリポジトリで公開されているものを利用しました。
しかし実行してみると ImportError: No module named fcntl となりまた失敗になりました。

コマンドプロンプト上でじゃれ合う

Python2をwindowsインストーラーからインストールしてAnsibleのインストールをやってみました。
Python2がビルドに利用するWindowsコンパイラはありがたいことにMicrosoftから提供されていました。

Download Microsoft Visual C++ Compiler for Python 2.7 from Official Microsoft Download Center

そして見事Ansibleをインストールできます。
しかし実行してみると ImportError: No module named fcntl となりまたまた失敗になりました。

$ /c/Python27/Scripts/ansible --version
Traceback (most recent call last):
  File "C:/Python27/Scripts/ansible", line 45, in <module>
    from ansible.utils.display import Display
  File "C:\python27\lib\site-packages\ansible\utils\display.py", line 21, in <module>
    import fcntl
ImportError: No module named fcntl

このあたりの理由はこちらに書かれてあることを参考に納得しました。

stackoverflow.com

その後Anaconda2を利用してみましたがこちらも同様のエラーで無理でした。

VagrantVirtualBoxでじゃれ合う

Ansibleの利用シーンとしてプロビジョニングがあると思います。
Vagrantはプロビジョニングの方法としてAnsibleのプロビジョナーを提供してくれています。

www.vagrantup.com

Windows上でAnsibleはインストールできていないのでAnsible Localを利用します。
いい感じです。見事Ansibleでプロビジョニングできました。

Roleの再利用とRoleの作成を考える

Ansibleにはansible-galaxyコマンドがあります。
Roleの再利用を目的として提供されているので、Roleを作成してみたいと思います。
しかし、Windows上ではプロビジョニングのシーン以外ではAnsibleを利用できません。

Dockerを利用してじゃれ合う

最後にDockerを利用して、Roleの再利用をする方法を試します。
Docker Machineを使いdockerコマンド利用の準備をします。

$ docker run --rm -v "//c/Users/<username>/ansible/roles:/etc/ansible/roles" ansible/ansible-container-builder:0.3 ansible-galaxy install geerlingguy.apache

後は上記のような感じでRole再利用のためにansible-galaxyコマンドを利用できます。
プロビジョニング以外のシーンではDocker利用が一番捗りそうです。

以上、Windows上でAnsibleとじゃれ合う方法についてでした。
Cygwinについては書いておりませんが以下のサイトに書かれてありました。

Running Ansible within Windows | Jeff Geerling

MSYS2あたりの知識が不足しており誤っている場合があるのでその際にはご教授くださいませ。
どうにもこうにも色々躓くことが多いWindows上での開発ですが誰かの助けになれば幸いです。
では、御年もよろしくお願いいたします!!!

いろいろ話す機会がありましたので

いろいろ発表の機会があったのですがスライド公開してなかったので公開しておきます。

ng-kyoto Angular Meetup #4

4月にObservableについて話してきました。
この発表ではObservableがなぜ必要になるのかについて話しました。

ng-kyoto.connpass.com

pastelinc.github.io

Observableについて調べているうちに、何を解決するものなのか疑問が駆け巡ってきました。
そしてそれを自分の中で考え、おそらくこういう思想のもとだろうという推測を加えてスライドを作りました。
もちろんObservableそのものの仕様については以前の記事でもあった通りの事実しか話していません。

その推測のヒントとなったのがStructure and interpretation of computer programs - 2nd EditionのStreamの項でした。
僕はそれを読んでオブジェクトデータ構造と対をなすストリームデータ構造がこのObservableの考えのもとじゃないかと推測したうえでスライドを作成しました。
推測から発表をしてしまうエンジニアらしからぬ発表をしましたがきっとObservableが解決したいことの本質はここじゃないかと考えています。

フロントエンドの人がWeb APIを語る会

6月にNetflixが開発したFalcorについて話してきました。
Falcorの紹介となぜFalcorが何を目的に作られたのかについての発表でした。

kfug.connpass.com

pastelinc.github.io

Falcorを学ぶ上でGraphQLについても少し公式サイトをかじって読んでいたのですが
そこでそもそもREST APIとは同じ組織内で構築されたクライアントアプリケーションにサービスを提供するAPIの要件ではないとその発明者が述べているとの記述がありました。
これはすごく衝撃でした。REST APIがとにかくプッシュされてきていたイメージでしたがなぜREST APIを使うのか明確な根拠を僕は持っていないことに気付かされたのです。

そして昨今、SPAに代表されるサーバクライアントモデルのアプリケーションがなぜもてはやされているのかについても明確な回答を僕は見いだせていませんでした。
このFalcorの発表と通してこの辺りの疑問に自分なりの回答を得られたことがこの発表の一番の収穫だったように感じます。

こんな感じでいろいろ話させてもらえる機会に恵まれていました。
それではまた!

Potmumが素敵だったのでomniauth-identityを組み込んでみた

おはこんばんちはpastelIncです。
政治的理由により技術ノウハウ共有のために巷のパプリックサービスが使えなかったところ
ドワンゴ新人エンジニア研修の記事でちらっと見かけたPotmumという単語から素敵なQiitaライクなサービスを知ったので動かしてみました。
見たところものすごくおしゃれな見た目です。Qiitaっぽいです。素敵です!

torigoya.hatenadiary.jp

拝見した限り自分用のサービスっぽいのでチーム向けではなさそうです。
利用してみたところOAuth2による認可を使ったログインのみの実装のようでした。
そもそもGitHubやSlack使ってはいけないのでどうしたもんかと考えていました。

github.com

最初は認可サーバを立ててomniauthのstrategyを自前で作っていましたがよくよくstrategyリストを見ているとシンプルなパスワード認証できるモジュールを見かけたので実装してみました。

github.com

これを使って実装を試してみたものがfeat/identityブランチにあります。

github.com

pumaの設定ファイルです。

environment ENV['RAILS_ENV']
daemonize true
pidfile "#{Dir.pwd}/tmp/pids/puma.pid"
state_path "#{Dir.pwd}/tmp/pids/puma.state"
bind 'tcp://0.0.0.0:7272'

見かけただけの勢いでomniauth-identityモジュールを使いましたが、これ随分メンテされてないのでまずいかもしれません。
CSRF対策をかわしてさらにSesionsController#callbackを利用していますが、こういうのは別のメソッド生やすべきなんでしょうかね。
Dockerで動かしているので、次はDockerfileやdocker-compose.ymlを書いてみたいと思っています。
こんな感じでrubyrailsについて詳しくないので怪しいところあると思いますがパブリックなサービスを使えない方でPotmumを利用したい方がいる時の参考になれば幸いです。

追伸

Dockerfile書きました。githubリポジトリを御覧ください。

ARIA × あまんちゅ!合同イベントが素敵だった

ARIA × あまんちゅ!合同イベントに行ってきました!
今その帰りの新幹線の車内でこれを書いています。
今はちょうど夜の部が行われている頃ですかね。 とにかくとても素敵ングなイベントでした。

あまんちゅ!第1話先行上映会

イベントが始まり、ARIAから葉月さんと西村さん、大原さん(この辺りは曖昧です間違ってたらごめんなさい)がご登壇されました。
軽い挨拶があり、まずはあまんちゅ!第1話の先行上映会が行われました。

感想ですが言わせてください「素敵」でした。
もともと原作からARIAを通じてのファンなので期待度は高かったです。
正直期待以上でした。
だって見終わった後に真っ先にこうして記事を書きたくなっちゃったんですもの。

漫画とアニメは表現の差において異なるところがあると思っています。
それは作品内で流れる時間の受け取り方です。
見ている最中に感じた最初の印象でした。
第1話に限って言えば終始非常に「日常そのものの時間の流れ方」を感じました。
なので変わっていく場面はそう多くありません。
でもそれが非常に心地よかったです。

更に忘れてはいけないのが「水」の表現です。
上映会後佐藤監督もおっしゃっておりましたがネオベネチアと伊豆では水の表現が違います。
伊豆にはベネチアのような水路が張り巡らされていません。
水の表現には普段の倍以上の時間をかけて制作されているそうです。

第1話の話の内容については是非原作を買って読んでみてください。
あまりここでは多くを語らないようにしようと思います。
ただ僕がどうしても印象に残ってたシーンを見た瞬間、思わず泣いてしまいました。
それも2回です。第1話からですよ。僕は涙もろいんです。
ただただほんとうに「素敵」でした。

フリートーク

第1話の上映会が終わって、溢れんばかりの拍手が巻き起こりました。
その後ARIAあまんちゅ!のキャストと佐藤監督が登場して、挨拶とフリートークが行われました。
あまんちゅ!のてこ役でもありARIAでもアリスの後輩アーニャを演じておられる茅野さんは大のファンらしくイベントの最初から最後まで楽しそうだったのが印象的でした。
ARIAキャストの方も原作は読まれている方が多いらしく特に水の表現について賞賛されていました。
後は皆川さん(晃役)の「久しぶりだな。元気にしていたか?」が聞けただけで最高でした。

教えて!サット・シー

ケット・シーならぬサット・シーにみんなから現在、過去、未来に関する質問をしちゃおうというコーナー。

  • みんなイタリアいきたいと口をそろえていっていた
  • 佐藤監督のお気に入りのARIAのシーンは原作(おそらくAQUA)にて夜寝静まった社長たちを見る灯里
  • 佐藤監督はB型、来ていたあまんちゅ!キャストはみんなO型
  • 佐藤監督と大原さんは動物占いで羊
  • 夜の部では佐藤監督ツインテールにするかも
  • 佐藤監督にとってARIAとは「奇跡」
  • みんなあまんちゅ!ARIAが大好き
  • 佐藤監督はアリア社長とふたりきりならもちもちぽんぽんを触りたい
  • ARIAチームもあまんちゅ!に出たい
  • 大原さんはピーター役で出たい

佐藤監督への質問なので必然的に佐藤監督のことのことばかりに関する情報ばかりですね。
まあ皆さん会話が弾まれて最後の方は時間が押していたのかかなり駆け足でした(笑)。

ARIA朗読劇

なんとARIAチームの朗読劇ははじめてらしく生のアフレコをはじめて見せていただくことができました。
英気を養うために特訓とバーベキューをしに来た面々がARIAに存在する蒼に思いを馳せて
マンホームの頃から連綿と人々が願った蒼の素敵を未来に伝えていきたいという話でした。
途中目を閉ざして見るとすぐそこでARIAのメンバーが楽しそうにしている様子がわかるようで生の素敵な空気に触れた気がしました。

エンディング

最後にあまんちゅ!チームから代表してぴかり役の鈴木さんから一言とARIAキャスト全員からそれぞれ一人一言づつ挨拶がありました。 鈴木絵理さんからはこれから始まるあまんちゅ!に期待していて欲しいことが語られました。
ARIAキャストからはみなさん感極まったみたいに途中涙しながらもこれからもARIAを愛してほしいこととあまんちゅ!を楽しみにして欲しいことが語られました。

イベントを通してあまんちゅ!ARIAとは違うものですが確かに「何か」がつながっている感じがしました。
それはきちんとARIAチームからあまんちゅ!チームへ伝わっているのがわかりました。  

最後に佐藤監督は天野先生が手がけられた描きおろしポスターから作品をこういう形でリレーできるのはとても幸せだとおっしゃられていました。

ARIAあまんちゅ!の蒼の世界が引き継がれていて幸せでした。
これからの放送に期待しましょう!ではまた!

Observableってなんなんね?

JavaScript プログラミング

ついにRCのリリースも間近となったAngular2ですが、私はこの間のハンズオン以来全然触れてません。
少しづつ触っていきたいものですが、ここ最近の勉強会の経験からAngular2を学ぶならWebの最新技術を学ぶことが大切なのだとわかったので、まずは、Observableを調べてみようと思います。

学習教材を探す

Observableについて学ぶぞ!と意気込んでみたもののどうやって学べばいいのでしょう。
どこかにObservableの正体について書かれた資料はないでしょうか。

github.com

ここにObservableがリストアップされています。
TC39、ECMAScriptを策定してる組織です。ECMAScriptJavaScriptの仕様だと前に教えてもらったことがあります。

  • どういう人達なのか
  • 何が目的なのか
  • そのために何をしているのか

思うことはいろいろありますが、とりあえずこの辺りはおいておきます。ecma262、これはなんでしょう。

www.ecma-international.org

なるほどECMAは組織でした。そのECMAが管理する仕様には管理番号が割り振ってあります。

Ecma Standards - list

つまり、ecma262はECMAが管理する仕様の一つということになりますね。
(ということはTC39のメンバーはECMAの人たちで構成されているのでしょうか?)

話を戻します。例のリポジトリにリストアップされたObservableのリンクを辿ってみます。
ありました。Observableの仕様を見つけることができました。以降はこの仕様を元に学習しました。

github.com

Observableの提案の概要がまとめれています。

Observableとはなんだろう

ObservableはDOMイベント、timer intervals、 そしてsocketsのようなpush-basedデータソースをモデル化するのに使われます

  • Compositional: Observablesは、higher-order combinators(?)で組み立てられる
  • Lazy: Observerがsubscribeするまで、Observablesはデータを発信し始めません

粗末な翻訳は許して下さい。英語苦手なんですよー。typeを型と訳すならObservableはどうやら型のようです。
JavaScriptにはECMAScriptで定められたプリミティブな型がすでにあります。

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol (ECMAScript 6で登場)

プリミティブではないものとしてObjectもありますね。

お、DOMのキーイベントを使った例があります!例示は理解の試金石です。早速見てみましょう。

github.com

この例を見る限りどうやらObservableは標準のビルトインオブジェクトとしても実装することを想定しているのでしょうか。
listenはObservableインスタンスを返し、Observableコンストラクタは関数を受け取っています。
関数はキーイベントにhandlerをアタッチして...っとhandlerの詳細がわかりません。

// observerとは何なのか
let handler = event => observer.next(event);

このドキュメントにはObservableやobserverのインターフェイスについても書かれています
それによるとこのobserver.nextはシークエンスの次の値を送り出すらしいですが...。

うーん、むずかしいです。何より何がしたいのか想像できません。
一旦この例を離れてObservableの実装例として、このドキュメントに挙がっているRxJSとzen-observableについて調べてみることにしました。

どのように動き、何がしたいのか知りたかったのでいろいろ調べていると、Observableをスクラッチで作ってみる動画を見てピンときました。

egghead.io

この時点でObservableとは非同期のデータの流れの手続きのことだとわかりました。
他にも以下のことがわかりました。

  • Observableはsubscribeすることでデータが流れ始めること
  • subscribeする際にnext, error, completeに対応した処理を記述できること
  • completeしたあとではデータが流れないこと
  • データを流したあとキャンセル可能なこと
  • キャンセルしたあとはデータが流れなくなること

この動画に沿っての実装はとてもわかりやすいのでおすすめです。

この動画を踏まえたうえで、先ほどのObservableの仕様書の例に戻ってみます。
ここで定義されているデータの流れはHTML要素から発せられるキーイベントです。

ストリーム中のイベントを配列を扱う時のようにfilterやmapする標準のcombinatorを使うことができる。

ここで以前わからなかった翻訳の意味が何となくわかりました。
higher-order combinatorsというのはこのfilterやmapのことをいってるはずです。
まるで配列を扱う時のようにObservableにはfilterやmapが実装されているそうです。

"filter" と "map" メソッドは提案に含まれてません。この仕様の将来のバージョンで追加されるかもしれません。

ですが、今のところ提案に含まれてないようです。今後の続報に期待しましょう。
さらにsubscribeメソッドの代わりとしてforEachメソッドがあり、これは一つの関数を受け付け、Promiseを返すそうです。

その後のMotivationの項目を見ていろいろわかったので、少し整理してみます。

  • Observableとは非同期のデータの流れを扱うプロトコル
  • Observableは型になるかもしれない
  • ObservableはDOMイベント、timer intervals、そしてsockets、UIに起因するような(アプリ内で起こる)データの流れをモデル化するのに使われる
  • Observableはfilterやmapのようなcombinatorで組み立てることができる
  • filterとmapは提案に含まれてない
  • Observableはsubscribeするまで、データを発信し始めない
  • Observableはビルトインオブジェクトになるかもしれない
  • Observableはsubscribeしたあとunsubscribeすることでデータの流れを止めることができる
  • (Observableはpush-basedのプロトコルをアプリやプラットフォームで扱えるようにするもの?)

push-basedプロトコルというのが何なのかイマイチですが、Observableがどういったものかわかりました。

JS Bin - Collaborative JavaScript Debugging

Angular2とタイプした時にconsole上でReceived key command: Angular2と出力するだけのサンプルです。
RxJSは使わず、zen-observableで実装してあります。ほとんどこの仕様書通りの実装です。よろしければこねこねしてやってください。

Observableについて理解できましたが、その強力さや凄さについては未だ疑問が残ります。
そのあたりのことは次回か、今週のng-kyotoのmeetupで話せたらいいと思っています。

ng-kyoto.connpass.com

興味のある方はぜひお越しください!ではではまたね!

Angular2ハンズオンに挑むふらいんぐうぃっち

JavaScript プログラミング

ng-japanとng-kyotoとGDG神戸合同開催のAngular2ハンズオンに行ってきました。
そして実はこのハンズオン、先週東京でも行われたんです!東西で同じネタを扱う勉強会って珍しくないですかね?

connpass.com

gdgkobe.doorkeeper.jp

会場のサイボウズ株式会社様には、25名ほどの方が来ていました。
会場がとても過ごしやすく広さ的にはどことなく学校の教室を思わせる感じでしたね。

で、肝心のハンズオンの教材はAngular2サイトのチュートリアルを題材としており、
手を動かし、解説を交えながらAngular2のことをたくさん教えていただけました。
ハンズオンの教材は口頭による解説がなくてもドキュメントが整備されているのでおうちで取り組むこともできます。
Angular2について少しでも気になっている読者の方がいればトライしてくださいね。

github.com

ハンズオンの前には @shin_v1 さんと @laco0416 さん(東京から来ていただきました!)からAngular2に関する
紹介とAngular2とECMAScriptについての発表がありました。

speakerdeck.com

laco0416.github.io

まとめるとこんな感じ

  • Angular2はAngularJSより高速に変更を検知してViewに反映できる
  • Angular2はフロントエンドフレームワークの概念に収まらない
  • Angular2にさえ乗っかれば大抵のことはできる
  • ドキュメントの整備も進んでいる
  • Angular2は5月ごろにRCリリースかも!?
  • Angular2学ぶなら今
  • Angular2を学ぶことは書き方よりもまずECMAScriptを学ぶことである
  • Angular2でECMAScript2015は当たり前、知らないとかは許されないくらいしっかり利用されている
  • ECMAScriptは今後1年刻みで勧告されるので6年分をまとめたECMAScript2015はしっかり押さえておこう
  • Webを理解して学び続けましょう

うん、まずはWebについての理解を深めようかな...。

ハンズオンは用意された教材をテキパキと片付け先へ先へ行ってしまう人や質問を交えながらじっくり取り組む人など様々でした。

個人的な感想ですが、AngularJSのころと比べると書きやすくなったなあと実感しました。
それは @laco0416 さんがおっしゃっていたようにECMAScriptの最新の仕様をどかっと盛り込んでるからこそだと思うんですよね。
もはや知らなかったでは通用しない世界が来てもおかしくはないと思うので今後も必要な情報を見極めてキャッチアップし続けていきましょう。

VSCodeでnpm scriptsのタスクを実行する

JavaScript プログラミング

VSCodeを使い始めました。1.0がリリースされるのが楽しみですね。
ところでTypeScriptを使う上でビルドタスクの設定に困ったので書いていきます。

tasks.json

VSCodeはビルドタスクを設定できます。
プロジェクト内で設定すると .vscode ディレクトリの中に tasks.json が作られます。
そのあたりの概要は公式サイトに書いてあるのですが npm scripts に書いたタスクを設定する方法について書かれていないのでここで紹介します。

{
  "version": "0.1.0",
  "command": "npm",
  "windows": {
    "command": "npm.cmd"
  },
  "isShellCommand": true,
  "suppressTaskName": true,
  "tasks": [
    {
      "taskName": "build",
      // Make this the default build command.
      "isBuildCommand": true,
      "args": ["run", "build"],
      // Show the output window only if unrecognized errors occur.
      "showOutput": "silent"
    }
  ]
}

これは npm run build コマンドの設定です。
それぞれのプロパティの意味については公式サイトに書いてあるので参照してください。
日本語なら以下のサイトを参考にすると幸せになれるかもしれません。

www.atmarkit.co.jp

tsconfig.json

VSCodeは tsconfig.jsonfilesGlob プロパティを設定しても認識してくれてないみたいです。
全然関係ないんですが angular のリポジトリにある tsconfig.json を見ると fileGlobs となっているんですよね。
エディタやそのプラグインによって違うのでしょうか?

Symbol と Iterator の型定義

どうやって解決するのかわからなかったのです。
どのファイルで解決できるのか探してたんですがなにかいい方法あるのでしょうか。
結局、以下の様な感じになりました。

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es5",
      "noImplicitAny": true,
      "sourceMap": true,
      "outDir": "tsc"
    },
    "files": [
      "./typings/main.d.ts",
      "./node_modules/typescript/lib/lib.es6.d.ts",
      "./src/index.ts"
    ]
}

"./node_modules/typescript/lib/lib.es6.d.ts" これで解決しました。
(これでいいのかはわからないです!)