User Interface Markup Languageの提案 -HTMLを拡張してUI構築に適したマークアップ言語を作ろうぜ-

HTML + CSS + JavaScriptでUIの構築をするのはもはや一般的である.FirefoxOS,Windows8(のモダンUI),Ubuntu TouchなどHTML + CSS + JavaScriptをデフォルトのUIツールキットとして用いるOSは多い.ネイティブのUIを持つのはAndroidiOSくらいなので逆に少数派と言えなくもない.

HTML5とCSS3の表現力はネイティブUIを超えている.ネイティブUIの優位性はゲームや3Dなどに限られる.にも関わらずwebベースのUIはネイティブUIに比べ,一段劣るものとして扱われている現状がある.

問題はHTMLのほうにある.現状のHTMLはその名のとおりHyperTextを構築するためのマークアップ言語である.HyperTextは紙メディアを模したもの.紙が動かないからといって腹を立てるのは酷だろう.

現状のHTMLはUIの構築に適しているとはとても言えない.たとえばナビゲーションバーなどはあって当たり前,ないほうが珍しいくらいなのにHTMLにはそんなタグは用意されていない.

しかしTyperTextの出自を考えるにそんなタグを付ける方が間違っているだろう.そこでHTMLをメタ的に拡張*し,UIの構築に適したマークアップラングエッジを提案する.

*メタ的に拡張とはHTMLをJavaScriptを使って拡張するという意味.具体的にはangularjsのdirectiveなどを使ってHTMLを拡張する.これによって通常のHTMLレンダリングエンジンとJavaScriptの実行環境で実行が可能になる.要はObjective-CとCみたいなもん.

railsにおけるデータベース間のリレーション

railsでデータベースのリレーションはMODEL.rbファイルに記述する. 1対1の場合所有しているモデルにhas_one,所属しているモデルにbelongs_toを設定する.設定するときは最初の一文字を小文字にする.

リレーションの設定が完了したらコントローラ内でデータを呼び出すことができる.

例) Userのカラム

id, name

Profileのカラム

id, user_id, description

Userのリレーション

class User < ActiveRecords :: Base
  has_one :profile # profileを所有している
end

Profileのリレーション

class Profile < ActiveRecords :: Base
  belongs_to :user # userに所属している.
end

Settingleton (Setting + Singleton)

あまりデザインパターンにこだわるほうではないけど一つ多用しているパターンがある.

それはシングルトンパターン.

どう使うかというと設定値を保存しておくクラスをシングルトンにしておき,アプリの起動時にsqliteとかからロード,終了時に保存するというもの.

本を読んで知ったとかではなく楽な実装を求めて試行錯誤の結果自然に使うようになったので編み出したに近い.

Setting + SingletonでSettingletonと呼んでるけどなんか正式な呼び名がありそうな気もするし実は超高コストなパターンとかありそうだけどその辺どうなんだろう?

Socialフレームワーク

SocialフレームワークとはiOSにビルドインされたFacebookTwitter連携機能. jsonをやり取りするので非同期でないと処理がハングアップする.

if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeFacebook]) {
  SLComposeViewController *composeViewController = [SLComposeViewController      composeViewControllerForServiceType:SLServiceTypeFacebook];

  void (^completion) (SLComposeViewControllerResult result) = ^(SLComposeViewControllerResult result) {
    [composeViewController dismissViewControllerAnimated:YES completion:nil];
  };
  [composeViewController setCompletionHandler:completion];
  [composeViewController setInitialText:@"Initial text."];
  [composeViewController addURL:[NSURL URLWithString:@"http://www.j7lg.com/"]];
  [composeViewController addImage:[UIImage imageNamed:@"Default.png"]];
  [self presentViewController:composeViewController animated:YES completion:nil];
}

上記コードのSLServiceTypeFacebookをSLServiceTypeTwitterに変更すればTwitterを使うことが出来る.

IntelliJ IDEAでPhoneGapアプリを開発するためのプラグインを作りました.

IntelliJ IDEAでPhoneGapアプリを開発するためのプラグインを作りました.

これによりIntelliJの強力なコード補完やLiveEditをPhoneGapアプリ開発に利用出来るようになります.

開発はGithub上で進めて行きます. フィードバックとPull Requestお願います.新機能のリクエスト特に歓迎です.

http://plugins.jetbrains.com/plugin/7436?pr=idea http://github.com/masahirosuzuka/phonegap-intellij-plugin

使い方 (0)PhoneGapIntelliJPluginをインストール Preferance -> PluginsからPhoneGapと検索してください.IntelliJの再起動が必要です.

(1)PhoneGapをインストール Node.jsを使ってインストールする必要があります.Nodeのインストール方法は特に指定しませんがnvmをお勧めします.

npm install -g phonegap

(2)Android SDKをインストール AndroidSDKをインストールし,PATHを通しておいてください.

(3)PhoneGapプロジェクトを作成

phonegap create my-app

(4)PhoneGapアプリをIntelliJにインポート コードジェネレータ及びオートインポータは開発中です.手動でのインポートが必要になります.

File -> Import Project -> PhoneGapプロジェクトのルートディレクトリを指定 -> Create project from existing sources -> Finish

File -> Project Structure -> Modules -> Moduleを追加 -> Name : www Content root : PhoneGapプロジェクトのルート/www

必要であればhooks, mergers, platforms, pluginsも同様にインポートしてください.pluginsはインポートしておいた方が便利かもしれません.

(5)エミュレータ起動 Edit ConfigurationにPhoneGapが追加されているはずです.新規Configurationを作成し,実行してください.