投稿

12月, 2014の投稿を表示しています

今年のTitanium向けに書いた記事まとめとアプリ紹介2014版

イメージ
Titanium Advent Calendar 2014の22日目。今年自分が書いた記事のTitaniumに関するまとめ。まず今年の革命的だった発見が2つ。1つ目がアイコンフォント。各デバイスごとに大きさの違う画像を切り出していたのがなくなった。色違いや大きさが違う場合もコードで指定するだけでいい。メモリ効率もいいらしい。SE奮闘記: [Titanium] fontcustomをインストールしてアイコンフォントを作成2つ目がthisとparentの存在。これで無駄にグローバル領域やクロージャ(無名関数)を使わない書き方が出来るようになった。入れ子にならないのでコードが読みやすい。SE奮闘記:【Titanium】thisとparentとchildrenを使った書き方そして、これらを発見する前だけど今年の初めに作ったアプリを紹介。teniteoというママ向けのSNSサービスのクライアントアプリ。本家のアプリ(Android, iOS)とは別に実験的なアプリ。ゲストでも閲覧できるのと学園のイメージを取り入れてみた。teniteo学園(Android版)teniteo学園(iPhone版)
技術的な特徴Titanium SDK 3.2.0.GA iPhone, Androidで同じ見た目。ソースコードは分けてない。必要なときだけif文で分岐している。 Alloyは使ってない ListViewをかなり頑張っている サーバーはNode.jsでWordPressのデータベースに接続こんなListView。コメントもListViewを使ってる。PCで投稿されたコメントの中に表示できないバグがある。。。本当はもっと美少女ゲームっぽくしたかった。自分のデザインセンスのなさを痛感(キャラクターはデザイナーさんにお願いした)。ゲストでも閲覧だけなら使えるので試したい方はどうぞ。サーバーでこのアプリ向けには3つのプロセスしか待ち受けしてないので遅く感じるかも。来年は今作っているのも含めていくつかサービスを公開予定。Titanium的にはSocket.IOと連携したリアルタイム性を重視したアプリを作りたい。では、みなさん良いお年を。明日のTitanium Advent Calendarはcoeさんです。< Related Posts >TitaniumとWordPrssで…

開発中のTitanium SDKをInstallして試す

イメージ
今起きている現象が開発バージョンで直っているかインストールして試してみたときの覚書。環境: Mac OS X 10.10.1, Xcode 6.1.1, Titanium SDK 3.4.1.GA最新のダウンロード先の一覧は下記から。Appcelerator Continuous Buildsこの時点で最新の3.5.0 BETAをダウンロードしてインストール。コマンドで全部やってくれる。$ ti sdk install http://builds.appcelerator.com/mobile/3.5.0/mobilesdk-3.5.0.Beta-osx.zip確認してSDKの切り替え
$ ti sdk
$ ti sdk select 3.5.0.Beta切り替えた後はビルドする前にクリーンするのを忘れずに。
$ ti clean< Related Posts >[Titanium Mobile] SDKをSourceからBuildしてみるMac環境にAndroid SDKをInstall for Titanium Studio

TitaniumとWordPressで(比較的)簡単SNSアプリ

イメージ
Titanium Advent Calendar 2014の15日目。Titanium + WordPress + Node.jsの環境がうまくいっているので紹介。書いてる途中で簡単か?と思い直し「比較的」付けた(笑慣れると
WordPressで公開している → アプリ作りましょうか?
まずはアプリでサービス提供 → Web版も提供
が短期間で出来るようになる。長くなったのでポイントだけ。WordPressを使う理由データベースの構造がシンプルで汎用性がある
標準でユーザー管理、投稿、コメントなどの基本機能が揃ってる
テーマやプラグインで本体に手を加えずに開発出来るのもいい
アクション・フィルターの機能がNode.jsからキックするのに便利
重い処理や非同期処理したい場合はWP-CRONの仕組みが便利
情報が豊富
初心者でもWordPressは触った人が多いので教えなくて済む。
→ アプリ側を上級者で開発して、Web側は他人に振れる。
PHPフレームワークと比べて遅いけど、最近は負荷分散する仕組みが豊富なので許容範囲になる。
→ アプリのリクエストはNode.jsで処理するのでWordPress(PHP)の遅さは関係なくなる
Titaniumを使う理由一つのコードでAndroid, iOS両対応出来るのが強い
ネイティブとまでいかなくてもサクサク動く
最悪ネイティブモジュールを作れば何とかなる
Node.jsと組み合わせときの開発効率がうまい(全部JavaScript)
Node.jsを使う理由アプリからは同時に大量のリクエストが来るのでPHPでは捌き切れない
→ データベースはMySQLではなくスレッドプールが使えるMariaDBにする
TitaniumもJavaScript。CommonJSの考え方を理解してTitanium側のコード品質も上がっていく。
→ Titaniumで作った汎用関数がそのままNode.jsで使える
ちなみにWordPressは外部にAPIを提供しているので、アプリから直接WordPressにリクエストを送るだけでも大抵のことが出来る。XML-RPC WordPress API | WordPress CodexNode.jsのモジュールの中にはWordPressのXML-RPC APIに接続するのもある。wordpress-rest-api私は最初アプリ向けのA…

【Titanium】Alloy vs Classic

イメージ
2年前にAlloyを試してみたけど、未だにClassicな書き方をしている私。そろそろAlloyも成熟してきたころだと思い調査したときの覚書。環境:Titanium SDK 3.3.0.GA私がクラシックな書き方をしている理由(言い訳)を考えてみた。Alloyも結局クラシックなコードに変換している。だったら最初からクラシックな書き方でいいと思うWEB開発で複数言語(PHP, HTML, CSS, JavaScript)から開放されたと思ったのに、やっぱりXMLとかCSSっぽいのを書かないといけないの?CommonJSの考え方でサーバー側(NodeJS)とクライアント側(Titanium)をJavaScriptで書いているのが気持ちいいAlloyにバグがあったら見つけるのも直すのも大変そう(まだAlloyを信用できない)クラシックだとひとつの画面はひとつのJavaScriptファイルで完結するので管理しやすい今作っているアプリはサーバーと連携するクライアントアプリ。ビジネスロジックは全部サーバー側にあるので、MVCでいうところのViewをTitaniumで開発している感覚。さらにMVCで開発するほど大規模なアプリは今のところない。自分の中で確立した書き方から脱却するのが億劫世間ではAlloyで開発するべきだという意見が一般的。Classic vs Alloy? | Community Questions & Answers | Appcelerator Developer Centerベストアンサーを日本語訳してみたAlloyは一般的な方法と統一したコードを提供する。これは他のAlloyプロジェクトの開発者や新規開発者が理解するのに容易。Alloyは便利で役に立つたくさんのレイアウトショートカットを提供しているので、より早く開発することが出来る。我々のセールスチームは70%のコードを削減できた。これはたぶんベストな例だけど、Alloyアプリでたくさんのコード削減できる。Alloyアプリは各プラットフォームに最適なコードと追加ツールを提供するのでクラシックなアプリよりも動作が速い。Alloyは横長のアプリを作ったり、テーマを作ったり、再利用するコンポーネントを作るのに便利。これらはクラシックコードだと別々なカスタムソリューションが必要となる。AlloyはMVC…

【Titanium】thisとparentとchildrenを使った書き方

イメージ
Titanium Advent Calendar 2014の8日目。最近多用しているthis, parent, childrenを使った書き方の紹介です。環境: Titanium SDK 3.3.0.GAAlloyは使ってません。これらを使うとループの中でクロージャ(無名関数)を作成する必要がなくなったり、「引数を使いまわしたいから無名関数でネストする」必要がなくなります。メモリ効率的にもいいような気がします(実際は分かりません)。例えばこんなコードがあったとします。/ui/common/testView.js// Expose API
exports.createView = createView;function createView(title) {
    var frameView, buttonView, i;    frameView = Ti.UI.createView({
        layout: 'vertical',
        height: Ti.UI.SIZE
    });    for (i = 0; i < 10; i++) {
        buttonView = Ti.UI.createButton({
            title: title + i
        });        (function() {
            var index = i;
            buttonView.addEventListener('click', function() {
                alert(index);
            });
        })();        frameView.add(buttonView);
    }    return frameView;
}
これを呼び出すapp.jsvar win = Ti.UI.createWindow({
    backgroundColor:'#ffffff'
});win.add(require('/ui/common/testView').createView('ボタン'));
win.open();これを実行すると10個のボタンを配置…