Archives for 1月2015

FacebookのReactをいい感じに使えるReagent

今回、長野県のペンションマウンテンパパというところに開発合宿に来ています。

Python mini hack-a-thon 雪山合宿 2015

今、公私ともにClojureでいろいろなことをやっていて、フロントエンド部分もClojureScriptでやっていこうかなと思っています。(Google closureライブラリではないです)

そんな中、FacebookのReact をClojureでラッピングしたライブラリで有名なものに om がありました。

他にも reagent というライブラリが存在しています。わかりやすさレベルでいうと、reagentに軍配があがるような気がします。

ということで、このreagentの紹介をします。

reagent – A minimalistic ClojureScript interface to React.js

この記事の対象者前提

  • Clojure がなんとなく読めること、興味があること
  • PCにleiningen(というClojureのビルドツール)がインストールされていること、使い方がわかること

まずはプロジェクト作成

leiningenは、テンプレートからプロジェクトファイル一式を作る機能があります。

これを使うことで、ライブラリの導入などの手間が省けます。

$ lein new reagent [プロジェクト名]

ライブラリなどのダウンロードと起動

reagentプロジェクトのディレクトリが生成されるので、黒い画面で、該当ディレクトリに移動します。

まずは、何もファイルの変更をしないで、デバッグが簡単なモードで起動してみましょう。

$ cd [プロジェクト名]
$ lein figwheel

実行すると下記のようにメッセージがずらずらと出ます。

JavaScriptが生成されたのがわかります。

Figwheel: focusing on build-id 'app'
Compiling ClojureScript.
Figwheel: Starting server at http://localhost:3449
Figwheel: Serving files from '(dev-resources|resources)/public'
Compiling "resources/public/js/app.js" from ("src/cljs" "env/dev/cljs")...
Successfully compiled "resources/public/js/app.js" in 19.221 seconds.
notifying browser that file changed:  /js/app.js
notifying browser that file changed:  /js/out/goog/deps.js
notifying browser that file changed:  /js/out/reagenttest1/core.js
notifying browser that file changed:  /js/out/reagenttest1/dev.js

どうやら、サーバも起動したぽいので、http://localhost:3449 をブラウザで開きます。

ブラウザで何かサンプルページが表示されれば準備は完了です。

IDEAで編集を楽にする

ClojureScriptを編集するのは、各自エディタを使えばいいのですが、僕はCursive というIntelliJ IDEAのプラグインを使っています。

括弧の閉じ忘れや、ライブラリの参照、宣言していない値の利用ミスみたいなことがなくなるので便利です。

reagentプロジェクトテンプレートについて

先ほどのプロジェクト作成を行うと、いくつかのファイルやディレクトリが作成されます。

これらのうち、今回大事なのは以下の2つです。他にもいろいろ入っていますが、今は無視でOK。

  • project.clj -> 依存しているライブラリなどが書かれている
  • src/reagenttest1/core.cljs -> JavaScriptとして書き出されるロジックなどを書く

reagentのプロジェクトテンプレートの便利なところ

reagentプロジェクトテンプレートを使うと、下記のようなメリットがあります。

  • ルーティングのライブラリが組み込まれている
  • ページ遷移の履歴がサポートされている
  • ちょっとしたサンプルページが2ページほど用意されている

小さなコンポーネントを作ってみる

では、早速ちょっと小さなコンポーネントを作りつつ、リアクティブ的な挙動を体験してみましょう。

まずはコンポーネント定義

src/reagenttest1/core.cljs に下記を追加していきます

(def test-val (atom ""))

これは、reagent側でアプリケーションの状態を保持しておくための入れ物です。

Clojureは基本イミュータブルな値を使ってプログラムを組んでいきますが、atomというものを使って状態を保持しています。

続いてコンポーネント本体を書きます。

src/reagenttest1/core.cljs に下記を追加します

(defn test-component []
  (let [val (cond
              (= @test-val "") "[空です]"
              :else "[OKです]")]
    (js/console.log "test-val:" @test-val)
    [:div
     [:input {:type      "text"
              :value     @test-val
              :on-change #(reset! test-val (-> % .-target .-value))}]
     [:p "test-valの中身:" val "(" @test-val ")"]]))

フォームの内容が空だと「空です」と表示し、何かが入力されると「OKです」と出るものを作ります。

ポイントは、divタグやフォームなどをClojureのデータ構造で書いてある点です。これがVirtualDOMとして機能します。

コンポーネントはこれで終わりです。

続いてページの作成

表示するページを書きます。

src/reagenttest1/core.cljs に下記を追加します

(defn my-page []
  [:div
   [:h1 "Reagentのテスト"]
   [test-component]])

見出しと、コンポーネントがあるのみのページです。

test-componentという先ほど定義したコンポーネントを呼び出しています。

ルーティングの定義

最後にURLとページを結びつけるためにルーティングを定義します。

http://localhost:3449/#/my-page を開くとmy-pageページが開くようにします。

src/reagenttest1/core.cljs に下記を追加します

(secretary/defroute "/my-page" []
                    (session/put! :current-page #'my-page))

アクセスしてみる

以上で、コンポーネント一式とそれを表示するページが完成しました。

http://localhost:3449/#/my-page

フォームに入力すると、その場で、内容が変わっていくのがわかると思います。

内部的にはDOMの監視とHTMLの書き換えを行っていると思いますが、コード的には「test-val」という変数を書き換えただけで画面の状態が変化しています。

反響などあれば、続編など書きます~

Read More

Shiftからのスピンアウト企画、自治体デザイントレンドが帰ってきます

2014/12/13に開催されたShift 8から、早1か月が経過しました。

デザイントレンドセッションでは、海外デザインのほかにグローバル企業や上場企業、地方自治体など定点観測サイト群のトレンドを紹介するコーナーがあります。

その中でも、全国で1700以上ある県市町村のサイトのトレンドを追い続けて早5年となる自治体のデザイントレンドは、異色なコーナーです。

アンケート結果などを見ると、この自治体コーナー、実は意外と人気があったりします。 決して派手ではないけど、味のあるコーナーとして楽しみにしている人も少なからずいると聞きます。

自治体デザイントレンドは2度目

以前、この自治体コーナーのみを取り出した自治体セッションをアップルストア銀座で行ったことがありました。

2012年11月15日(木)に行った、CSS Nite in Ginza, Vol.66「Webデザイントレンド(自治体編)」です。

同じく自治体サイトのリサーチを長年続けておられる有限会社ユニバーサルワークス代表取締役の清家順さんとのコンビでした。

いつものCSS Niteとはあまりに違う空気感となったため戸惑われた方もいたと思いますが、おおむね好評だったように記憶しています。この回のみのネタ的なセッションになるかと思われましたが、なんと今回復活します。

日時は2015年1月22日木曜日19:30から。 CPI x CSS Nite x 優クリエイト「After Dark」というイベントシリーズの第18回として行われます(すでに満員御礼とのことです。。)

もちろん、今回も前回と同様に清家順さんと一緒に登壇します。

CSS Nite Shift8では話せなかった自治体サイトのディープなトレンドについて、今までの流れも含つつ、僕と清家さんが持ち寄ったネタを交えてお話する予定です。

今回の目玉

個人的な今回の目玉としては、いつもデザイントレンドに使っているクローラ&キャプチャシステムにて、自治体のスマホ対応のキャプチャ機能を強化したことがあります。 これにより1700余りの自治体のスマホ対応の現状が明らかになってきました。

デザイントレンドといっても、内容は公共サイトということで、ビジュアルデザインに絞った内容ではなく、コンテンツ構成、アクセシビリティ、日本の幅広い風土など多角的な内容でお届けします。

最後に、こんな方に必見ですよっていうリストを挙げておきます。

  • 公共サイトに興味がある方
  • 不特定多数の幅広い人を対象に情報を発信することを考えている方
  • 世にいうところのクールデザインなサイト系以外のほうにも興味がある方
  • JRより国鉄が好きな方

最後の一つは冗談ですが、官ならではのデザインというものもある気がしていて、これは民には出せない味わいがあると考えています。

それでは、みなさん会場でお会いしましょう!!

Read More