2008/10/24 金曜日 Posted in 記事紹介・リンク | 1 Comment »
ohtaさんからのタレコミです。情報提供ありがとうございます。 携帯だけで会社やお店のホームページや作れる「モバロケ」というサービスを作成したとのことです。 ちょうど私も他のニュースサイトで興味を持っていましたので、ご紹介したいと思います。 → モバロケ PC向けページ [pc.mloc.jp] → モバロケ ケータイ向けページ [pc.mloc.jp] (PCからも見れます) 以下タレコミ文からの引用です。 モバロケは、3キャリア+iPhoneに対応した企業向けのホームページを携帯電話だけで簡単に作成することができる携帯ホームページ作成サービスです。 モバロケでは、外部のホットペッパーやぐるなびなどのサービスとマッシュアップすることで、企業の周辺情報をホームページのコンテンツとして表示することができる今までに無いモバイルロケーションの世界を提供します。 モバロケのコンセプトは、「携帯ホームページでお客様に、おもてなしをする」ことです。 初めて訪問してもらう人には、地図や最寄駅をお知らせすることができます。 常連のお客様には、クーポンが使えるお店や周辺のホテル予約を案内することができます。 モバロケは、携帯ホームページの新しい世界をマッシュアップという技術を使って切り開こうと考えています。 先日開催されたマッシュアップコンテストMashup Award 4にて「優秀賞(Business賞:リクルート賞)」を受賞することができたので、一般公開して多くの人にご利用いただきたいと思っています。 地図や近くのお店・駐車場などが検索できるのは便利ですね。 また、iPhone向けサイトまで自動生成されるのは面白いです。 早速自分でも試してみました。 ケータイから空メールを送って登録します。 入力は基本ケータイから行うことになっていますが、登録が済んでしまえばPCからでもログイン可能です。 全てケータイからでは入力がキツイという方でも大丈夫です。 1点気になったのは入力モード(漢・英・カナ・数)の初期値セットが正しく動作していないという点です。(ドコモP905iで確認) ソースを見る限り属性はセットされているようなのですが、うまく動いていないのはちょっと使いづらく残念です。 現在はまだリリース直後ということなので、改善に期待しましょう。 住所からジオコーディングされ、地図がセットされます 最寄駅の検索もできます iPhone向けサイトも自動で生成されます GoogleMapもバッチリ動作します 作成したページはコチラからご覧になれます。 またこちらのページには動画による解説も用意されています。 → cre8system たった1分で超便利なiPhone対応携帯ホームページを作る方法(4倍界王拳デモ)+MA4リンクまとめ [gadget.cre8system.jp] 実際にケータイサイトを作る方以外ににも、マッシュアップコンテンツの作成やCMSの自作などを検討されている開発者にとっても作りの参考になり、役に立つと思います。 興味のある方はぜひ試してみてはいかがでしょうか。 関連: ケータイフォームでの入力モードの仕様について詳細にまとめられた「携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて」 ThinkITでモバイルサイト制作特集が組まれています iPhoneでCSSを使って要素を3Dっぽく回転させる方法 Read more..2008/10/16 木曜日 Posted in iPhone | 2 Comments »
最近iPhoneをいじっていなかったので、久々にiPhoneネタです。 今回はiPhoneでJavaScriptを使って、要素を3Dっぽく回転させる方法をご紹介いたします。 静止画なのでわかりづらいのですが、右にクルクル回転しながら進んでいきます。 この状態からアニメーションスタート(モアレがひどくてすいません) クルクルと回転していきます。 文字が裏返っているのが面白いですね サンプルコードは次の通りです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <script type="text/javascript"> function animationStart() { var el = document.getElementById("target"); el.style.webkitTransition = '-webkit-transform 3s ease-in-out'; el.style.webkitTransform = 'translate(180px,40px) rotateY(180deg)'; } </script> </head> <body> <input type="button" name="hoge" value="animation" onClick="animationStart();" /> <div id="target" style="width:120px; ... Read more..2008/10/7 火曜日 Posted in ニュース, 記事紹介・リンク | 1 Comment »
ThinkITの10月の特集として「モバイル向けサイト制作」特集が組まれています。 → ThinkIT モバイル向けサイト制作 [thinkit.co.jp] 執筆陣もかなり豪華な顔ぶれとなっています。 今から始める携帯サイト制作 著者:柴崎 正也氏 第1回 携帯サイトとPCサイトはここまで違う! 第2回 携帯サイトの制作から公開まで 第3回 3キャリア対応サイトを作るには(仮) 第4回 携帯サイトならではのユーザビリティ向上(仮) 携帯サイトをテストする方法 著者:荒木 稔氏 第1回 携帯テストの基本をおさえる 第2回 PCブラウザで携帯サイトのテストをする(仮) 第3回 携帯シミュレーターを使いこなす(仮) iPhone向けWebサイトをつくろう 著者:株式会社モディファイ 松本庄司氏 第1回 結局、iPhoneってなんなの? 第2回 全体構成はどうする?(仮) 第3回 見た目はどうできる?(仮) 第4回 どうやれば楽できる?(仮) 第5回 使えるTipsまとめ(仮) モバイルWeb構築の最新潮流 著者:株式会社イオス 吉田 悟美一氏 第1回 モバイルサイトに求められるデザイン力! 第2回 モバイルサイトをリッチ化する 第3回 コンテンツもよりインタラクティブに(仮) 第4回 サイトの機能もリッチ化する(仮) 第5回 モバイルWebの可能性と未来(仮) 出遅れるな!Flash Lite入門 著者:株式会社24-7 古本 光司氏 第1回 Flash Liteの基本を学ぼう! 第2回 Flash Lite 1.1のスクリプト制御(仮) 第3回 時計待ち受けを作ろう!(仮) 第4回 簡単なゲームを作ろう!(仮) 第5回 Flash Lite のまとめと今後(仮) サイト作成の基本から、テスト・動作確認について、iPhone、デザイン、FlashLiteと、モバイル開発についてが網羅されています。 Web上でここまでモバイル向けの記事がまとまったのは初ではないでしょうか。 記事ごとに曜日別となっており、それぞれ1週間単位で公開されていくようです。 10月はこれだけでかなり楽しめそうです。 気になる記事がありましたら都度ピックアップしていこうと思います。 関連: Web+DB Press Vol45に掲載されたMobaSiFの記事がWeb上で無料公開されています 次号のWeb Designing(2008年7月号)は、ケータイ特集になるようです 「Web+DB PRESS Vol45」はケータイ開発特集になるようです ... Read more..2008/10/2 木曜日 Posted in iPhone, ニュース | No Comments »
iPhoneのソフトウェア開発情報は、NDA(機密保持契約)によって厳重に保護されていましたが、その一部が撤廃されたようです。 → YOMIURI ONLINE アップル、「iPhone」アプリ向けNDAを緩和-開発者の不満に対応 [yomiuri.co.jp] → ITmedia +D モバイル Apple、iPhoneアプリ開発の秘密保持契約を撤廃 [itmedia.co.jp] → ITpro 米アップル,iPhoneソフトウエアに関するNDAを撤廃 [nikkeibp.co.jp] 契約内容変更は即日発効となり、すでにリリースされたiPhone用ソフトウェアに関して、開発者はNDAの制約を受けなくなるとのことです。 これは開発者にとってはうれしいですね。 ただし、全面的にではなく、あくまで「一部」解禁という形のようです。 → builder by ZDNet Japan あのiPhone NDAが緩和、しかし…… [zdnet.com] 以下記事からの引用です。 iPhone OSには、多くのAppleのアイデアと革新的技術が含まれており、盗用を防ぐためNDAの制約を課してきた。しかしながら、iPhoneアプリ開発者からNDAが重荷であるとの指摘が多いため、リリース済みのソフトについてNDAの対象から外すことにした。なお、リリース前のアプリについては、従来通り NDAの対象となる。 リリース後、つまりAppleの審査を通過したアプリに関してはNDAの対象外となる形のようです。 ですが、開発中のアプリに関してblog等に書くことは、依然としてできないようです。 ルータ化のような違法アプリを出回らせないためには必要なのかもしれませんが、これではちょっと中途半端な感じがしますね。 関連: iPhoneのCSSで拡大・縮小・回転などのアニメーションさせる方法 iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法 90秒で理解するiPhone JavaScript(マルチタッチ編) Read more..2008/8/20 水曜日 Posted in iPhone | No Comments »
先日「iPhoneでJavaScriptを使わずCSSだけでアニメーションする方法」という記事を書きましたが、今回はその続きです。 前回は、左から右にすーっとアニメーションするだけでしたが、今回は拡大・縮小・回転といったアニメーションをさせてみたいと思います。 また前回は「-webkit-animation-name」を使う方法でしたが、今回はやり方を変えてみました。 静止画なのでわかりづらいですが、左からクルクルと回転しながら縮小して、右のようになります。 サンプルコードは次の通りです。 <html> <head> <meta name="viewport" content="width=320, user-scalable=no, maximum-scale=1.0" /> <script type="text/javascript"> function animationStart() { var el = document.getElementById("target"); el.style.webkitTransition = '-webkit-transform 3s ease-in-out'; el.style.webkitTransform = 'translate(180px,40px) rotate(180deg) scale(0.1)'; } </script> </head> <body> <input type="button" name="hoge" value="animation" onClick="animationStart();" /> <div id="target" style="width:120px; height:120px; background-color:red; position:absolute; ... Read more..