えっ、私のLaravelのバージョン低すぎ・・・

フレームワークとかあんまり追ってませんが、会社の近くでイベントあったので聴いてきた。 ココ最近2つぐらいLaravel触ってつくったので、なんか便利な使い方とかあるかなぐらいのノリでいってきたつもりが実はLaravel5.0の話だった。

結論からいうと5.0にはあまり興味がわかなかった。 大事なことなので最初に言いました。あとはメモ書き。

laravel5.0について

最近の状況

  • 2014/6 Laravel4.2リリース
  • 2014/9 Laravel4.3を5.0に変更
  • 2014/11 Laravel5.0-DEV drastic(何のことを指してるかわからないけど、はじめてきいたw)

変わる(らしい)ところサマリ

  • New Folder Structure
  • App Namespace
  • Spiffy Authentication
  • Constracts & Method Injection
  • Form Requests
  • Multiple Filesysmtem
  • Socialite(BETA)
  • Elixer
  • New ENvirionament Detection
  • Route Annotatino
  • Event Annotation
  • Route Caching
  • New File Generator

それぞれ概要

間違ってるとこ結構あるかも。終わった後に講師の人と話してみたら、ぼくもそこまで・・・みたいな感じだったw

  • New Folder Structure

結構ディレクトリかわる

app/comannds => app/Console/
app/controller => app/Http/controller

とか他もかわるらしい。developブランチみたらディレクトリ全然違うw

  • App Namespace

名前空間強制されるので、app/config/config.phpに書いてるFacadeはだめぽい。 いちいちuse使うか、\をつけてグローバルから呼び出す 名前空間あんまり使ったこと無い僕的には、結構わかりやすかったんだけどなー。

  • Spiffy Authentication

AuthController.php PasswordControllerがデフォルト追加 自分でcomposerで読み込んだりしなくても、よろしくやってくれる。 viewはないから自分でつくってね

  • Contracts & Method Injectino

ある規約にのっとると、construct関数とかmethodによろしくオブジェクトやクロージャを入れてくれる ナニコレよくわからないw

  • Form Requests

formアプリで、今まではRequestクラスからパラメータを取得して、自分でrulesとかをsetしたValidatorでよろしくハンドリングしてたものをHogeFormRequestクラス(Validationと、エラー時のviewのハンドリング)みたいなものを作成し、よろしく動くようになる

  • Multiple Filesystem

ファイルの保存先にWebストレージを選択できるようになる S3とかRackspaceとか

  • Socialite

Facebook, Github, Google, Twitterとかのoauth簡単に使えるらしい。 今は標準パッケージで入ってないから、composerでいれてね

  • Elixer

Webアセット管理機能(gulpベース) node/npm/gulp入れてくださいということらしい。 Homesteadには既に入っているみたいw これ果たして使うのかな・・・w アセットのコンパイル(Less, Saas, CoffeeScript)、アセットのminifyとかもやってくれるらしい

  • New Environment Detection

環境変数で判定していたものが、.env(.gitignore)ファイルに書く。 これやるメリットってあるんだろうか。

  • Annotation

RouteとEventというものに使えるらしい。ドクトリンのannotationというものを参考につくってるらしい(?)

/**
 * @Get("/index")
 */
 public function index() {}

みたな。

artisanコマンドでrouting一覧を出せるということだったのだけど、果たして一体これ誰得感ある。 routes.phpに書いたほうが、Http Proxyのところわかりやすいかなと思ったのだけれども

AnnotationをつけるとEventListnerの登録ができるらしい。 ここらへんもあんまりきいてなかったw

  • Route Cache

ルーティングがキャッシュできる。 ただそんな早くならないとか。え・・・どういうことw

  • NewFile Generator

なんかあるらしい(きいてないw

3社の方々がとあるサービスでlaravelを採用した理由みたいなものを発表していました。

所感

  • 4系からの移行はたぶん無理
  • 5.0に上げるメリットわからない。
    • 聴き方が悪かったのかもしれないけど、発表者の人に何か使いたい機能あります?っていったらうーんっていってたw
  • お前かわっちまったな・・・
    • マイクロフレームワークで、自分でコンポーネント組み合わせてはちょっと・・・という人向けに、ちょうどいい感じのフレームワークかと思ったけど、5はあんまりよくわからなかった。これ継承してこう書いたら、こう動くから!みたいな雰囲気を感じた。自分の好きなバンドが売れたら変わっちまったなというものと同じでないことを祈るw

フレームワークとかあんまそこまで熱心に動向を追ったりはしないのでなんとも言えないのですが、Railsみたいな感じをPHPで目指そうとしているのか、それともフレームワーク作者の遊びなのかはわかりませんでした。 なんともまとまりのないメモ書きだなあ

東京Node学園祭2014にいってきた

Node.jsのカンファレンスならぬお祭りイベントいってきました。

いきなりまとめ

結論先いうととても楽しかったです。 以下は個人的にささって、あとできちんと触ってみようと思ったものです。 英語の発表もあったし、僕自身の知識もつたないので間違えてるかもしれませんmm

node-webkit Windows/Linux/Macで実行できるデスクトップアプリを作れるもの

loopback Expressをラップしたリッチな感じのフレームワーク

cx-helloworld node-grind デバッグモニタリングツール

three.js WebGL関係(node関係ないけどw)

あとParty。Automatticがつくったぜーっていってた。ファイルアップロードのライブラリ。まだ公開されてないからリンクはありませんmm

自分がみたセッションと個人的メモ

午前中のsocket.ioのHandsOn

socket.ioのHands Onというより、サンプルコードのgithubのリポジトリのコードを先にlocalで動かしながら、webGLのthree.jsすげーってなってたw.socket.ioはredisとの連携の部分とかちゃんとやったことないから、やって欲しかった。でもめっちゃ満足。

基調講演

Speakerむっちゃかっこよかった。個人的にLAいってたときにシェアハウスしてた奴に似てたw File Upload APIっていけてるものないよね。だから俺たちがparty(file upload api )つくったぜー。っという話でした。そのうちここらへんに公開されるみたい。Demo見たけど確かにアップロード時間が半分以下になってたし、アップロードの中断・再開とかできてた。画像投稿サービスとか、動画アップロードサービスで使えそう。

loopbackの話

expressをラップしたもうちょっとリッチなフレームワークloopbackのお話。ModelをscaffoldしたらREST APIが自動にできるのとか、各種Modelの定義とか変更できるGUIの機能がとてもリッチですごかった!日本語ドキュメントがないらしい。 発表きてたIssacさんに話しかけて、イケてるケーブルもらっちゃったから後で、後で試してみる。

f:id:chocopie116:20141115194327j:plain

あんまり使わないけど使うときにいつも無いmini-usbと、micro-usbのケーブルとかがまとまってて超イケてる!

ノードトランスパイラーの話

自分的にはまだ発表内容に関するものあまり触ったこととなくてピントこなかった。

Node past present future

2009〜今日まで、Node.jsでecho server書くときのHTTP proxyの部分のコード量をみて、だいぶ成長したしょみたいな話。 callback hellはどうにかしたいから、generator将来どうこうするよみたいな話があったんだけど、英語よくわからなかったw

LT

  • Node初心者だけど、広告システムつくったよっていうお話 PaaSとかで、debugする時になかなかリソースの情報取得できず、こういうツールつかってたよという話がよかった。Herokuで結構困ったので、使ってみようと思った。

  • ギャルでもわかるnode-webkitのお話 node-webkitは、Windows/Mac/Linuxのどの環境でも動くクライアントアプリが、いつもあ使ってるWebの技術でつくれるというもの。発表内容はお仕事の中で、各種運用楽にしたよーという話。とにかく発表が神がかってた。すげー面白かったw node-webkit使うのは、サーバーにファイルとかをhostしなくても色々使えることかなーと思いつつ。サイネージとかに使えそう。あとは動画とかサーバーサイドではあまり触りたくないものをlocalにおいて、なんかのWebアプリのclient sideとして何か面白い事できないかなーと思ったり。

  • 裏LTであったゲームの話 サーバーからは、WebSocketでCanvasのコードを送りつけて、クライアント側はそれを実行するだけとかっていう話おもしろかった。 こういうの思いつけるようになりたい。

会場あつかったけど、ノベルティでもらったTしゃつに着替えたらすごい涼しかった。肌触り最高で、寝間着として重宝しますw

f:id:chocopie116:20141115223910j:plain

懇親会でお寿司も食べれて大満足でした。

PHPカンファレンス2014で、gihyoの当日レポートスタッフ業務してきた。

PHPカンファレンス2014にいってきた

PHPカンファレンスでした。とりあえずスタッフ募集してたので知人もいたので参加してみるかーとスタッフとしていってきました。 結果、とても面白かったです。

f:id:chocopie116:20141011181300p:plain

スタッフ業務

朝早くいきました。 協賛のパンフレットを封筒につめました。

f:id:chocopie116:20141011181347p:plain

ぞうさんのTシャツもらいました。

f:id:chocopie116:20141011181325p:plain

ちなみに今回のスタッフメイン業務はgihyoの当日レポートの記事作成でした。 初めてのPHPカンファレンスなのにそこそこ重かったですw 下記は見たセッションと軽い感想です。

基調講演

PHP7.0は、perlで縁起悪いから6飛ばすよという話。 7.0スゲ−と思ったらそういう理由かと納得。

PHPコアから読み解くPHP5.5

PHP5.5の機能をPHPのコアで読み解きながら紹介っしていくよという話。 ただPHP5.5の機能をPHPのコア(オペコード)を読み解いた結果、比較するサンプル同士であまり違いが見られなかったよという結論だったので、もったいなかったかなと思いました。 ただオペコードって知らなかったからへーという感じでした。

擬人化から始めるPHPerのためのオブジェクト指向超入門

初心者セッション。 自分はオブジェクト脳という本をよんで、なんとなく理解した。 オブジェクトデザインという本がおすすめらしい。

PHPerがAWSと出会ってDevOpsを目指した話_

スタートアップの中のアプリケーションエンジニアが、ユーザーの増加とともにインフラをどうしていったかという話。 やっぱりお金で解決して、検証すべき価値に時間を費やすという考え方はとても共感できる。 こういう自然発生していくサービスを担当していないので、少し魅力的に見えた。

PHPにおけるI/O多重化とyield

最近Node.jsで知ったyield。 今まで同期プログラミングしかやってなかったけど、マイクロサービス(awsとかそうだっけ)を実現するために、IOは多重化しようぜという考え方と、PHPでのyieldの使い方は結構試してみたいなと思った。 職場のPHPのversionは5.4だから使えないけどなw

スライド

LT

皆さん話が上手で面白かったです。 個人的には、PHPでAIコンテストに参加した人の生き様がカッコ良かった。

composerで、Http_Request2を入れようとしたらハマった。

API叩くアプリとかつくるとき、Http_Request2のライブラリ使いますよね。 APIたたいた結果に応じてアプリの振る舞いが変わるのをテストするのとか便利ですよね。 composer経由でHttp_Request2入れようとして、ぐぐったけど、うまくいかずハマった。

動かない

composer.json

{
  "repositories":[
    {
      "type":"pear",
      "url":"http://pear.php.net"
    }
  ],
  "require":{
    "phpunit/phpunit": "3.7.*",
    "pear-pear/HTTP_Request2": "2.1.*"
  }
}
$ php composer.phar install 

Loading composer repositories with package information
Initializing PEAR repository http://pear.php.net
Installing dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - The requested package pear-pear/http_request2 could not be found in any version, there may be a typo in the package name.

Potential causes:
 - A typo in the package name
 - The package is not available in a stable-enough version according to your minimum-stability setting
   see <https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion> for more details.

うっ・・・鬱。

動いた

{
    "repositories": [
    {
        "type": "pear",
        "url": "http://pear.php.net"
    }
    ],
    "require": {
            "pear-pear.php.net/HTTP_Request2": "*"
    }
}
$ php composer.phar install

Loading composer repositories with package information
Initializing PEAR repository http://pear.php.net
Installing dependencies (including require-dev)
  - Installing pear-pear.php.net/xml_util (1.2.3)
    Loading from cache
  - Installing pear-pear.php.net/console_getopt (1.3.1)
    Loading from cache
  - Installing pear-pear.php.net/structures_graph (1.0.4)
    Loading from cache
  - Installing pear-pear.php.net/archive_tar (1.3.13)
    Loading from cache
  - Installing pear-pear.php.net/pear (1.9.5)
    Loading from cache
  - Installing pear-pear.php.net/net_url2 (2.0.9)
    Loading from cache
  - Installing pear-pear.php.net/http_request2 (2.2.1)
    Loading from cache
Writing lock file
Generating autoload files

相変わらずなぜに言及しないブログw

Thanks

会社の社員総会でNode.jsを使ったリアルタイムクイズアプリをリリースした

僕が所属する会社は、半期に2回全社員が集まって、半期の成績を表彰したりオモシロコンテンツをやっています。

会社が15周年という節目を迎えていることもありいつもと違うことをしようということでwebアプリを使ったクイズ大会をすることになりました。

そこで自分として力を入れたこと・制約の中で諦めたことを書こうと思います。

規格概要

会場にいるユーザーにスマートフォンを使って回答してもらうというもの。 クイズの選択肢の回答集計結果と、早押しや、最終ランキングをブラウザのwebアプリでプロジェクターでスクリーンに写してユーザーに見せます。(クイズのVTRは、会場のスイッチャーを使ってDVDを再生したものを見せます)

f:id:chocopie116:20141006005629p:plain

ユーザー側の操作はユーザー登録と、回答送信フォームの2つの画面のみ。 司会の合図で画面に表示される①②③④のボタンを任意のタイミングで押すだけです。

  • 回答画面

f:id:chocopie116:20141006005639p:plain

  • 司会の回答スタート!の合図とともに管理画面から各問題毎の回答受付開始を設定します。

f:id:chocopie116:20141006005911p:plain

制限時間内に会場にいるユーザーの回答をさばいて、画面に結果を表示するというもの

サーバーは、最近少し触ってみたNode.jsを使ってやりました。 アプリはHerokuにのせました。
最初はWebSocketを使ってやる予定だったので。(後日WebSocketはやめましたが・・・w)

当日は180名ほどの方々にクイズに参加いただきました。 Herokuのlogをtailして見守りながら、内輪向けのプロダクトという奇妙な緊張感に、 終始冷や汗ものでしたが無事システム的な大きなトラブルもなく終わりました。

以下備忘録です。

今回トライ・注力してみたこと

  • 仕事の本業じゃない部分でのシステム構築
    →断ることもできたけど、面白そうだから企画に乗っかってみた。
  • 失敗できないPJで、プロダクションで使ったことのない言語を採用してみた。
    →Node.jsの採用。(プロダクションで使ってみてなんぼでしょの精神。今思うと恐ろしいw)
  • ユーザー側の処理はシンプルに
    →ニックネームでのユーザー登録・回答ボタンを押すだけ。(あんまり複雑なことやるとバグ出る)
  • 初Heroku
    → 最初はWebSocket使えるからという理由でしたが、初めてHeroku使ったけど超便利。
  • サーバーの処理の高速化
    →回答制限時間のあるクイズだったので、ユーザーの回答処理の高速化をやった。ベンチテストをして、回答処理に時間がかかっていたので、アプリ側でDBアクセスをどんどんメモリキャッシュしていった。(前日夜中に先輩に付き合ってもらいましたw)
  • ベンチマークテストを厚めに
    →バグfixも完璧とはいえませんでしたが、とにかくベンチマークテストに時間をかけた。アクセス負荷・実際の処理速度の計測をした。

今回諦めたこと

  • WebSocket
    →2日前に、HerokuでSocket.io動かしたら、最初にコネクション確立するところで、Engine.ioでエラーがでてあせった。ベンチマークのテストもわかりづらいし、プロダクトとして完成させてさっさと完成させてテストしたかったのでpost処理に変更。
  • Node.jsのcallback地獄を綺麗にするため使ったasyncモジュールの読解
    →処理が遅かったときasync moduleのwaterFallメソッドが臭ったけど、とりあえず放置プレーした。

次回トライしたいこと

  • koa
    → yeildちゃんと理解して使いたい。callback減らしてスッキリさせたい。
  • WebSocket使ってもう少しリッチな機能つくりこむ
  • もう少し利用しているライブラリの中身読み込む
  • JavaScriptともうちょっと仲良くなる

最後にデバッグベンチマークテスト・高速化のお手伝い・アドバイスをくださった方々にこの場を借りて御礼を申し上げます。 クイズアプリとして、年末年始の忘年会シーズンの幹事様を助けるサービスとして利用できるようにしたいなとは思っております!

Node.jsのExpress4系で、特定URLにBasic認証を掛ける方法

最近Node触ってます。 JavaScriptそこまでゴリゴリ書かないから勉強になるのと、 npmでごにょごにょ使いたいライブラリ組み込んだりするのが楽しくてやってます。

さて本題です。
基本前提expressで、サーバーが動いている前提です。

npm install basic-auth-connect

express4系から、いくつかのmoduleが外部に切りだされたので(詳しくはココ )自分でrequireしなくてはいけません。

特定のURL以下に対して、Basic認証をかけたい場合

ここでは、staff/*以下のURLに対してusernameとpasswordでBasic認証をかけている。

var port = process.env.PORT || 3000,
      basicAuth = require('basic-auth-connect');

//  ... (省略)

app.all('/staff/*', basicAuth(function(user, password) {
  return user === 'username' && password === 'password';
}));

// ... (省略)
server = http.createServer(app);
server.listen(port)

全てのURLに対してBasic認証をかけたい場合

// ... (省略)

app.use(basicAuth('username', 'password'));

// ... (省略)

個人で小さいアプリをつくろうとするとき、ユーザーからのリクエストがくるアプリと管理画面の機能を同居させるとき、気軽にやるには便利ですね。

プレゼンスライド生成のbespoke.jsをさわってみた

プレゼンテーション生成のbespoke.jsをさわってみた

プレゼン用のスライドショーを簡単生成する nodeで動くbespoke.jsをさわってみた

  • 結論

超簡単なので、これから使う。

  • 必要なもの
brew install node
npm install -g yo generator-bespoke
  • 新規スライド作成手順
mkdir sample_slide
cd sample_slide
yo bespoke #yeomanでプロジェクトが生成される。色々聞かれるけど全部yesでOK
grunt server #勝手にブラウザが立ち上がって、スライドショーが開始される
  • スライドの編集の仕方

src/index.jadeを修正すればおk grunt serverをしとけば、スライド直せばブラウザも更新されるのがなにげに便利。

    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    title Sample Presentation

    // build:css styles/styles.css
    //- Check out 'src/bower_components/prism/themes/' for available themes
    link(rel='stylesheet', type='text/css', href='bower_components/prism/themes/prism-tomorrow.css')
    link(rel='stylesheet', type='text/css', href='styles/main.css')
    // endbuild

  body

    article

      section
        h1 はじめてのプレゼン

      section
        h2 画像とかも貼れる
        h3 <img src="https://pbs.twimg.com/profile_images/1650275843/__________2011-11-21_23.03.19.png">
                                                                                                                                                                                                              

    // build:js scripts/scripts.js
    script(src='bower_components/bespoke.js/dist/bespoke.min.js')
    script(src='bower_components/bespoke-keys/dist/bespoke-keys.min.js')
    script(src='bower_components/bespoke-touch/dist/bespoke-touch.min.js')
    script(src='bower_components/bespoke-bullets/dist/bespoke-bullets.min.js')
    script(src='bower_components/bespoke-scale/dist/bespoke-scale.min.js')
    script(src='bower_components/bespoke-hash/dist/bespoke-hash.min.js')
    script(src='bower_components/bespoke-progress/dist/bespoke-progress.min.js')
    script(src='bower_components/bespoke-state/dist/bespoke-state.min.js')
    script(src='bower_components/bespoke-forms/dist/bespoke-forms.min.js')
    script(src='bower_components/prism/prism.js')
    script(src='scripts/main.js')
    // endbuild

ブラウザではこんな感じに見える

f:id:chocopie116:20140601013742p:plain

f:id:chocopie116:20140601013747p:plain

なかなかいい感じ。いろんな用途で使えそう。