統計的配色傾向コーナーもあるよ! Webデザイントレンド新潟は6/6開催

追加ネタを用意しての新潟参上です!

世界のサイト、上場企業3400社、地方自治体1700などの収集したキャプチャを分析して傾向をお伝えしているWebデザイントレンドですが、もう8年目。

このセッションは、僕の中のテクノロジー面、デザイナー面、メディア面の全てをクロスオーバーさせたコンテンツとして長年にわたって続けています。

今回は、新潟で行われる「CSS Nite in NIIGATA, Vol.4 w/新潟グラム

にて「Webデザイントレンド:キャプチャで振り返る2014ー2015年の潮流」としてお届けします。

新潟県内にお住みの方、隣接県にお住いの方、今回はおすすめなので是非来てください。損はしません。

どんな追加ネタかというと…

さて、今回のWebデザイントレンド、自動クロールを続けている定点観測キャプチャを中心とした解説をこれまで通りやるのですが、加えて追加ネタとして用意中のものがあります。

これまで貯めた膨大なキャプチャは、すでになかなかのビックデータとなっており、新しいキャプチャから傾向を分析するだけでなく、貯めてあるものからどう情報を引き出すかということも大事と思う今日この頃です。

今回は、そんなアーカイブの色の傾向についても調査してみることにしました。

解析を独自に構築しているJava/Clojureを使ってシステマチックに分析し、それらアウトプットについて思索を続けています。

例えば、地方自治体で2014年に使われた色ってどんな傾向があったんだろう?

全体を見ていない人は「各自治体ごとにそれぞれ自治体の色があるから見ても無駄なんじゃ?」と思ってしまうかもしれません。

でも永く見てきていると、意外とそうでもなかったりということがわかってきます。

同時期にまったく正反対の色に変化するサイトはいくつもありますし、それらが意外と似通っていたりもします。

こういうのは見てみないと見えてきません。そこから何かが見えてくるのか、見えてこないのか。わくわくしますね。

5年前からの変化は? 流行色との近似は?

5年前からの配色、面積の変化はどうだったかなんて、たぶん今となってはなかなか産み出せる情報ではないと思います。

色の情報は、頻度などの情報と共にデータベースに格納してはいますが、いろいろとやってみたい分析があり、まだ絶賛研究中です。

だから僕自身も楽しみ。

デザイントレンド久々の単独セッションだったり

ここ数年は、誰かとタッグを組んでデザイントレンドを行うことが増えましたが、初期は僕のみで講演していました。

個性豊かなゲストがいないので、当然幅は減りますが、僕ならではのこだわり情報の深度は増えると思うので乞うご期待!!

今回、「これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装」でおなじみ、まぼろしの松田 直樹さんのセッションもあり、こちらも期待です!!

開催情報

  • 日時 : 2015年6月6日(土)13:30-18:00(開場13:00) (終演時間は変更の可能性アリ)
  • 場所 : 朱鷺メッセ 中会議室 301 (新潟県新潟市中央区万代島6-1)
  • ハッシュタグは #cssnite_niigata4
  • 申し込み : http://cssnite.jp/niigata/vol04/
Read More

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

2014年の振り返り的な一人レトロスペクティブ

2014年も、もうすぐ終わるので、一人レトロスペクティブをはじめようと思います。

印象に残っているやったこと

1月

  • Play framework 2 徹底入門発売
    • サポートサイトを作るものの、ちゃんと運用しなかったのでまじでアカン。猛省。
  • 2013/01からはじめたPlayの仕事が丸1周年を迎える。Playを中心にAPIの設計からWEBまでいろいろとこなす
  • Webデザイントレンド in 静岡出演。ゲストに清家順さん。膨大なキャプチャアーカイブから見えてくる、Webデザインの潮流・ビジュアル/UIトレンドと題して。
  • 今年の勉強するぜ言語はClojureにしようと決める

2月

3月

  • はじめての決算書類作成&提出。いろいろ考えた末に自分でやってみる方面でいったため、非常に大変な思いをした(がすごく勉強になった)

4月

  • Webデザイントレンド in 大阪出演。ゲストは、深沢 幸治郎さん。
    • このセッションは再演というわけではなく、再度全キャプチャを取得しなおしているため、2014年のその時点での最新版。新しい発見などもあった。
  • このころ、Playもくもく会を精力的に開催する。結局20回以上開催された
  • キャプチャシステムをPlay 1ベースからPlay 2ベースに再構築をはじめる。結局10月くらいまでかかった。。

5月

  • Play 2 meetup参加。「フロントエンドとバックエンドのビルド構成について」というたぶん僕らしいテーマで話した。
    • パネルディスカッションでは、Play java代表(?)という立ち位置で参戦することに。ネタ的なトークをした。

6月

  • メインPCを、Macbook Pro 15インチRetinaから、Thinkpad x240sへ切り替える。あらゆることをWindowsにシフトチェンジした。
  • 先端味見部にてSwiftをいろいろと試す。
    • Swiftは、Scalaに似てるかもと感じた。Xcodeがすぐおちた。

7月

  • 古い仲間の結婚式があり、めでたやとなる。

8月

  • pyhack 夏山合宿に参加
    • Pythonをほとんどやらないにもかかわらず、この会には毎回参加している。知らない世界なので、聞きなれないことや知らないことが多く、それゆえ勉強になりおいしい。
    • バーベキューうまかった
    • 近所のおばあさんに人生に関するアドバイス的なものをうける
  • このころは、仕事でPlay三昧な日々を送り、私生活でもPlayでキャプチャ&クローラシステムのリニューアルをし、趣味ではClojureに打ち込むという印象しかない。。

9月

  • Scala Matsuri(Scalaのカンファレンス)にグレーティブとして去年に続きスポンサーとして参加
    • 大いに刺激をうける、いつもお世話になっている言語のイベントにスポンサードするのは貢献の一つとしてありだと思ってる。
  • エンプラなCMSをやってたけど独立してWordPressをやってみたというイベントに参加
    • これくらい包括的なCMSの話題を展開してのWordPressの評価みたいなセッションは今までにないのでほんとみんな聞くべきと思った

10月

  • このころ、Play 2化が終わる。Play 2.3.4でリリースし、安定のクローリング&キャプチャシステムとなった。AWSのEC 2とRDS全開なかんじ。
  • サバゲーに参加してみる
    • つかれた…
  • ひたすらサイトリサーチをする日々

11月

  • ひたすらサイトリサーチをする日々
  • 決算準備として、年末調整の説明会や決算説明会などに赴く
  • Clojureをつかったいくつかのコードを実装する
  • Sublime TextからEmacsへの移行を試みた(現在継続中)

12月

  • グレーティブの第2期が終わり、第3期のはじまり
  • Shift 8出演
  • 約2年続けたPlay 2の仕事が一旦終わり
    • 就職していたわけじゃないから退職っていうわけじゃないけど、これくらい一つの案件にぎっしりというケースは個人的にはあまりなく。1月からは全然違う系の仕事をするです。
    • スクラムマスターも終わり
  • Playアドベントカレンダー、あまり盛り上がらず申し訳ないです。

SSC – Start, Stop, Continue

ぐだぐだ書いてもあれなので、3つずつ

Start

  • もう少し法人としての体制を整える(人増やすとかそういう系ではなく、内部実務的に結構ぐだぐだ感あるので)
  • 新しいプロジェクトに参加予定。Clojureつかうかもです。
  • Design Wedge

Stop

  • 紙書籍の購入(最近はKindleにない本のみしか紙の本は買わなくなりつつあるので。こういう方向が進んでいった先にあるものが豊かさなのかそうでないのかを知りたい)
  • iPhoneの利用(Androidかfirefox phoneとかに)
  • Playもくもく会(ちょっと最近できていないし、一旦とめようかと)

Continue

  • ライフワークのデザインクロール&キャプチャ
  • Clojureの学習の継続
  • play-clojureという模索 : 十分に稼働実績があるPlayの仕組みを有効活用できないものかと
Read More