Tech Talk Blog

2012年02月07日

パーティーや合コンのお供に、Movable Type

こんにちわ、Movable Type 開発担当のたかやまです。
本日は、パーティーや合コン役立つMovable Typeというテーマです。

シックス・アパートでは、年内最終営業日には、夕方くらいから納会という名のパーティーを行っています。（当日の模様はこちら）
その時に活躍するのが特殊プロジェクトチーム「忘年会・納会：ゲーム大会実行委員会」です。
忘年会におけるゲーム大会実行委員会は、司会業と裏方業に専念しています。しかし、納会は自分たちでゲームの企画から考えて実行しているのです。

続きを読む "パーティーや合コンのお供に、Movable Type"...

  • 投稿者 Yuji Takayama
  • 15:20

2012年01月23日

CoffeeScriptとスコープ

こんにちは。MTエンジニアチームの澤田です。
PSVitaが発売されましたね。うっかり発売日にゲームショップに足を運んだら、うっかり在庫があったのでうっかり買ってしまいました。今は「かまいたちの夜」シリーズの最新作「真かまいたちの夜」に夢中です。

「かまいたちの夜」シリーズはサウンドノベルと呼ばれるゲームの代表的な作品です。サウンドノベルは基本的には画面で読む小説といった趣なのですが、時々主人公の行動を決める選択肢が登場し、その選択によって物語の展開や結末が大きく変わってしまうのが特徴です。正しい選択肢を選んで主人公が幸せになるような結末を迎えることがゲームの目的となります。

「かまいたちの夜」シリーズは特に物語展開の幅広さと緻密なフラグ管理が特徴で、物語の序盤の一見どちらでも良いような選択が、最後の最後になって大きく展開を左右する場合があります。完全クリアを目指す場合、ずっと前に選んだ関係なさそうな選択肢まで含めて検討し、正しい選択を選び直すという、恐ろしく根気のいる作業が必要となります。まあそれが楽しいんですけどね。

「真かまいたちの夜」を買う前は、CoffeeScriptに夢中でした。先日社内の勉強会で、JavaScript The Good Partsを見習ってCoffeeScriptの好きなところ嫌いなところをあげていく、という内容のミニトークをしたのですが、その際に一番問題と思われたのが、変数の宣言とスコープでした。

続きを読む "CoffeeScriptとスコープ"...

2012年01月16日

検索評価やソーシャルメディアでシェアされるリンクのURLを統一するのに必要不可欠なcanonical属性とは

こんにちは。Zenbackのプロダクトマネージャーの壽（ことぶき）です。
普段はZenback 公式ブログや、@zenbackあたりで発信しているのですが、今回はちょこっと技術的なお話をさせていただきたくて Tech Talk Blog にお邪魔いたしました。

Zenback ってどんなサービス？　そしてどんな仕組み？

さて、Zenback。これは弊社が開発しているブログパーツです。 ブログの各記事の下の方に設置するだけで、記事へのソーシャルメディアでの反応をまとめて表示したり、逆にソーシャルメディアにポストするボタンを表示できます。この記事の一番下にも表示されてます。

これらの機能はどれも「記事ページのURL」がキーになっています。

「記事ページのURL」とひもづいているツイートやはてなブックマークの反応を集めてきて表示しますし、ツイートする／はてブする／mixiチェックする／Google+1する／Facebook いいねするなどの各種ポスト機能ではその記事のタイトルとURLを各サービスに投げています。

続きを読む "検索評価やソーシャルメディアでシェアされるリンクのURLを統一するのに必要不可欠なcanonical属性とは"...

  • 投稿者 kotobuki
  • 13:50

2012年01月06日

Lekumo キャンペーンビルダーと Javascript フレームーク「Closure Tools」

どうも、体にこびりついた脂肪と日々戦い続ける、Lekumo キャンペーンビルダー開発担当の間です。

Lekumo キャンペーンビルダーでは、管理画面における Javascript フレームークとして、Closure Tools を採用しています。今回は、この Closure Tools について少しお話をします。

Closure Tools は、

  • Closure Library
  • Closure Compiler
  • Closure Template

の3つと、そして最近リリースされた

  • Closure Stylesheets

から成ります。

開発の基本は、Closure Library にて提供されている部品群を組み合わせてコーディングしていくことになります。開発は、Closure Library さえあれば進めて行くことができます。この為、Closure Library こそが Closure Tools の核と思われそうですが、実は Closure Compiler 無しでは、Closure Library は成り立たないと言っても過言ではありません。

というのも、Closure Library で提供されている部品群はあらゆる用途に対応する為膨大であり、実際には使用しないものまで大量に含まれていたりします。例を挙げると、Lekumo キャンペーンビルダーには「ソーシャルメディア統計」という画面がありますが、この画面では、日付の選択に goog.ui.InputDatePicker という UI を使用しています。

lcb_sms_ui.png

この UI では国際化の為、goog.i18n.DateTimeSymbols というモジュールが必須になるのですが、この goog.i18n.DateTimeSymbols が曲者で、めちゃめちゃサイズがでかいのです。ざっと見ただけでも、

goog.provide('goog.i18n.DateTimeSymbols');
goog.provide('goog.i18n.DateTimeSymbols_ar');
goog.provide('goog.i18n.DateTimeSymbols_bg');
goog.provide('goog.i18n.DateTimeSymbols_bn');
goog.provide('goog.i18n.DateTimeSymbols_ca');
goog.provide('goog.i18n.DateTimeSymbols_cs');
goog.provide('goog.i18n.DateTimeSymbols_da');
goog.provide('goog.i18n.DateTimeSymbols_de');
goog.provide('goog.i18n.DateTimeSymbols_de_AT');
goog.provide('goog.i18n.DateTimeSymbols_de_CH');
goog.provide('goog.i18n.DateTimeSymbols_el');
goog.provide('goog.i18n.DateTimeSymbols_en');
goog.provide('goog.i18n.DateTimeSymbols_en_AU');
goog.provide('goog.i18n.DateTimeSymbols_en_GB');
goog.provide('goog.i18n.DateTimeSymbols_en_IE');
goog.provide('goog.i18n.DateTimeSymbols_en_IN');
goog.provide('goog.i18n.DateTimeSymbols_en_ISO');
goog.provide('goog.i18n.DateTimeSymbols_en_SG');
goog.provide('goog.i18n.DateTimeSymbols_en_US');
goog.provide('goog.i18n.DateTimeSymbols_en_ZA');
goog.provide('goog.i18n.DateTimeSymbols_es');
goog.provide('goog.i18n.DateTimeSymbols_et');
goog.provide('goog.i18n.DateTimeSymbols_eu');
goog.provide('goog.i18n.DateTimeSymbols_fa');
goog.provide('goog.i18n.DateTimeSymbols_fi');
goog.provide('goog.i18n.DateTimeSymbols_fil');
goog.provide('goog.i18n.DateTimeSymbols_fr');
goog.provide('goog.i18n.DateTimeSymbols_fr_CA');
goog.provide('goog.i18n.DateTimeSymbols_gl');
goog.provide('goog.i18n.DateTimeSymbols_gsw');
goog.provide('goog.i18n.DateTimeSymbols_gu');
goog.provide('goog.i18n.DateTimeSymbols_he');
goog.provide('goog.i18n.DateTimeSymbols_hi');
goog.provide('goog.i18n.DateTimeSymbols_hr');
goog.provide('goog.i18n.DateTimeSymbols_hu');
goog.provide('goog.i18n.DateTimeSymbols_id');
goog.provide('goog.i18n.DateTimeSymbols_in');
goog.provide('goog.i18n.DateTimeSymbols_is');
goog.provide('goog.i18n.DateTimeSymbols_it');
goog.provide('goog.i18n.DateTimeSymbols_iw');
goog.provide('goog.i18n.DateTimeSymbols_ja');
goog.provide('goog.i18n.DateTimeSymbols_kn');
goog.provide('goog.i18n.DateTimeSymbols_ko');
goog.provide('goog.i18n.DateTimeSymbols_ln');
goog.provide('goog.i18n.DateTimeSymbols_lt');
goog.provide('goog.i18n.DateTimeSymbols_lv');
goog.provide('goog.i18n.DateTimeSymbols_ml');
goog.provide('goog.i18n.DateTimeSymbols_mo');
goog.provide('goog.i18n.DateTimeSymbols_mr');
goog.provide('goog.i18n.DateTimeSymbols_ms');
goog.provide('goog.i18n.DateTimeSymbols_mt');
goog.provide('goog.i18n.DateTimeSymbols_nl');
goog.provide('goog.i18n.DateTimeSymbols_no');
goog.provide('goog.i18n.DateTimeSymbols_or');
goog.provide('goog.i18n.DateTimeSymbols_pl');
goog.provide('goog.i18n.DateTimeSymbols_pt');
goog.provide('goog.i18n.DateTimeSymbols_pt_BR');
goog.provide('goog.i18n.DateTimeSymbols_pt_PT');
goog.provide('goog.i18n.DateTimeSymbols_ro');
goog.provide('goog.i18n.DateTimeSymbols_ru');
goog.provide('goog.i18n.DateTimeSymbols_sk');
goog.provide('goog.i18n.DateTimeSymbols_sl');
goog.provide('goog.i18n.DateTimeSymbols_sq');
goog.provide('goog.i18n.DateTimeSymbols_sr');
goog.provide('goog.i18n.DateTimeSymbols_sv');
goog.provide('goog.i18n.DateTimeSymbols_ta');
goog.provide('goog.i18n.DateTimeSymbols_te');
goog.provide('goog.i18n.DateTimeSymbols_th');
goog.provide('goog.i18n.DateTimeSymbols_tl');
goog.provide('goog.i18n.DateTimeSymbols_tr');
goog.provide('goog.i18n.DateTimeSymbols_uk');
goog.provide('goog.i18n.DateTimeSymbols_ur');
goog.provide('goog.i18n.DateTimeSymbols_vi');
goog.provide('goog.i18n.DateTimeSymbols_zh');
goog.provide('goog.i18n.DateTimeSymbols_zh_CN');
goog.provide('goog.i18n.DateTimeSymbols_zh_HK');
goog.provide('goog.i18n.DateTimeSymbols_zh_TW');

と、これだけの数の言語がサポートされており、各言語の日付の名称やフォーマットがそれぞれ入っているわけです。この画面で必要となる Library を単純に Combine（結合）すると...

$ ls -l statistics.js
-rw-rw-r-- 1 shazama shazama 2343578 Nov 24 13:54 statistics.js

なんと、2MB を超える巨大なファイルになってしまいます。使いたいのは日本語の部分だけなのに使ってない言語までたんまり読み込まれてしまう為です。

これを解決してくれるのが、Closure Compiler です。Closure Compiler は、単にシンボルの短縮や不要な改行や空白を削除するだけでなく、不要な Function の削除までしてくれます。その為には、ADVANCED_OPTIMIZATIONS というオプション付きで Compile する必要があるのですが、Closure Library と Closure Compiler を組み合わせて使う場合、このオプションは必須だと思った方が良いです。コードの書き方に多少制約が出てきますが、その手間をかけるだけの価値はあります。

試しに、先ほどの JS ファイルを Compile してみます。Compile には、

python closurebuilder.py
--root=/closure/root
sixapart.app.Statistics
-o compiled
--output_file=/compiled/statistics.js
--compiler_jar=compiler.jar
-f "--compilation_level=ADVANCED_OPTIMIZATIONS"
-f "--define=goog.DEBUG=false"

というような呪文を唱えます。結果、

$ ls -l statistics.js
-rw-rw-r-- 1 shazama shazama 119306 Nov 22 16:41 statistics.js

単に Combine しただけでは 2MB だったものが、116KB、約20分の1になってしまいました。ここでは、中でも最も極端な例を挙げましたが、他の画面の Javascript ファイルについても顕著にサイズダウンしています。

ネットを検索してみると、ADVANCED_OPTIMIZATIONS には制約があるので、SIMPLE_OPTIMIZATIONS で Compile されているケースが見られます。しかし、SIMPLE_OPTIMIZATIONS では Closure Library の真価は発揮できません。Closure Library は ADVANCED_OPTIMIZATIONS で無駄をそぎ落とすことを前提に、あのような巨大なサイズになっていると考えられるからです。Closure Library は Closure Compiler を併せて使うならば、是非とも制約をクリアして ADVANCED_OPTIMIZATIONS で Compile するべきです。

ADVANCED_OPTIMIZATIONS におけるコーディングの制約については、以下の記事が参考になります。私も参考にさせて頂きました。

さて、上記で挙げた Closure Tools を構成する要素のうち、Library と Compiler には触れましたが Template と Stylesheets について触れていません。実はこの二つについては、私もまだあまり触っていません。いずれはここで何か書けるくらいには使ってみたいと思います。

2011年12月20日

Movable Typeの開発 続編（5年ぶり）

3年ぶりのこんにちわ、Movable Type 開発チームのたかやまです。

「Movable Type の開発」というタイトルで記事が公開されてから5年。あれから世の中も変化してオープンでソーシャルになってきました。Movable Type の開発もオープンでソーシャルな方向に変化しています。そこで、Tech Talk Blog 再開記念として、Movable Typeの開発チームの生態を改めてさらしてみようと思います。

現在、Movable Type の開発は日本国内にいるチームによって「製品企画」「開発」「QA」「営業・広報・マーケティング」が行われています。また、外部リソースとして、米国内のサポート業務と英語のチェックを行っているチームと、ヨーロッパ言語のローカライズを行うチームがいます。
国内の開発チームも日本人だけではなく、イスラエルからやってきたShmuel Fombergさんがいます。何気に国際色豊かな開発チームなのです。

Octocatさて、5年で変わったのは体制だけではありません。コードの管理方法も変わっています。
2010年までは、code.sixapart.com のSubversionを利用していましたが、2011年からは、Git を使うようにしました。併せてサーバーも github に移動しました。理由としては「流行っているし便利だから。」という点も大きいのですが、自社サーバ上でのSubversionでの公開よりもより多くのフィードバックが受けられるという点がメリットであると思ったからです。（Pull Requestやコミットのレビューをサイト上で行える事など）
PerlやPHP、JavaScriptを書ける方は 、機能要望やバグレポートをPull Requestで送って頂けると中の人が泣いて喜びます。

Jenkins Logo

今日のソフトウェア開発において自動化というのは欠かせない要素になっていると思います。Movable Type の開発においても色々な事を自動化していますが、そこで活躍中なのが Jenkins さんです。現在は、t/ のユニットテストをコミット時に実行したり、github レポジトリのバックアップ、ナイトリービルドの作成などを行っています。Jenkins 採用の決め手は、既存のcron ジョブやバッチファイルの実行監視も行える点でした。あ、ロゴの名執事っぽさも決め手です。

変わっていない部分もあります。たとえば、コミットログをIRC (#movabletype #movabletype-ja) に流したり、メーリングリストの運用などは当時と変わっていません。

こんなMovable Type 開発チームが生み出す Movable Type を今後ともよろしくお願いします。

  • 投稿者 Yuji Takayama
  • 11:00

このページのトップへ

Six Apart