かわいい手書き風日本語フォント＆エフェクトで写真を編集できるiPhoneアプリ『TypoInsta』 | なまら春友流中古の1戸建を昨年購入しました。（土地も一緒）。上の写真は素人DIY最中です。DIY初心者だけどこれやばい、できるのかと感じてます、春友です。 で、購入した家の用途は住居用ではなく簡易宿、いわゆる旅館業として運営してゆくためのもので購入しま...
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
Androidデバイスのディスプレイサイズ、DPI一覧 - Hacking My Way 〜 itogのhack日記
2011/10/1最新情報を公開しました http://d.hatena.ne.jp/itog/20111001/1317438659 AndroidDeviceInfoShareを公開してから早一ヶ月、あっという間にFINGERPRINTベースで100以上のデバイス情報がシェアされてます。 その中で、多くの人が一番気にしてるディスプレイサイズ、DPIに関する情報を表にしてみました。 最新の情報はアプリで見てください。インストールは以下から https://market.android.com/details?id=com.itog_lab.android.adis MODEL MANUFACTURER BRAND widthPixels heightPixels xdip ydpi density 001DL Dell Inc dell 800 480 160.42105 160 1 A
スマートフォンサイト作成の参考になるギャラリーサイトのまとめ
このブログではないですが、Google Analyticsを見るとスマートフォンからのアクセスが結構あったので、スマートフォン向けのサイトを作ってみようと思いました。 ただ、スマホ向けのサイトは作ったことがないので、まず実際に色んなサイトを見て参考にしようと思い、ギャラリーサイトを調べてみました。 国内ギャラリー まずは国内サイトです。iPhoneが中心になっています。この3つのほかにも色々ありましたが、内容的には似ているので、更新頻度や使いやすさなどを基準に選びました。 iPhoneデザインボックス 画像が大きく見やすいです。個別ページでは画像も多くPCサイトとの比較もあってとても使いやすいです。カテゴリもしっかりしています。 iPhoneデザインアーカイブ 掲載サイト数が多く、更新頻度もかなり高いです。 スマートフォンサイト集めました。 すっきりしたデザインで見やすいです。カテゴリも業
ダウンロードされ続けるアプリの条件って？
DLされ続けるアプリってどんなん？ 拙作iPhoneアプリTypoInsta（有料170円）ですが、現時点（8月リリース11月現在）で2万5000ほどダウンロードいただいています。もちろん、もっとたくさん売れてらっしゃるアプリはありますが、そういった競争を抜きにして、私個人としては大変感謝です。 この経験を活かし、今後も楽しんでもらえるアプリを作りたいなーと思っております。 3本ほどアプリをリリースすれば、ダウンロードされ続けるアプリっていうのが、ある程度どういうものなのかわかってきます。 なんとなくアプリを作ってApp Storeに出してみたいと思ってらっしゃる方々も多いのかなと思いますので、 その条件（というと大げさですが）をちょこっとだけ、まとめてみました。 ダウンロードされ続けるのに必要なこと その拙作アプリTypoInstaですが、リリースから3ヶ月経った今でも大体200＄〜35
Flash終了でアプリは消えないと思うよ？
アプリが消える日？ スマホからアプリが消える日――web化していくスマートフォンの未来 ↑こちらの記事が興味深い内容だったので、iOSアプリデベロッパの端くれとして意見を書いてみる。 （僕はFlasherではありませんよ） 別に記事にいちゃもん付ける訳ではないですが、裏付けが乏し過ぎるかなと。 正直、スマホとアプリのビジネスがどういうものなのか解ってないなーと思いました。 「モバイル向けFlash終了」という理由って、そもそもあんまり関係ない。 そういう理由では、アプリは無くならないです。 以下、理由です。 ちなみに、Android Marketは詳しく無いので、App Storeをベースに書いてます。 理由１：Webアプリにできることは限られている やっぱり出来ることでは、ネイティブアプリの方がアドバンテージが当然高い。 以下、Webアプリが不利な点 ・カメラなどハードウェア操作が出来な
フリック・スワイプ操作の画像ギャラリーに使えるjQueryプラグイン5選 // 4S（ヨンエス） – スマートフォンサイト制作しよう
HTML5やCSS3など、スマートフォン用サイト制作についてまとめるブログフリック・スワイプ操作でスライドする画像ギャラリー等に使えるjQueryプラグインをいろいろ探してまとめてみました。 ここに挙げたものは全て試してみましたが、どれも一長一短なので用途に合わせて使ってみてください。 テスト端末 ・iPhone4（iOS4.1） ・Xperia Arc(Android 2.3) ●jCarouse 作者が日本人なので日本語の解説あり。 iPhoneでは快適にフリック・スワイプ操作でスライドすることができますが、Androidではフリック・スワイプが機能しません。 iPhone限定のサイトに使用するのであれば問題ないと思います。 [対応状況] iPhone：○ Android：×（フリック・スワイプ操作が機能しない） ●jquery.flickslide.js 作者が日
iOSアプリ リリースのタイミングなど気をつける点をまとめてみた
アプリを申請する際、Appleが用意したiTunes ConnectというWeb上の管理画面みたいなものを使うのですが、ユーザーがアプリを探す時の検索ワードを登録する必要があります。 「In Review」になったら、キーワードは変更できないとなんとなく認識はしていたのですが、審査が通ればまた変更できるだろうと思っていました。 僕はここはあまり深く考えず文字数いっぱい入れておらず、けっこういい加減に入れてしまいました。 実際は、審査が通ってしまうとキーワードは変更できません。 なので、だいぶここで損をしてる状況です。 ただ、2度と変更できない、という意味とはちょっと違います。 変更したいのであれば、アプリのバージョンアップの申請の際に再度変更することができます。 正しい英語で無くても伝わることが大事 iOSアプリは、デバイスが英語環境に設定してあれば、英語版のビューを表示させることができま
著作権フリー音楽・着信音がDLできるiPhoneアプリをリリースしました
2011/6/4（土） 著作権フリー音楽をダウンロードできるiPhoneアプリKaleidoscope Music Libraryをリリースいたしました。 アプリ概要は以下の通りです。 Kaleidoscope Music Library （カレイドスコープ ミュージックライブラリ） Kaleidoscope Music Libraryは着信音・アプリやゲームBGM・Webコンテンツ・映像メディアなどに使える著作権フリーのループ音楽ライブラリです。 アプリ本体のみで、無料の著作権フリー音楽14曲をダウンロードすることができます。有料アドオンを追加することで、さらに28曲をダウンロードすることが可能です。 (アドオンは今後シリーズ追加予定) また、アプリ本体で有料アドオンの試聴ができるので、ご購入前に楽曲を聴いてご検討いただくことができます。 【主な特徴】 ・ループ音楽なので、着信音利用する
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 このフレームワークを使えば、幅が600〜800px は a.css、800〜1200px の場合は b.css のように使い分けるのが容易になります。 端末の違いなんかもCSSによって分けてしまえると、プログラム的な無駄な分岐を省けて綺麗に作れますね。 ここら辺の分岐を簡単な使い方で勝手にやってくれるのがAdapt.js。スマートフォン向けサイトなんかにも使えます。 iPhoneだと縦で大体320p
優れたデザインのiOSアイコンまでもアーカイブしてるサイト iOS INSPIRES ME
ご存知の方もいらっしゃると思うのですが、iOSアプリ関連の優れたデザインを集めたサイトを見つけたのでエントリ。 iOS INSPIRES ME このサイトの特徴は、アプリの画面やユーザーインターフェースだけでなく、アイコンやアプリのサイトまでもアーカイブしているところ。しかも、どれもデザインが秀逸！アプリだけでなく、スマートフォンサイトのデザインの参考にもなりそうです。 さらに、デザインのアーカイブはページの下端に行くとAjaxでサムネイルがガンガン読込まれます。これはザッピング的に見るのにもいいですよね。これだけたくさんあると、文字通りデザインをインスパイアしてくれそうです。 アプリのUIだけでなく、アプリのアイコンもアーカイブ そもそも、僕がこのサイトを見つけたのは、今現在iPhoneアプリの開発をしてまして、アイコンのデザインの参考を探してたところ辿り着きました。 小さなサイズの抽象
Androidでアプリ内課金を始めるための基礎知識
Android Marketのアプリ内課金サービスとは アプリ内課金サービスとは、アプリ内でデジタルコンテンツを販売するためのAndroid Marketのサービスです。このサービスを利用することで、音楽や画像などのダウンロード可能なファイル、ゲーム難易度やポーションなどの架空のアイテム（俗に言う「アイテム課金」）など、幅広いコンテンツを販売が可能です。 アプリ内課金の特徴は、以下のとおりです。 決済はAndroid Marketが代行してくれる 決済方法はAndroid Marketでアプリを購入する方法と同じでユーザーフレンドリー 決済手数料はアプリ販売と同じ30％ 以下はアプリ内課金サンプルの決済処理の画面遷移です。 左画面で、アプリ内で購入するアイテムを選択し「Buy」ボタンをタッチすることで、中央画面のAndroid Marketが提供するチェックアウト画面が表示され、ここで決済
画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法
CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。 CSS3 Wizardry -Back and Next Buttons Revisited- CSS3 Wizardry -Subpixel Rendering- Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。 ポイントとなるHTML ボタンを構成する要素はこれだけ。 <!--ボタン要素--> <div class="button bordered back"> <span class="label">Back</s
iPhone・Androidの両対応サイトなら、アイコン設定にprecomposed付けた方がいいかも
今回のエントリはちょっとした小ネタです。 今やiPhone・Androidの普及を考えると、スマホ最適化してないサイトでも「ホーム画面アイコン」「ショートカットアイコン」の設定は必須になってきたと思います。 以下のようなタグで、ページに簡単にアイコンを設定できます。 <link rel="apple-touch-icon" href="画像ファイルのパス（png）" > とくにiPhoneは、指定した画像に自動的に磨き処理のエフェクトをかけてくれるので、いい感じになるな〜と関心していました。 ただ、Androidについては磨き処理をやってくれないので、ちょっとした悩みでした。 iPhoneの方がいい感じになるだけに、Androidのアイコンがかなり寂しい感じに見えてしまいます。
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。
スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト対応の波に速攻対応できるように 今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。 （だいぶ行き当たりばったりのエントリーになってきました。。。） スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。 なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。 となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。 そこでCSS3が活躍してくれるのです。 ポイントとなるCSSを載せておきます。 参考になる部分はご活用いただいて、
はてなから引越しました。
はてなからブログを引越しました。 WordPressに移行しました。 前のブログはこっち http://d.hatena.ne.jp/izit_kosuke/ 基本的なスマホ対応してます。（iPhone・Androidでアクセスしてください） 【サイトトップ】 超突貫で作ったので、細かい部分でいろいろ行き届いてません。 カテゴリやエントリがないリンクすらありますw IE6は完全切り捨てです（笑） IE7ではレイアウトが微妙に崩れるようです。 iPhone／Android対応してますが、フリックできるところとか （完全なフリックの実装はしてない） ときどきバグります。 また、スマホ時もPCサイトの画像（サイズの大きい画像）をそのまま読込んでいるので ページ読込みにやや時間がかかります。 スマホサイトやアプリの制作関連をエントリしていきつつ、 サイトも良くしていこうと思ってます。
スマホ最適化でやったこと
※Androidでアクセスされた方は使用感をいただけると幸いです。 （サイトトップ） 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑） （IE系ではちゃんと表示されません…そのうち手入れします。すみません） どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 （ちなみに対象としているスマートフォンはiOSデバイス（iPh
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
9leap : トップページ - どこでも遊べる、投稿型ゲームサイト
スマートフォンサイト制作