タグ

スマホ向けサイト制作に関するkazumeatのブックマーク (9)

  • スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳

    最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhoneiPadAndroid用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks

    スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
  • スマートフォン向けアプリ開発フレームワークとか

    スマートフォン向けのアプリ提供はほぼ必須になってきているこの状況。 何で作るのか? というのは、悩ましいところですよね。 ネイティブアプリで作るのか? WEBアプリ(HTML5+CSS3)で作るのか? ...は開発者が揃っている云々もあるかもしれませんが、それよりも、そのアプリの特性/対象者によって決定する感じなのでしょうね。 会社のアプリならばインストールさせて使う系のネイティブの方が良さそうだけど、インストール無しでも..であればWEBアプリでという選択肢なのかな。あとは、Appleにお布施が可能なのかどうかとか..か。 WEBアプリの方には全然注目していなかったのですが、「ネイティブと同じような動きで、iPhoneAndroidのマルチプラットフォーム」となるとなかなか厄介なもんですね。 どこまでこだわるか?によるんでしょうけども、対象が iPhoneだけだったらライブラリつかって

  • CakePHPでPC/ケータイ/スマートフォン対応サイトを適当に作ってるメモ - OUT OF AMMO!!

    CakePHPPC/ケータイ/スマートフォン対応サイトを適当に作ってるメモ。 ケータイ(docomo/Softbank/AU by KDDI)からのアクセス → SJIS変換・出力。 docomoはapplication/xhtml+xml。 2Gなケータイは今更なので無視。WAP?なにそれ?おいしいの? Willcomも無視。 iPhone/iPodとAndroidiPhoneに合わせる(手抜き)。 コントローラー内でView(View/Theme/Media)の設定可能。(デフォルト:Theme) app/controller/components/mobile.php <?php // 汚いコードだことorz class MobileComponent extends Object { var $_ua; var $_carry; var $_layout; var $_sjis

    CakePHPでPC/ケータイ/スマートフォン対応サイトを適当に作ってるメモ - OUT OF AMMO!!
  • スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

    ※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。(ムービーはiOSシミュレータによるデモです)iPhoneAndroidでご覧の方はデモに直接アクセスしてください(ムービーは再生されません)。 【デモを見る(iPhoneAndroidで見てください)】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置(position:absolute)を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

  • スマートフォンサイトをデザインする上で知っておくべき10のTIPS

    スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re

    スマートフォンサイトをデザインする上で知っておくべき10のTIPS
  • 1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering

    初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

    1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
  • スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope

    【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLCSSで画像を操る編(前編) 2.HTMLCSSで画像を操る編(後編) スマホサイトの作り方関連のブログとかを見てて、viewport周りの基的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか? ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait(縦)表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 (まぁ、拡大とは意味が違うので当然なのですが。。。) 具体的にどうい

    スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
  • ウノウラボ Unoh Labs: PHPで暗号化・復号化あれこれ

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: PHPで暗号化・復号化あれこれ
  • 1