2012/02/14 に発表した Titanium Mobile を使って開発している Zaim で得たノウハウたちです。Read less
![Titanium でつくろう! iPhone/Android 両対応アプリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/10aabaf735c57ba7223d90330d9c448359f56d56/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Ftitanium20120214-120214114901-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
単一のコードベースから複数のプラットフォームへ展開する 通常スマートフォン向けのアプリケーションは、そのプラットフォームごとに特定の言語で開発する必要がある。iPhoneやiPadであればObjective-C、AndroidやBlackBerryであればJava、Windows PhoneであればC#やVisual Basicといった具合だ。 しかし、複数のプラットフォーム向けに同じアプリケーションを提供したい場合、それぞれの言語で個別に開発を行うのは非効率的であり、開発者の負担も大きい。 そこで近年では、単一のコードで開発し、それをベースとして各プラットフォームで実行できる形式に変換するというアプローチが一般的になってきている。この方法であれば、1度の開発で複数のプラットフォームをターゲットにすることができるため、開発の手間は大幅に削減される。言語の習得にかかる開発者の負担も軽減できる
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
HTML5 image crop tool ? Script Tutorials サーバ送信不要なHTML5による画像切り取りツール作成ツール HTML5とcanvasを使って画像の中の指定部分を切り取って画像化するという処理がブラウザ上で完結するデモプログラムです。 切り取った画像は単にCSSで切っているわけではなくて、画像として右クリックなんかで「名前をつけて保存」することが可能です。 通常であれば切り取った範囲と元画像をサーバに送信した上で、サーバ側で画像を切り取ってユーザに送信的な処理をいれないといけませんが、ブラウザ上で終わるというのは、サーバに負担が一切無くなかなか便利です。 関連エントリ HTML5を使ったファイルアップロード用プログラム集 HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5で色々作るチュートリアル&チートシート
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 : フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
jQuery・・・。 便利だけど、意外と IE でうごかねぇよ・・・。 option の最後に , を書いた場合。 例えばこんなとき $.ajax({ url: "〜〜〜〜", type: 'POST', dataType: 'xml', timeout: 10000, data: { "keyword": "test", }, error: function(){ alert('Error loading XML document'); }, success: function(xml){ hogehoge_success_flow; } });これ、IE でエラーがでる・・・。 原因は "keyword": "test",こいつです。 option を指定するとき、最後の1行には,を書いてはダメ。 firefox だと大丈夫だけどね。 $("<a>") みたいな感じで aタグのエレメン
初めましてこんにちは。ソーシャルクライアント開発の tanabe と申します。 今回は?Sinon.JS を使った JavaScript のテスト方法を紹介したいと思います。 Sinon.JS って何? Sinon.JS はノルウェーのエンジニア Christian Johansen さんが書かれた、JavaScript 用のライブラリです。スタブやモック、フェイクオブジェクトの提供に特化していて、QUnit などのテスト用のフレームワークや実行環境に依存しない所が特徴です。Christian Johansen さんは?Test-Driven JavaScript Development の著者でもあり、こちらは近々翻訳版 が登場するようです。 では早速、Sinon.JS を使ったテスト手法をご紹介していきたいと思います。本稿ではテストフレームワークは QUnit を採用しています。 時間
Notifier.js ? Elegant Javascript notifications | Srirangan 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」。 次のようなオシャレなアイコン付きの通知を表示できます。一定期間が終われば1個のアイテムはそれぞれ消えていく流行りのインタフェースです。 Notifier.success('User registration successful') のように関数を呼び出すだけで簡単に使うことができるので、使いやすそうです。 アイコンを変えるには、success の代わりに info や warning, error, notify といったメソッドを使えばOKです。 後から出てきただけあって、ポップアップなんかよりも邪魔にならないというところがいいですね 関連エントリ ピュアCSSでページ上に通知を出すチ
HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」 (phpspot開発日誌) HTML5 audioで音声合成をする、JavaScriptライブラリ「speak.js」が紹介されています。 eSpeakというC++のライブラリを、JavaScriptに移植したようです。 日本語はローマ字読みになってしまうようです。 ライセンスはGNU v3のようです。
※ここの情報は古いので以下をお読み下さい。 jQuery MobileのDateboxをカスタマイズ-その2 - Kimura.Memo スマートフォンで動作する、ちょっとした予定表を作っていて、jQuery MobileのDatepickerを使って日付の入力を行うことになりました。 このDatepicker、スマートフォンでも動作するのは有り難いのですが、ダウンロードしたそのままだと、ちょっと直したいところがあったりします。 jQuery Mobile Datepickerの基本 jquery.js、jquery.mobile.js、jquery.mobile.cssの他に、 jquery.ui.datepicker.mobile.css jQuery.ui.datepicker.js jquery.ui.datepicker.mobile.js の3つがDatepickerには必要。
jQuery Mobileは、jQueryのプラグインです。ということは、jQueryの機能も基本的には使えることになります。jQuery Mobileに用意されているGUI部品だけじゃたりないな……と思うなら、jQueryから借りてくればいいのです。 jQueryには、リッチなGUIを提供する「jQuery UI」という拡張ライブラリが用意されています。これを利用することで、jQuery用のGUIを使えるようになります。jQuery UIの中のGUI部品ですから、モバイル用に作られているわけではないので、ものによってはスマートフォンでは使いにくかったりするものもありますが、使い方によってはずいぶんとGUIのバリエーションが広がります。 jQuery UIを使うためには、jQuery UIのライブラリと、そのためのスタイルシートを読み込ませる必要があります。2011年8月現在、最新のSta
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 1から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます(デモ)。 こんなことできるんっ、という声が出てしまうかも(Androidはドラッグのみ) jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ&ドロップが可能 Jquery Swipe スワイプイベン
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考:video, audioのサポート状況 video, audio
スマホ用JavaScriptフレームワーク5つ +1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク/ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI(ユーザーインターフェイス)パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
初のβリリースとなった今回はそれなりに変更点をため込んだアップデートです.詳細はきっと誰かが粘着質にまとめる! とはいえ,Twitterでは苦い顔をしながら追いかけてきた身なので,自分でもさらっとアップデート内容をなめてみます. 以前のバージョンからの移行についての特化記事は,jQuery Mobile Beta1へのアップデートについてのほうを. 全体的に良アップデートな主たる内容 Key Changesを元に,主な変更や新規の内容について追いかけてみます. トランジションがいろいろスムーズになった 最も重要.これはもう体感したほうがいいと思いますが,iOSで見てる限りは確かにそこそこスムーズになった印象です.不自然にガッコンガッコンとした座標調整も諦めてくれたみたいで,全体的な動きがスムーズになりました.Androidはちょっとちらつき残ってるので今後に期待. 移動量がしきい値に満たな
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー&カルーセルプラグイン、チャート&グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く