プラットフォーム - スマートフォンの記事一覧
Shiny - モバイルWebサイトで使える反射効果
モバイルデバイスはデスクトップよりもセンサーが多く搭載されており、それらを使うことでより自然でインタラクティブ性の高い効果を出せます。例えば加速度センサーであったり、位置情報、距離センサーなどです。今回紹介するShinyはスマートフォンの傾きを使って、自然な反射を実現しています。## Shinyの使い方実際に使っている...
Swipe-listener - スワイプ操作を検知してイベント実行
スマートフォンのWebブラウザも高速化し、Webアプリケーションを提供するのに躊躇することもなくなってきました。デスクトップ向けのWebアプリケーションがほぼそのまま提供できますが、画面の大きさの問題などもあって多少の工夫が必要です。そんな中、スマートフォン特有の動きにも気を配る必要があります。今回はその一つ、Swip...
Maji - ハイブリッドアプリ開発のベストプラクティスを提供
ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...
Mobile-Checker - w3c製のモバイルサイトチェッカー
スマートフォンの世界は進化が速く、スマートフォンに対応したWebサイトを正しく作れているかどうかは熟知している人であってもなかなか判断できないのではないでしょうか。そんな時には本家であるw3cの仕様に沿うのがベストです。今回紹介するMobile-Checkerはw3cが作成しているモバイルデバイスへの適合性チェックツー...
Power Touch - スマートフォンを拡張キーボードとして使う
TouchBarはその部分自体が小さなコンピュータになっており、本体とは切り離された存在です。その可能性として、二つのコンピュータを組み合わせた利用法が考えられます。タッチを通じてメッセージを飛ばし合うことで面白い処理ができるようになるかも知れません。そんなTouchBarにインスパイアされて作られたのがPower T...
Weex - アリババ製のモバイルUIフレームワーク
スマートフォン用にWebサイトであったり、ハイブリッドアプリを提供する際には専門のUIフレームワークが欠かせません。デスクトップWebブラウザ向けとは異なるUI/UXが求められるためです。しかしそういった実装は簡単ではありません。そこでUIフレームワークが重宝します。今回はアリババ社が作ったWeexを紹介します。## ...
Eruda - スマートフォン向けのコンソール
スマートフォンのブラウザでJavaScriptをデバッグしたり、スタイルの確認を行うのは非常に面倒です。わざわざUSBケーブルで母艦とつながないといけないですし、ケーブルがない状態でデバッグなどほぼ考えられないでしょう。そこで使ってみたいのがErudaです。スマートフォン用のJavaScriptコンソールです。## E...
Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク
スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレー...
Devices - Facebook製のデバイス画像集
スマートフォンはそろそろ頭打ちと言われていますが、タブレットやスマートウォッチなど関連デバイスが増えています。さらにAndroidでは多様性があり、数多くの企業がデバイスを開発しています。そんな中でスマートフォンアプリであったり、関連ビジネスを企画するさいに使えるデザインテンプレートをFacebookがリリースしました...
Mobiscroll - スマホWebサイトに使えるUIコンポーネント
Webサイトのモバイルシフトが進んでいます。Googleはクローリングにおいてスマートフォン対応しているか否かを指標に加えると発表し、さらに単なる表示を整えるだけでなくCSS3やCanvasを使ったアニメーションを使ってまるでモバイルアプリ化のようにも動作するWebサイトも増えています。そんな中だからこそ知っておきたい...
TouchstoneJS – ハイブリッドアプリ開発に使いたいUIフレームワーク
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。TouchstoneJSは最新のUIフレームワークで、...
2014/12/17
2014/12/172014年のトレンド振り返り（5）「スマートフォン」
前回分はこちら。- デザイン今回はスマートフォンについて振り返ります。## iOS 8/LollipopiOSはiOS 8、Androidは5.0系であるLollipopがリリースされています。NexusのようなGoogle公式のデバイスは既にバージョンアップが可能ですが（とはいえ怖くてアップデートできないのですが…）...
Remote Preview - 多数のデバイスでの表示を一気に確認
様々なタブレット、スマートフォンでのデザイン確認に便利ですよ！スマートフォン、タブレット全盛の時代になり、各デバイスでの見え方をテストするのも大変になっています。主立ったデバイスだけで済ませてしまえれば良いですが、Androidの各バージョン、解像度ごとのテストが求められる場合も少なくありません。エミュレータで済ませて...
- 2013/10/25
スマートフォンサイト構築する際のポイント&関連オープンソース・ソフトウェア
モバイルファーストという言葉はほぼバズになってきています。今回はそのモバイルファーストに注目し、モバイルサイトを構築する上でどういった点に注意しなければならないかを挙げてみたいと思います。
フラットデザインなスマートフォンWeb UIフレームワーク「Onsen UI」
Onsen UIはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。スマートフォン向けのHTMLテンプレートを使うことで最適化された表示のWebサイトが素早く構築できるようになります。今回は日本製のOnsen UIを紹介します。右側がOnsen UIの表示です...
スマートフォン、タブレットの判別情報をHTMLに追加「Device.js」
Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。iPhoneで縦...
スマートフォン向けWebアプリケーションフレームワーク「App.js」
App.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。スマートフォン向けにはアプリ開発もありますが、審査などなしでサービス提供したいと思ったらスマートフォン向けWebアプリとしてリリースする手もあります。今回はそのためのフレームワークApp.jsを紹介します。Yo...
Webの技術でスマホアプリのプロトタイプを作成「Clank」
ClankはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。スマートフォンやタブレットのネイティブアプリを開発するのは時間を要しますので、Webの技術を使ってプロトタイピングを作りスクラップ&ビルドで色々試してみるのが良いでしょう。そこで使えるのがClankです。ファイル...
スマートフォン向けのWikiエンジン「mobiki」
mobikiはPHP製のオープンソース・ソフトウェア（MIT License）です。Wikiエンジンはコンテンツを蓄積するサイトで様々に使われています。そして今後はスマートフォンが主流になっていくとなれば、スマートフォン用のWikiエンジンが欲しくなるはずです。今回はその一つ、mobikiを紹介します。メイン画面です。...
スマートフォン向けのアプリダウンロードバナーを切り替える「jQuery Smart Banner」
jQuery Smart BannerはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。iPhoneやAndroidでWebアプリを配布しているWebサイトを訪れたらスマートバナーを使ってダウンロードリンクを提示してあげるとダウンロードまでスムーズに運べそうです。そこで使...