今年一番HITしたツールは「Google Docs」

AWAC

みなさんこんにちは。
去年に引き続き、Aomori Web AdventCalendar 2013が開始されました。
初日はCalmTechさんによる今年一番ヒットだったツールは「TaskPaper」でした。

本日は２日目のエントリとなります。

個人的にはSublimeText3に恋をしたという話題もあるのでですが、
今回は仕事を進める上でGoogle Docsが大変役立ったのでその活用方法についてご紹介したいと思います。
Google Docsを利用するにはGoogleDriveを利用します。


会議アジェンダ、議事録の校正と共有

　会議のアジェンダや議事録など、メールやSkypeで共有するのは面倒ですよね。
　送るまではよいですが、「あの議事録どこいったっけ？」となります。

　百歩譲って社内NASやDropbox、GoogleDriveなどで共有するのもいいかもしれませんが、
　複数人で編集する際は、ファイルの編集がコンフリクト(競合)することもあり、
　「編集しますねー」と一声かける必要が出てきたりします。

　そういうときはGoogle Docsの「文書」を使いましょう。

Google Docsでの文書共有の利点

ブラウザで編集可能

OSを問わずブラウザで編集可能。MS Officeで文書を作ると同ソフトを持っていない人は編集できません。
それに専用のワードソフトって起動に多少の時間がかかりません？

リアルタイムに変更を共有

同じ文書を２人以上のユーザで編集しているとリアルタイムで変更がされます。
弊社の青森事務所は、宮城県石巻本社と330kmほど離れているため、アジェンダを作成する際に、
上司とハングアウト(GoogleのWeb通話)しながら議題の作成を行います。
ちなみに編集履歴も残ります。

特定の人にだけ共有

これはGoogleDocsというよりはGoogleDriveの活用方法なのですが、例えば、アジェンダや議事録は他部門や顧客にも公開する必要があったりします。
アジェンダや議事録を纏めたフォルダを作成し、そのフォルダの共有設定で他部門や顧客を追加すれば、追加した人も共有に参加できるようになります。

Google Docsが苦手とするところ

ワードで作るDTP文書や、整った体裁の資料を作成するなど、きめ細かい体裁を整えるのには不向きです。
体裁を気にする必要のないメモ程度な文書の編集、共有などに威力を発揮します。

その他のドキュメント

プレゼンテーション

シンプルなプレゼンテーションは大体これで作成可能です。力の入ったプレゼンテーションはPowerPointなり、keynoteを使うので
あまり出番はなさそうですが・・・。

スプレッドシート

TODO管理や課題共有などに利用できます。

フォーム

忘・新年会の参加可否、アンケートなどに利用できます。

図形描画

共同作業でワークフローチャートなどの作成ができたりします。

GoogleDriveを活用されている企業は少なくないと思うのですが、GoogleDocsも合わせて使うと更に業務効率がUPするかと思います。
よいGoogleライフを！

３日目は齋藤　亨さんの「今年一番ヒットだったツールは「竹尾紙見本帖」」です。
乞うご期待！

TideSDKで日本語インストーラ(Windows)を作る際のメモ書き

TideSDK

TideSDKは、HTML5+CSS+Javascriptでネイティブなデスクトップアプリケーションを作れる開発キットです。(元々のTitanium Desktop)
サンプルコードを見た感じだと、Titanium mobileよりもWebアプリチックに作れるみたいですね。

特徴

と、ほとんどWebアプリ開発と遜色ないと思うほど。
これからいじってみるけど、結構楽しそうではあるし、スマホアプリほど面倒くさくなさそうwww

とりあえずスタートアップ

スタートアップはこちらを参考にしました。

インストーラを作る

TideSDK Developerの「Test & Package」タブから「Package with Runtime」もしくは「Package without Runtime」でインストーラが作れます。
両者の違いは、Runtimeがバンドルされるかされないかの違いで、「Package without Runtime」はランタイムをネットワークインストールする形式になるようです。
ただし、ネットワークインストールは現段階ではサポートしていないとのこと。
https://github.com/TideSDK/TideSDK/issues/74

と、いうわけでバンドルタイプのインストーラを作ってみようと思ったのですが、Windowsの場合は面倒くさいというか、pythonのビルドコード読まないと無理www 蓋あけてみたら大したことはやっていないけど、忘れそうなのでメモしておく。

必要なソフトウェア

TideSDKのチュートリアルにも書いていますが、Windowsでインストーラを作るには別途ソフトウェアが必要になります。

Wixは3.7でも大丈夫でした。Imagemagickは使用OSに合わせてインスコしましょう。

Wixのインストールディレクトリを修正

C:\ProgramData\TideSDK\sdk\win32\1.3.1-beta\win32_app.py(191行目から)
Wixのインストールディレクトリをインストールしたディレクトリ名に修正してください。

def get_wix_bin_directory(self):
        path = p.join("C:\\", "Program Files", "WiX Toolset v3.7", "bin")
        if not p.exists(path):
            path = p.join("C:\\", "Program Files (x86)", "WiX Toolset v3.7", "bin")
        if not p.exists(path):
            raise Exception('Could not find WiX v3 bin directory')
        return path

これでひとまずは英語版のインストーラが作成できるようになります。

インストーラの日本語化

tiapp.xmlに言語を指定

tiapp.xmlにja-jpを追加します。

<?xml version='1.0' encoding='UTF-8'?>
<ti:app xmlns:ti='http://ti.appcelerator.org'>
<!-- These values are edited/maintained by TideSDK Developer -->
<id>msitest</id>
<name>msi-test</name>
<language>ja-jp</language>
<version>1.0.0.0</version>
<publisher>SASAKI</publisher>
<url>www.hoge.com</url>
<icon>default_app_logo.png</icon>
<copyright>2013 by SASAKI</copyright>
<!-- Window Definition - these values can be edited -->
<window>
<id>initial</id>
<title>msi-test</title>
<url>app://index.html</url>
<width>700</width>
<max-width>3000</max-width>
<min-width>0</min-width>
<height>500</height>
<max-height>3000</max-height>
<min-height>0</min-height>
<fullscreen>false</fullscreen>
<resizable>true</resizable>
<chrome scrollbars="true">true</chrome>
<maximizable>true</maximizable>
<minimizable>true</minimizable>
<closeable>true</closeable>
</window>
</ti:app>

ビルド時にカルチャー属性(-cultures:)を指定

C:\ProgramData\TideSDK\sdk\win32\1.3.1-beta\win32_app.py(181行目から)

            self.env.run([
                p.join(wix_bin_dir, 'light.exe'),
                '-ext', ' WixUIExtension',
                '-cultures:' + self.language, <--ココ
                '-out', '%s' % target,
                '%s.wixobj' % wxs_path
            ])

ビルドするとインストーラが日本語化されているのが確認できます。

Mac OS Xの場合は何も考えなくてもdmgファイル作ってくれますた。
Linuxは未確認。

モジュール分割の利点とスケルトンのリファクタリング

FuelPHP

FuelPHP Advent Calendar 2012 ４日目担当の@sa2yasuです。

昨日は@mikakane_infoさんの「FuelPHPのモジュール開発」でした。

今日はモジュール分割の話と
oilコマンドで作られるスケルトンコードに不満があったので、それを解消するFuelTaskを作った話になります。

モジュール化のメリット

　ここに書いてある通りなのですが、

モジュールとは、独立した MVC 要素のグループのことです。モジュールを使うと、コードを再利用しカプセル化することが可能になります。
モジュールは、通常、アプリケーションディレクトリの下の modules ディレクトリに置かれます。
結構な量のコードをもつ大きなプロジェクトを動かしている場合、 モジュールを使ってみてはいかがでしょうか。
モジュールは、物事をきちんと秩序立てて整理する助けになるでしょう。

例えばブログモジュールやアルバムモジュールのように、モジュールは独立して動作させることが可能です。
グローバルなコードに対するいかなるアクセスも行わず、モジュールのコントローラに対して直接ルーティングすることが出来ます。
モジュールは、純粋な HMVC コンテクストの中で使うことも出来ます。その場合、
ページ生成に必要な諸結果 (の一部) を得るために、コントローラは別のコントローラを呼び出すことが出来ます。

上記から考察するモジュール化のメリットは

  1. 独立したモジュールは再利用が可能
  2. 多人数での平行開発が容易(モジュール毎のチーム編成が可能)
  3. モジュール毎にディレクトリが分かれるので開発、保守性向上

と考えています。

実際のところ、つい先日までFuelPHPを用いて実案件でCMS構築をしていたのですが、コンテンツ部分はfuel/app/classesに、管理部分をモジュール化することでコードの見通しがよくなりました。
最初からfuel/app下に何もかも実装してしまうと後からモジュール分割する際にリファクタリングが大変だと思うので、開発初期の段階でサブシステムのイメージが決まっているなら、最初からモジュール化を検討する方がよいのかもしれません。

oilコマンドで生成されるスケルトンコードへの不満

これは僕のやり方なのかもしれませんが、FuelPHPで開発する時は、初めにモデル設計やURI設計をざっくりメモ書きして、
oilコマンドでひたすらコードスケルトンを生成、設計通りにルーティング、リレーションされるかどうかを確認してから細部の実装に取り掛かります。
ですが、現在のoilコマンドはmodulesディレクトリ以下にスケルトンコードを生成できるように出来ていないんですね(泣
ちなみにバージョン2.0ではmodule指定に対応するようです。
Make Scaffold support Modules ［Feature］

スケルトンコードをmodules下にリファクタリングするTask

ということでoilコマンドで生成されるスケルトンコードへの不満を解消するFuelTaskを作ってみました。
やっていることは単純で、対象のパスのソースをmodules下にコピーしてnamespaceをつけたり、置換しているだけです。

インストール

https://github.com/ya-sasaki/fuel-module-refactor
git cloneでもzip展開でも良いのですが、使うのはmodule_refactor.phpのみですので、これをfuel/app/tasksに置いてください。

Scaffold生成

手っ取り早くScaffoldで例示しますね。

$ oil g scaffold sample_user user_id:varchar[10]
$ oil r migrate

http://localhost/sample/userにアクセスしてScaffoldが成功していることを確認

リファクタリングタスクの実行

以下のように実行できます。

$ oil r module_refactor <module_name> <type> <name> <delete>

第１引数はfuel/app/modules/です。
第２引数は"controller" or "model"です。指定した方をリファクタリングします。controllerを指定した場合は、あればですが、対象のapp/views, app/classes/viewもリファクタリングします。
第３引数はoil g したときのクラス名です。上記Scaffoldの例だと"sample_user"ですね。
第４引数はリファクタリング後にスケルトンコードを削除するかどうかを指定します。デフォルトはfalseです。

ScaffoldはMVC全部あるので以下のようにタスクを実行します。

$ oil r module_refactor test controller sample_user true
$ oil r module_refactor test model sample_user true

タスク実行後は、以前のURLはPage Not Found。http://localhost/test/sample/userでリファクタリングしたScaffoldを確認できます。

がっつりコード書いた後のTask実行は試してないですけど多分失敗します(笑)
一応READMEでは「oil g・・・」直後のTask実行を推奨していますのであしからず。
(module_refactor.phpの$replacesで置換文字列を定義しているので、ココを上手く設定してあげれば綺麗にリファクタリングできるかも)

<?php
・・・・省略・・・
    private static $replaces = array(
        'controller' => array(
            'Controller_Template' => '\Controller_Template',
            'View::' => '\View::',
            'ViewModel' => '\ViewModel',
            'Viewmodel' => '\Viewmodel',
            'Response::' => '\Response::',
            'Input::' => '\Input::',
            'Session::' => '\Session::',
        ),
        'model' => array(
            'use Orm\Model;' => 'use \Orm\Model;',
            'Validation' => '\Validation',
        ),
        'view_model' => array(
            'Viewmodel' => '\Viewmodel',
            'ViewModel' => '\ViewModel',
        ),
        'views' => array(

        ),
    );

参考URL

http://d.hatena.ne.jp/dix3/20111212/1323660316
http://press.nekoget.com/fuelphp_doc/general/modules.html

明日は@redsnow_さんの「FuelPHPで日本人にやさしいformを作る」です。
乞うご期待！

Aomori Web Advent Calendar 2012 2日目 - テキストエディタ「Vim」のご紹介

AWAC vim

本Advent Calendar言い出しっぺにして、CarmTech古川さんに根回しや事前準備をブン投げてしまった@sa2yasuでございませう。
募集からわずか３日足らずで、エントリ枠が埋まってしまい、正直驚きを隠せません。
多方面にお声がけしてくださった古川さん、ならびに本Advent Calendarに参加してくださった皆様に心より感謝致します。

ちなみに今日知ったのですが、実は2012年の待降節（アドベント）は今日かららしいです。
Wikipediaより引用

西方教会では[1]、教会の1年は待降節から始まる[2]。11月30日の「聖アンデレの日」に最も近い日曜日からクリスマスイブまでの約4週間で、最も早い年で11月27日、遅い年でも12月3日に始まる。

知らなかったー。毎年12月1日から始まるもんだと思ってましたが、日本では12月1日から慣行されてるようですし、気にせずいきましょう！

昨日はCarmTech 古川勝也さんの「今年1番ヒットだったツールは GRID-IT for MacBook Air 13inch」でした。

２日目を担当する僕の今年一番のフェイバリットツールはテキストエディタ「Vim」です。

テキストエディタはプログラマやフロントエンジニアにとっては手足のようなもので、各々お気に入りのものがあるかと存じますが、僕は「Vim」という一部の間では使っているだけで変態扱いされるエディタを今年から利用しています。

この「Vim」ですが、初めて触った人には簡単なテキストさえ入力できないという変態っぷりです。
僕も最初はなんじゃこりゃ！？と思いました。でもそれが普通の人の感覚です。
心配しないでください。慣れればすごいことになります。

何が良いの？と聞かれると実は文面で説明するにはもの凄く難しいのですが、とても分かり易い動画を見つけましたのでご紹介致します。
少し長いですが、6分ぐらいからライブコーディングが始まるのでそのあたりからご覧になられることをお勧めします。

「コーディングを3倍速くする！ Vim入門」

動画を見る時間がないという人のためにポイントだけ書いておきます。

４種類のモード

これが一番のVimの特徴です。

  1. 挿入モード・・・文字を入力するモード(普通のエディタは常にこのモードです)
  2. ノーマルモード・・・基本的な操作に関するモード(カーソル移動とか)
  3. ビジュアルモード・・・選択モード。他のエディタでいうところのShift + →←↑↓のような操作
  4. コマンドモード・・・文字列置換を行ったり、設定を変更する際のモード
キーボードから手を離さない

普通のエディタはマウス操作と組み合わせるのが普通ですが、Vimはマウス操作を必要としません。
矢印キー（→←↑↓)さえも使いません。指は常にキーボードのホームポジション上に置きます。
その結果、ホームポジションから手が離れないので入力がとても高速になります。
(ホームポジション⇔AllowKey, ホームポジション⇔マウスの移動における余計な手の動きにかかる時間を短縮できる)

テキストオブジェクトが超便利

Vimでは文字列を一つのオブジェクトをみなすことができます。
例えば以下のようなタグの中を編集するとき、普通のエディタだとDELETEを8回押すかマウスでShift選択してからDELETEするとかしますが、
VIMの場合はノーマルモードで"cit"とタイプするだけです。

<tag>ココを編集したい</tag> ・・・　citとタイプ ・・・　<tag>*</tag>
"ココを編集したい"　　　　　・・・  ci"とタイプ ・・・　"*"
※*(アスタリスク)はコマンド入力後のカーソル位置
Vim病

Vimで入力することが快感になってきたタイミングで発症します。
具体的な症状としては、普通のエディタで

  • ESCを押してノーマルモードに移行しようとする
  • hjkl(←↓↑→)で移動しようとしてhjklをタイプしてしまう

などが挙げられます。

非常に癖のあるエディタでプログラマに愛用されるケースが多いですが、CSS Niteでも紹介されているぐらいですので
HTMLしか書かないって人もコーディングの効率が上がると思いますよー

「僕のVim」

インストール直後の状態でもそこそこ使えるエディタなのですが、拡張性が高いので自分の使い方に合わせてカスタマイズするのが一般的です。
以下、「僕のVim」のキャプチャです。

エクスプローラや簡単なコマンドライン操作は全てエディタ上でマウスを使わずに行うことができます。
また、背景を透過させたり、カラースキーマ、フォントなども好みのものに変えています。
エディタに向かうのが楽しくなっちゃいますね。

Vimを育てる

Vimには便利な操作やプラグインが無数にあり、ちょっとずつ覚えたり導入したりしながら自分色にカスタマイズしていきます。
カスタマイズにはvimrcという設定ファイルを用いるのですが、これが愛情を込めて継ぎ足しを重ねた秘伝のタレのようなもので、
GitHubなどのバージョン管理システムで大切に保管されることをお勧めします。
設定ファイルを更新するとしっかり履歴も残りますので、成長記録として後から見返して思い出に浸るのも悪くないかもしれません。

使ってみたい人いますか？

オススメできるエディタなのですが、慣れるまで時間がかかるので実はそんなにオススメできないとか（どっちだー
幸いネットにはこれでもかというほど沢山情報がありますので独学で始められてもよいですし、希望があれば青森市近辺でハンズオン形式の勉強会(GitHubの初歩もついでに教えちゃいます)も考えています。
僕もまだまだ未熟者ですけど「脱初心者」まではサポートできるので気軽にコンタクトしてくださっていいですよー

Aomori Web Advent Calendar 2012 3日目の担当者は齋藤　亨さんです。
宜しくお願いしまーす

JSLintギザ厳シス

JavaScript

昨日、JSLint入れてみたものチェック厳しすぎるわエラーよくわからないわハイライト見辛すぎるわで泣けたので違う方法でやってみた。

こっちを採用

~/.vim/.vimrc.bundle

" JSLint
NeoBundle 'git://github.com/vim-scripts/lint.vim.git'
" Better Javascript Indent
NeoBundle 'git://github.com/pangloss/vim-javascript.git'

JQueryのインデントがアレなのを解消するにはBetter Javascript Indentationがいいらしい。

Google Chromeで使われているV8エンジンが必要なのでGitからソースコード落としてきてMakeする

$ git clone git://github.com/v8/v8.git v8
$ cd v8
$ make dependencies
$ make native
$ sudo cp out/native/d8 /usr/local/bin
$ cd ..
$ rm -rf v8

これでおk。
勉強は明日から。。。といってもprototypeまでは今日の昼休みで大体おさらいできたので
クロージャ、Curry化、部分適用とかFunctionalな方面を中心に攻めていく。

そうだ！Javascriptを勉強しよう

JavaScript

今思うと仕事の大半がNexawebとか各種RIA製品使ったアプリケーション開発だけだったので、Javascript力が低いことに今更気がついた。
なのでしばらくはJavaScriptを勉強しなおすことにする。
TitaniumMobileとかSenchaとかNodeとかjsx, enchantとか付け焼刃のJavascriptじゃ通用しなさそうだし。

参考書籍

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
随分前に電子書籍で購入したのを忘れていた。良書みたいよ

勉強する環境

普通はHTMLファイル上にスクリプト書いて動作確認すると思うんだけどエディタとブラウザ行き来するの面倒だなと。。。
(コマンドラインからスクリプトを実行したい)
ふと、思い出したのがJVM上で動くJavaScriptインタプリタの「Rhino」(らいのー)を思い出した。
調べてみるとJDK1.6から同包されていて、jrunscriptってコマンドラインで入力するとイケるらしい。
(Mac OSX Lionには最初からJDK入ってます)

対話形式の実行

$ jrunscript
js>println("Hello. Rhino");
Hello.Rhino

Javascript自体に標準出力の機能は無いのでJavaのSystem.out.printlnを使います。Rhino上だとprintlnに短縮可能。
基本的にJavaScriptから全てのJavaAPI(パス通せばサードパーティも)が使えるわけですが、今回はJavascriptの勉強なので使いません。

スクリプトを食わせる

$ jrunscript hello.js
Hello.Rhino

これができるならVimからQuickRun実行もできるんじゃねと思って試してみたら何もしなくてもできた(笑)
これでエディタから離れずにJavaScriptのお勉強ができますね。

追記

jslint.vim入れてみたらちゃんと動かなかったのでnode.jsインストールして解決しました。

$ brew install node

構文チェックするvimスクリプト

" Javascript Lint
autocmd FileType javascript :nmap ,l :call JavaScriptLint()<CR>
function JavaScriptLint()
  autocmd BufLeave     &lt;buffer&gt; call jslint#clear()  
  autocmd BufWritePost &lt;buffer&gt; call jslint#check()  
  autocmd CursorMoved  &lt;buffer&gt; call jslint#message()
endfunction

テキストオブジェクト覚え書き

vim

vim使い初めて10ヶ月ぐらい経つけど（というか本気で使い始めたのはMacBook買った6月から)、テキストオブジェクトがあまりにも活用できてないことに気づいた。
(それでもIDEで開発してた時に比べると集中力とか効率とかは格段に上がってますが)
なのでsurround.vimも含めて基本をきっちり押さえておくことにする。

標準コマンド

例えばdi"はカーソルが置いてあるテキストの"(ダブルクォーテーション)の中(iはinner?)を削除(d)する。
同範囲を選択するにはdをvに、挿入モードで書き換えるならdをcにしてやる。
以上を踏まえ、操作の種類に関するポイントは以下の３つ。

  1. 削除する場合はd(delete)から
  2. 選択する場合はv(visual)から
  3. テキストを変更する場合はc(change)から

と覚える。

続いて範囲。

  1. ○○を含めて選択する場合はa(all)
  2. ○○の内側を選択する場合はi(inner)

で最後は対象となる○○を指定する。

  1. <h1>ココ</h1>タグのtextノードならt(tag?)
  2. <ココ>タグ自体なら<,>のどっちか
  3. その他、"とか'とか(とか囲まれているものならなんでも

上記踏まえて<操作>(d:delete, v:visual, c:change)<範囲>(a:all, i:inner)<対象>(t, ", ', (, {, [, %, ?)
で覚えればよさそう。

surround.vim

標準コマンドだと「既に囲まれているもの」を対象としますが、surround.vimを使うと「新たにテキストを囲む」「テキストを囲んでいる文字を置き換える」ということができるようになります。

新しく囲む

対象の範囲を新しく囲む場合はysから始めます。(なんでysなのかはよくわかっていない)
例）

置換え前　置換え後　　　コマンド
'hoge' -> ('hoge')　・・・ysa')  #ys a'('を含む範囲を)(で
'hoge' -> '(hoge)'　・・・ysi')   #ys i'('の中を) (で
hoge  ->  (hoge)    ・・・yss)   #ys s(囲む) (で
囲み文字を置き換える

囲み文字を置き換える場合はcs(多分change surround)から始めます。

置換え前　置換え後　　　コマンド
'hoge' ->  "hoge"　・・・cs'"  #cs(囲みを変える)'を"に
囲み文字を削除

囲み文字を削除する場合はdsから始めます。

置換え前　置換え後　　　コマンド
'hoge' ->  hoge　・・・ds'  #ds(囲みを削除) 'を

多分このあたりが基本かな。
挿入モード、ビジュアルモードの時のsurroundはキーバインド衝突してるのか上手く動かずよくわかっていない。

次買う書籍は「Vimテクニックバイブル」だな。