スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
ブログやWebサイトをスマートフォン向けに最適化してくれるWebサービス・Mippin Mobilizer - かちびと.net
なかなか便利だなと思ってご紹介。 自分のブログなどをスマフォ向けに 最適化したいけど時間が無かったり スキルがなかなか追いつけなかっ たり、という方も多いかと思います。 Mippin Mobilizerはその最適化を してくれるWebサービスです。 要はRSSを使ってこのWebサービス上でスマフォ向けレイアウトにしてくれる、というものですので、アドレスはMippin Mobilizerのドメインを使います。この点はmobifyと同じですね。 日本でもガラケー向けに最適化してくれるサービスがあります（名前忘れた）が、そのスマフォ版のようなもの。コーディングやマークアップも知識も不要で、マウスのみで作成可能です。 アドレスを入力する 最適化したいサイトのURLを入力します。矢印をクリックすると右側にプレビューが表示されますよ。RSSが発行されていればどんなサイトでもOKです。同時にレイアウトを
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
スマートフォンサイト運用と今後のスマートフォン市場の展望 : LINE Corporation ディレクターブログ
スマートフォングループの藤村です。2か月前まで、モバイルで、livedoorトップ・デコメサイトの運用を担当していました。 10月から新しい部署のスマートフォングループに所属し、すでに、スマートフォン版のlivedoorトップ＆ニュース他の運用を開始しています。実際に運用してみると、モバイルとの共通性が多く、モバイルサイトの運用経験が生きる領域だと実感しました。 まだまだ運用の初期フェーズの段階ですが、今回は、実際にスマートフォンサイトを運用してみて気づいた点及び、今後のスマートフォン市場の展開予想について書いてみようと思います。 ファーストビューの重要性 スマートフォンのサイトを運用してみて、まず一番最初に改修を入れたのが、ファーストビューです。ファーストビューとはユーザーがモバイル端末でアクセスして、一番最初に表示される画面のことを言います。 モバイルサイト運用経験者の方には常識かと思
スマートフォン用のサイト作成に役立つテスティングツール７:phpspot開発日誌
7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが７つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜％として表示してくれます。 何を改善すればポイントを上げられるか？についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ
jQuery Mobileを使ってiPhone用のWordPressテーマを作るTips - かちびと.net
話題のjQuery Mobileを使用したWordPress のiPhone用テーマを作成する方法のご紹介 です。あくまで、対応させる為のTipsという事 で了承願います。jQuery Mobileは、モバイル に簡単に対応させる事が出来るライブラリで、 jQueryのプラグインです。 対応させるだけなのでcssの調整とか細かい点などはご自身で変更してみてください。 基本的に、jQuery Mobileはライブラリを読みこめばあとはdivにidを振ったり、data-theme等を加えればいいだけのようなのでテーマファイルを作るときもその手順通りで済むようですね。 細かい作り方は割愛し、ここでは大まかな手順をご紹介します。デザインに関してはjQuery Mobileのドキュメントをご確認ください。 おおまかな手順 適当にWPテーマのフレームワークを用意 header.phpにjQueryとj
iPhone/iPad用のサイトを作る際のデバッグに便利な「Bugaboo」:phpspot開発日誌
Bugaboo App iPhone/iPad用のサイトを作る際のデバッグに便利な「Bugaboo」。 デスクトップに入れたSafariで動作確認をしても、実際には若干の違いがあってうまく動かない場合がありますね。 この仕組は、iPhoneにはアプリとしてBugaboo Appを入れておくと、iPhone上にデーモンが起動して、PC等のブラウザから直接iPhoneに繋いでJavaScriptデバッグできるというものです。 デスクトップにはiPhoneのデバッグコンソールが現れ、デスクトップから直接JavaScriptのコマンドを実行して動作確認することが可能です。 動きを見てみる場合は以下のムービーを参照して下さい。
Windowsユーザ必見のiPhone向けサイトデザイン&シミュレータ·MobiOne Studio MOONGIFT
MobiOne StudioはWindows用のフリーウェア。iPhone用のWebサイトを作ろうとした場合、Windowsでは相当不利になっていた。WebKitはあるので、ユーザエージェントを変えればレンダリング結果は近いものが得られるだろうが、やはり別物だった。 ビジュアルデザインが可能 さらにWebサイトのデザインをするのも画面構成が特殊なので、Mac OSXがないと難しかったはずだ。そんな面倒さにやきもきしていたWindowsユーザはMobiOne Studioを使おう。これを使えば一気に未来が開けるはずだ。 MobiOne StudioはiPhone用のWebサイトをデザインするためのIDEだ。30以上のコンポーネントがあり、ドラッグアンドドロップで配置してWebデザインができる。とても簡単に最適化サイトの設計ができるはずだ。専用のアイコンも60種類以上ある。 生成されるHTML
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneデザインボックス
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
Webサイトをスマートフォン対応してと言われた時に見ておきたいサイトまとめ｜caraldo.net | WebとiPhoneとロードバイクが大好き！