VelocityとPixiの手抜きアニメーション。こうして花を咲かせましょう

by codechord. 1 Comment

160220

この記事は「[JS/CSS/SVG] Webとアニメーションの様々なありかた」という勉強会用の発表資料です。
アニメーションまわりのプラグインを紹介したものの、すごく駆け足だったので、あらためて、ご紹介します。

なお、ここで紹介するサンプルのデモは、githubにソース置いておきます。
(スライド無いです)

続きを読む »

Aura:FilterとFormでValidation

by codechord. 0 Comments

ちょっとしたAjax系のFormの実装をする必要があって、
一枚ペラっと作ってもイイんだけど、せっかくだし今風に作ってみようと思い、Auraに手を出した。

Formのためだけに、Wordpress使うのもなんだし、LaravelやSymfony使うのもFatすぎるかなって感じていて。
Auraはフルスタックのフレームワークではなく、必要なComponentをとっつけて組み立てるという感じ。

理解の仕方は、次の順
日本語ドキュメントがあるので、ざっくりはわかる。
・一つ一つのComponentが軽量でソースを追っかけるのも比較的簡単。
・同様に、それぞれがのReadmeドキュメントが整ってる印象。

https://github.com/auraphp
https://github.com/friendsofaura
今回サンプルとして、htmlのフォームでPOSTした内容をバリデーションチェック加えて、json形式で何らか返すというものを
以下の2パターンで作った。それぞれは同じ結果を返す。

・A: Filterをaura/filterを直接使う。(github)
・B: aura/input/Formの継承クラスを作成し、Form内でfilterを行う。(github)

基本

/vendor/auraの中身で、重要そうなのは、web-kernelあたりのよう。
ここでrouter、dispatcher、あとwebコンポーネントにある、RequestとResponseとかが、定義される感じ。

アプリケーションは、/config/Common.phpにかいていく。なお、/config/_env.phpにて、環境の設定を変更をすることで、

  • /config/Dev.php
  • /config/Prod.php
  • /config/Test.php

と、環境別に動作を切り替えれることが出来る。/config/Common.phpは、_env.phpの設定にかかわらず全てにおいて実行される。

DI

関連するサービスをsetし、必要時に、getして使う。

 $di->set(<サービス名>,$di->lazyNew());
 $service = $di->get(<サービス名>);

ルーティングとディスパッチャ

$router->add()でルーティングを指定して、$dispatcher->setObject()のクロージャで、ルーティングの処理をする。

$router->add(, );
$dispatcher->setObject(, function () use ($di) {
  // ここに処理
});

バリデーションチェック

Aura/Filterを追加する必要がある。Aura/inputも。必要に応じてAura/htmlも追加。

  • HTMLテンプレート書くなら、次のバンドルをcomposerに追加する。
    composer require foa/html-view-bundle
  • フォーム書くなら、次のバンドルをcomposerに追加する。
    composer require foa/filter-input-bundle

さて、説明がうまく出来ないので、以下のA、Bの場合とで、サンプルソースを見比べて欲しい。
/form.htmlの静的フォームから/sendにPOST送信され、フィルタのかけ、Jsonを返すのだが、Bの場合だけDIを使った形となっている。

A:Filterだけの場合
https://github.com/tomothumb/Sample-Aula-validation/blob/5e8dd23b450140ab4f2fe55ac7a0b399dc2bedb3/config/Common.php
Dispacharの中に書いていく。

B: Fromを利用する場合
https://github.com/tomothumb/Sample-Aula-validation/blob/master/config/Common.php
/src/App/From/Contact.phpを追加し、Formの要素とバリデーションの内容を記述する。

違いをGistに書いた。(わかりにくい。。。)


設計方法学ぼうとおもってたのに、いつのまにか、アプリケーションの書き方/使い方を学んでいる自分がいる。。。

同じことをSilexとSlimでも今度やってみよう。

ECCUBE3とSymfonyとSilexの歩き方

by codechord. 0 Comments

Photo-12-12-15,-12-06-20-AM

日付変わっちゃいました・・・
2015年ECCUBE アドベントカレンダー23日目の記事です。写真はECCUBE開発合宿の深夜の1コマ。

当初、作ったプラグインの案内でもしようかと思ったのですが、バグだらけで改善作業中なので、自分がECcubeを理解していく中で(まだまだわかってないですが)、自分なりのベストプラクティスを、これからECCUBEの開発を始めるヒトに向けて共有したいと思います。
ちなみに、バグだらけのプラグインはgithubベースでメンテするというか、メンテフリーで行く予定なので、自由にパクって下さい。
ECCUBE3-InfiniteScroll」「MECCUBE3-Masonry」「ECCUBE3-Loveit」(3つありますが、内容似てまして、松竹梅的な。)

思ってたのとなんか違う。

まず、私個人としては、Laravelは半年弱ほど触った程度。
LaravelはSymfonyベース、ECCUBEはSilexベース、そのSilexはSymfonyベース、だからきっとなんとなくわかるはずと思ってたんですが、いざ蓋を開けてみると、「これ、思ってたんと違う。。」というのが正直な感想。

Symfonyを理解していないからか?と、そう考え、ECCUBEの開発合宿へ参加したついでに、たまたまその翌日、東京はメルカリさんで開かれたsymfony meetupに寄ってきました。
つい先日、待望のsymfony本「基本からしっかり学ぶ Symfony2入門」の出版されたけども、その著者が登壇されるということだったので、行かなきゃとい思いまして、毎度のことながらスケジュールつめこんで。

Symfonyを学ぶことは近道。

ECCUBEを始め、最近は著名なCMSやフレームワークがこぞってSymfonyを採用しはじめていますが、なぜSymfonyが選ばれるか。なぜSymfonyが王道なのか。そういった内容を話されていました。(そのスライドはこちら⇒ Symfonyを選ぶ理由とその他の話 )

CakePHPでも、Laravelでも、それぞれのフレームワークでCakePHP Way、Laravel Wayみたいな◯◯Wayというベストプラクティスや強い主張があったりするけど、Symfonyというのは、主張してこないフレームワークであると。自分流にアレンジしやすいとのこと。

主張してこないとはどういうことかというと、Symfonyのコアが担うのは、
「リクエストを受け取り⇒レスポンスを返す」
というところ。つまりは、Webアプリケーションの根本的な所を学ぶことができると。

王道を知ることは、今後他のフレームワークを理解するうえでも、それぞれの◯◯ Wayの解釈ができるようになりますよ、とそういった内容でした。

(※ちなみに、Symfonyの日本語ドキュメントのサイトは遅れているようで、翻訳ついていくのは諦め気味とおっしゃっておられました。)

Symfonyの基礎をわかるとどうなる?

symfony本「基本からしっかり学ぶ Symfony2入門」全300Pぐらいで、早速ですが簡単な所は読みました。初期の構想から発売まで二年半ぐらいとおっしゃっておられたような。書籍の構成としては、

  • フレームワークとはなんぞや
  • Symfonyとはなんぞや。
  • デバッグバーの使い方
  • Routing
  • Controller
  • View (Twig)
  • Entity (Doctrine)
  • Repository
  • Form
  • Validation
  • メール(Swiftmail)
  • 機能の拡張
  • フィクスチャ
  • Console拡張
  • API実装
  • サービスプロバイダ
  • テスト

が順に解りやすく落とし込まれてあり、読み進め、実際に手を動かしながら、一つのWEBアプリケーションができます。Symfonyの基礎が中盤ぐらいまででわかります。後半で、サービスプロバイダの解説がされてありますが、ここを理解することがSymfonyおじさんになる手段であり、みながSymfonyを採用する肝のようです。ここまで読みきれてません、まぁ正直難しいです。

ECCUBEおじさんになるためには

先に述べたとおり、基本的な所を読了するだけで、ECCUBEのディレクトリ構造がざっくり理解できるようになります。
するとまぁ、ECCUBEとSymfonyとの違いがなんとなくわかりはじめます。

Symfonyは個性を主張してこないと述べましたが、Symfonyのチュートリアル的なものをしていると、アノテーションとか、手軽だけど、なんか魔法ばっかり。思っきり個性を主張してきます。。。(目をつぶります)

このせいで、Doctrineでもフォームでも何でも、ECCubeが吐くエラーメッセージの解決策をググりますと、概ね、Stack Overflow様がSymfonyの解決するための黒魔法を教えてきます。ECCUBEではこの魔法が全く役に立たずハマります。

そこで、Symfony本に目を通しておきますと、ホグワーツ魔法学校に通ったようなものですから、この先生の言ってることは、こう読み替えればよいのかとか、Silexの領域だなとか、ほんの少し見えてくるようになります。
で、最後にSilexやDoctrine、Symfonyのドキュメンテーションへと理解を深めていく旅に始まります。

Silexにどっぷりは必要?

おそらく、ECCUBEを深く知る上では、

  • Symfonyの基礎を把握する
    ⇒必要に応じてSilexのドキュメントを見る

という流れではありますが、Silexのドキュメントもなかなかしんどいです。
ECサイト作成程度の話であれば、Silexには触れず、

  • Symfonyの基礎を把握する
    ⇒ECCUBEのコアのコードからパクる。
    ⇒必要に応じてSilexのドキュメント

というのがベスト・プラクティスじゃないかなと思っています。といいますのも、Symfony基礎がわかるとディレクトリ構造がわかるので、コードのたどり方がなんとなくわかってきて、ECCUBEコアに、ピンポイントで似た例がでてくるのがほとんど。Silexのドキュメント見るより手っ取り早いと感じるからです。

コア開発者になるなら、SilexもSymfonyサービスプロバイダもしっかり理解してください。ということになるんだと思います。

さいごに

ECcubeの話というより、Symfonyの話がほとんどになってしまいました。
最後になりますが、ECCUBEはSilexベースですが、Symfonyかじらず、いきなりSilexから入っちゃうと遠回りになると思うので。まずは王道からと、オススメしつつ、アドベントカレンダーをバトンタッチしたいと思います。

最後になりますが、Symfonyを初学者向けソースを、Symfony meetupで知った部分貼っていきます。
参考になれば幸いです。

YAPC::Asia Tokyo 2015に参加した覚え書き #yapcasia

by codechord. 0 Comments

yapc

ブログを書くまでがYAPCというわけで、聞いたことを忘れないうちに、一応書こうと思う。考察や見解をいれてない、ただの議事録記事ですが。

さて、Webの歴史をつくってきた貴重なカンファレンス。
本年度で10年の幕を終えるというわけですが、遠いということもありましたけど、Perlの親だったり、Rubyの親だったりをはじめ、Rebuild.fmやMozaic.fmの人だったり、Github,Google,サイボウズ、KAIZEN、DeNA、クックパッド、KAYAC、はてななどなど、まー、いろいろと中の人達の活動を見れるすごくいい機会というわけで、迷わず参加。
2000人オーバーしたみたいです、すばらしい。注目度が高いイベントは例外なく内容が濃い。

偏ってるけど、個人的に注目したテーマが、

  • ES6、Node
  • HTTP/2
  • Electron
  • WebAudio

ってところ。インフラ周りも聞いたけど、一番近いところがやっぱり興味がわくものですね。
あとはDeepLearningとかもフォローアップしたいところだったけど、見れなかった。

さて、印象に残ったセッションをメモしていきます。

続きを読む »

Google Analytics APIのエラー。v2.3からv3移行手順。OAuth2対応とxmlからJSONへ

by codechord. 0 Comments

md_reporting
Google Analytics API v2.3のサポートが2015年5末頃に終了したみたいで、動かなくなっちゃったアプリケーションがあったので、2015年6月時点の最新であるv3に対応させないと行けないということで、書き記します。

次のようなエラーで引っかかった人のための記事です。

User does not have any Google Analytics Account.
Failed to authenticate user.

GA api v3で何が変わった

個人的に思うのは、大きく次の3つ。

  • OAuth2.0対応の必須
  • XML形式⇒JSON形式
  • リクエスト先のURLの変更

この中で特に大きいのはOAuth2への対応。
これまではEmailとPasswordで接続できてましたけど、APIキーを発行して、Analyticsの設定もかえないといけなくなった。プログラム側の修正はその後の話。

OAuthの対応の準備

手順としては、次の通り

  1. APIキーを発行
  2. Google Analyticsの管理画面で追加設定
  3. アプリ側の仕様変更へ対応。
    • OAuth対応(手順1で生成されたメールアドレスや鍵を利用。)
    • JSON形式に対応させるか、xml形式にフォーマットし直す。

[1,2]の手順は、こちらのページで詳しく書かれてますので、詳しくは割愛。
「Google Analytics API v3をPHPから利用する方法 | karakaram-blog」

[3]については、「Data export API」っていうものから「Analytics Core Reporting API」に代わるわけなんだけど、移行させるだけなので、APIの名称なんてどうでも良いです。
一応ドキュメントのリンクを。ちゃんと読みましょう。

コードの修正

さて、準備が整ったところで、実装を。
これから新規でv3アプリ作る人なんかは、composerなんかでよさそうなlibraryで対応したら良いと思います。
今回はcomposer使えない環境だったので手軽なライブラリを探したところ、「GAPI」なるものが良さ気で使った。
OAuth2がとても簡単。

githubのReadmeにあるサンプルの通りで簡単に動きます。簡単です。
https://github.com/erebusnz/gapi-google-analytics-php-interface
自分の場合、そのアプリ側がv2のxmlに最適化されてて、json形式用にフォーマット追加するのが面倒な環境だった。
移行の場合大体そう。
ライブラリ側で面倒みてくれば最高というわけで、このライブラリ側でv2のxml形式風に返すメソッド追加して、マージされるかはわからないけど、プルリクおくりましたという紹介。
https://github.com/tomothumb/gapi-google-analytics-php-interface/

とりあえず、僕のリポジトリつくったらxmlの文字列が返ってきます。
こんな感じです。


最後に使い方というかサンプルをば。ちなみに、xmlの文字列が返ってくるので、echo やver_dumpして、ブラウザ上で閲覧すると真っ白です。ソース表示にするとちゃんとxmlが出力されてるのがわかります。


たぶん、これで、xml前提のアプリとして実装されてた場合は移行がそこまで大変じゃなくなるのじゃないかな。もちろん、v3を活用するにはJSON用に作りなおすのがベストなんでしょうけどね。
ちなみに、v2のXML形式は、こちらのページを参考にしました。

(画像はGoogle Analytics APIのドキュメントページから拝借させていただきました。)

VCCWとWockerの比較。wordpress開発の新しい選び方。

by codechord. 1 Comment

vccw-wocker

2015/05/18、個人的にどっぷりな、wordpressプラグイン本の著者さんがセッションするということもあり、第41回 WordBench 大阪 「VCCW vs Wocker」に行った議事録と感想。

結論からいって、Dockerについてかなり理解が深まった。
きっかけを与えてくれたWockerの作者のKiteさんにはただただ感謝。
触発されて、今日ずっとDockerfileの書き方しらべてた。
あとは、TDDの必要性だとか、CIの必要性だとかへの理解が深まり、ついでに、OSSの貢献の方法というか考え方だとか、いろいろと参考になった。

本題のテーマはvccw vs wocker。つまり仮想環境を利用しての開発環境についてのセッション。
そのまえに、まずDockerについて触れておく。

続きを読む »

vccwとWordMoveでWordPress開発が便利になるし勉強にもなるよという話

by codechord. 0 Comments

20150505vccw

久々に書くよ。2015のGWを使ってざーっと調べたメモとして。
wordpressの開発環境とデプロイに関して調べてて、というかWP-CLI使おうかなーって重い腰を上げただけなんだけど、wordpressでも結構モダンな、いろいろおもしろい発見があるもんだなとおもった。やる人はちゃんとやってんだなーって。(受託のお仕事の場合、意識しなければこれら何一つ触らずに済ませれる)

ひとつひとつ、掘り下げてたらきりがないので、エントリのタイトルのとおり、vccwとWordMoveで開発するのがいいかもって話、なにがいいかってところだけ書いて、一つ一つは別エントリで掘り下げていくことにする。今回はコードは書かない。

続きを読む »

MacとiPhoneとiPadで電子書籍(PDF)を付箋も同期するねん

by codechord. 0 Comments

pdfsync

タイトルのやり方について、自分なりの工夫は一応みつけたんだけど、オライリーメディアさんが半額セールなんかの広告しょっちゅう打ってるもんで、電子書籍として買った技術書が50冊ぐらいに増えてきて、読んでなかったりするのも多く、そろそろもっといい方法みつけたほうがいいかなーってところ。
自分の場合は技術書だけど、PDFの資料なんかをiPhoneやiPadで見たり、メモ残しておいたりしたいって人にも活用できるかもしれない。

やりたい事

  1. [解決済]MacとiPhoneとiPadで電子書籍(PDF)を同期して読む。200ページ、300ページでもサクサク。
  2. [解決済]付箋、アンダーライン、マーキング、ブックマークをつけたり、とにかくどの端末からでも編集でき、編集データも同期できる
  3. 背表紙の画像なんかで、一望して管理できたりする
  4. 複数の本にまたがって、付箋情報などを一度に検索できる。

続きを読む »

WordCamp Kansai 2014に参加した話 #wckansai

by codechord. 1 Comment

2014wordcampkansai

グランフロントで実施されたWordCamp Kansai 2014ですけど、記憶に残ってるうちに忘れないようにメモポスト。
日本語いいね。隅々まで理解できるや。前回きつかったから。。。
というわけで、見たセッション順にレポート。

基調講演

WordPressのco-founderのMattの公演。
元々ミュージシャン志望で、出身高校は音楽系の学校、ビヨンセを送り出した学校でもあり、そこではサックスばっかりしていた。1時間あたり$50のレッスン料が高いので、友人のミュージシャンのwebサイトや自作マシンを作る代わりに、レッスンをしてもらったって話。
過去から、現在、近い将来のはなしへと。

Gigazineが早速記事にしてたので、詳しくはそちらをみたほうがよさそう。
http://gigazine.net/news/20140607-wordpress-matt-mullenweg-speech/

世界中にスタッフがいて、リモートワークで成り立ってる企業だけど、来年150人雇用するとのこと。
日本は大好きだけど、日本のことが一生理解できる気がしない(トイレとか特に)から、現地スタッフはどうしても居るよねって。
リモートで成り立ってるところ、どうやって信用できる人間をえらべてるのか、最近個人的にすごい気になってて、人事まわり結構興味があったんだけど、いっぱい並んでて聞けなかった。

続きを読む »

2014年の抱負

by codechord. 0 Comments

hourse camargue

あけましておめでとうございます。

私の正月はというと、javascriptのprototypeだとかの仕様にらめっこしてて、関数型でクラス設計とメリットについて考えたりしてました。

結果、正直まだわかってません。なぜかって、そりゃHuluを試しに契約してみたからじゃない。昔より安くなってて、コンテンツ増えてたので。
登録したら、英語字幕、英語音声のドラマが少ないながらもあったからはまってしまったってところですが。前まで英語字幕なかったんすよね。フレンズのスロー再生から徐々にスピードアップって学習スタンスは変わらないですがコンテンツにあきるので調度良い感じ。Huluで再生速度変更できれば最高なのになぁ。

さて、すごくどうでもいい前置きでした、今日は思うところと目標を書いてみようかなと思います。

続きを読む »

photo by: Daniel70mi