サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.kaleido-jp.net
DLされ続けるアプリってどんなん? 拙作iPhoneアプリTypoInsta(有料170円)ですが、現時点(8月リリース11月現在)で2万5000ほどダウンロードいただいています。もちろん、もっとたくさん売れてらっしゃるアプリはありますが、そういった競争を抜きにして、私個人としては大変感謝です。 この経験を活かし、今後も楽しんでもらえるアプリを作りたいなーと思っております。 3本ほどアプリをリリースすれば、ダウンロードされ続けるアプリっていうのが、ある程度どういうものなのかわかってきます。 なんとなくアプリを作ってApp Storeに出してみたいと思ってらっしゃる方々も多いのかなと思いますので、 その条件(というと大げさですが)をちょこっとだけ、まとめてみました。 ダウンロードされ続けるのに必要なこと その拙作アプリTypoInstaですが、リリースから3ヶ月経った今でも大体200$〜35
アプリが消える日? スマホからアプリが消える日――web化していくスマートフォンの未来 ↑こちらの記事が興味深い内容だったので、iOSアプリデベロッパの端くれとして意見を書いてみる。 (僕はFlasherではありませんよ) 別に記事にいちゃもん付ける訳ではないですが、裏付けが乏し過ぎるかなと。 正直、スマホとアプリのビジネスがどういうものなのか解ってないなーと思いました。 「モバイル向けFlash終了」という理由って、そもそもあんまり関係ない。 そういう理由では、アプリは無くならないです。 以下、理由です。 ちなみに、Android Marketは詳しく無いので、App Storeをベースに書いてます。 理由1:Webアプリにできることは限られている やっぱり出来ることでは、ネイティブアプリの方がアドバンテージが当然高い。 以下、Webアプリが不利な点 ・カメラなどハードウェア操作が出来な
【このブログに10プロモコードを掲載しています。ご興味のある方は、コードを使って無料でDLできます】 mosapic(モザピック)は、写真や画像をドット絵風に加工するアプリです。 (厳密には、色調をベタ塗り風にしたモザイク画像とドット絵の中間のようなテイストになります) モザイクサイズにフィットした文字入力もできるので、よりビットダウンした雰囲気を出すことができます。 —–主な機能—– ・モザイクサイズの調整 ・ボーダーサイズ(太さ)/カラーの調整 ・モザイクサイズにフィットするテキスト入力 ・テキストカラー変更 ・輝度/コントラスト調整 ・ダブルタップ/ピンチによるズーム確認 ・Facebook, Twitter(Twitpic)への投稿 ・出力画像は長辺640/960/1280ピクセル ★効果的な画像を作るために★ ・内容がシンプルな写真、被写体が大きめの写真が効果的に加工できます ・
アプリを申請する際、Appleが用意したiTunes ConnectというWeb上の管理画面みたいなものを使うのですが、ユーザーがアプリを探す時の検索ワードを登録する必要があります。 「In Review」になったら、キーワードは変更できないとなんとなく認識はしていたのですが、審査が通ればまた変更できるだろうと思っていました。 僕はここはあまり深く考えず文字数いっぱい入れておらず、けっこういい加減に入れてしまいました。 実際は、審査が通ってしまうとキーワードは変更できません。 なので、だいぶここで損をしてる状況です。 ただ、2度と変更できない、という意味とはちょっと違います。 変更したいのであれば、アプリのバージョンアップの申請の際に再度変更することができます。 正しい英語で無くても伝わることが大事 iOSアプリは、デバイスが英語環境に設定してあれば、英語版のビューを表示させることができま
2011/6/4(土) 著作権フリー音楽をダウンロードできるiPhoneアプリKaleidoscope Music Libraryをリリースいたしました。 アプリ概要は以下の通りです。 Kaleidoscope Music Library (カレイドスコープ ミュージックライブラリ) Kaleidoscope Music Libraryは着信音・アプリやゲームBGM・Webコンテンツ・映像メディアなどに使える著作権フリーのループ音楽ライブラリです。 アプリ本体のみで、無料の著作権フリー音楽14曲をダウンロードすることができます。有料アドオンを追加することで、さらに28曲をダウンロードすることが可能です。 (アドオンは今後シリーズ追加予定) また、アプリ本体で有料アドオンの試聴ができるので、ご購入前に楽曲を聴いてご検討いただくことができます。 【主な特徴】 ・ループ音楽なので、着信音利用する
Web系の人でiPhoneアプリ作ってみたいなーと思ってる人って多いのかな?どうなんだろ? 個人的には、HTML5技術とか進んでて、Webアプリでもかなりのものが作れるようになってきてますけど、やっぱりまだまだネイティブの方が有利な部分が多いと思ってます。あと、iPhoneの仕様を深く知る上でもいいんじゃないかなーと。 ちょっとしたアプリ作るなら、Titanium Mobileとかで全然いいと思うんですが、Titanium MobileのAPIに無いことをやろうとするとObjective-Cしかありません。 Objective-C自体はそんなに難しくないと思うんですよ。どちらかというと、APIやら仕様やらの情報がわかりにくい。それさえ調べ調べやれば、Web系の人でもアプリ作れます。 ということで、Web系の人でObjective-C学んでみたいという人向けに、ちょっとまとめてみました。 た
ご存知の方もいらっしゃると思うのですが、iOSアプリ関連の優れたデザインを集めたサイトを見つけたのでエントリ。 iOS INSPIRES ME このサイトの特徴は、アプリの画面やユーザーインターフェースだけでなく、アイコンやアプリのサイトまでもアーカイブしているところ。しかも、どれもデザインが秀逸!アプリだけでなく、スマートフォンサイトのデザインの参考にもなりそうです。 さらに、デザインのアーカイブはページの下端に行くとAjaxでサムネイルがガンガン読込まれます。これはザッピング的に見るのにもいいですよね。これだけたくさんあると、文字通りデザインをインスパイアしてくれそうです。 アプリのUIだけでなく、アプリのアイコンもアーカイブ そもそも、僕がこのサイトを見つけたのは、今現在iPhoneアプリの開発をしてまして、アイコンのデザインの参考を探してたところ辿り着きました。 小さなサイズの抽象
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
最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 (jQuery Mobileなどを利用した開発方法は置いといて) HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです( ̄▽ ̄;) 今回は、僕が知ってる大きな2つの注意点を
今回もあまりがっつり書ける時間が無いので、超小技のエントリー( ̄▽ ̄;) たとえば、Yahooさんとかがやっているんですが、 「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。 Yahoo! JAPAN (スマートフォンサイト) (Yahooさんの手法とは違うかもしれませんが) その方法を紹介します。 僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。 そもそも、iOSのSafariやAndroidの「ブラウザ」は、 ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、 URLバーが引っ込む仕様のようです。 (あくまで推測。ページ内リンクなどで、そうなるのが根拠です。) まぁ、これのなにがいいのかというと、 ページの表示範囲を少し広く見せられる。 ってところでしょうか。 やり方は簡単です。 JavaScriptでWin
今回のエントリはちょっとした小ネタです。 今やiPhone・Androidの普及を考えると、スマホ最適化してないサイトでも「ホーム画面アイコン」「ショートカットアイコン」の設定は必須になってきたと思います。 以下のようなタグで、ページに簡単にアイコンを設定できます。 <link rel="apple-touch-icon" href="画像ファイルのパス(png)" > とくにiPhoneは、指定した画像に自動的に磨き処理のエフェクトをかけてくれるので、いい感じになるな〜と関心していました。 ただ、Androidについては磨き処理をやってくれないので、ちょっとした悩みでした。 iPhoneの方がいい感じになるだけに、Androidのアイコンがかなり寂しい感じに見えてしまいます。
PCサイトをスマホ対応するという記事を1・2回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <link media="only screen and (min-device-width:481px)"
スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー?がスマホならではですよね。 今後のスマホサイト対応の波に速攻対応できるように 今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。 (だいぶ行き当たりばったりのエントリーになってきました。。。) スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。 なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。 となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。 そこでCSS3が活躍してくれるのです。 ポイントとなるCSSを載せておきます。 参考になる部分はご活用いただいて、
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed.
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。(ムービーはiOSシミュレータによるデモです)iPhone・Androidでご覧の方はデモに直接アクセスしてください(ムービーは再生されません)。 【デモを見る(iPhone・Androidで見てください)】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置(position:absolute)を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
はてなからブログを引越しました。 WordPressに移行しました。 前のブログはこっち http://d.hatena.ne.jp/izit_kosuke/ 基本的なスマホ対応してます。(iPhone・Androidでアクセスしてください) 【サイトトップ】 超突貫で作ったので、細かい部分でいろいろ行き届いてません。 カテゴリやエントリがないリンクすらありますw IE6は完全切り捨てです(笑) IE7ではレイアウトが微妙に崩れるようです。 iPhone/Android対応してますが、フリックできるところとか (完全なフリックの実装はしてない) ときどきバグります。 また、スマホ時もPCサイトの画像(サイズの大きい画像)をそのまま読込んでいるので ページ読込みにやや時間がかかります。 スマホサイトやアプリの制作関連をエントリしていきつつ、 サイトも良くしていこうと思ってます。
今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん!!」って方も多いのではないでしょうか? ということで、記事でも書いてみっかぁ!と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です( ̄▽ ̄;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhoneと同じwebkit系なのですが、微妙に仕様が異なっており、 機種などの差異を考慮する必要があり、内容がややこしく
※Androidでアクセスされた方は使用感をいただけると幸いです。 (サイトトップ) 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです(笑) (IE系ではちゃんと表示されません…そのうち手入れします。すみません) どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 (ちなみに対象としているスマートフォンはiOSデバイス(iPh
スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか? ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait(縦)表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 (まぁ、拡大とは意味が違うので当然なのですが。。。) 具体的にどういうことをしておいた方が良いかというと、 ★とりあえずページのラッピング要素はoverflow:hiddenにする HTMLレイアウトを組む大抵の場合、 <
人探し的な投稿が続いていますが、、、Unityでゲーム作りができる方を探しています。 現在、新作iOSアプリを開発・制作中ですが、私(荒木)が執筆や音楽制作のお仕事で 時間が割けなくなってきたため新作の進捗が滞っています。 もし助けていただける方がいらっしゃるようでしたら、 お会いしてお仕事の相談をさせていただきたいです。 具体的に探している方は、下記のような方です。 ・ゲームエンジンUnityが使える方(個人) ・かつ、Unityのスクリプトを組むことができて、ゲーム開発を行えるスキルがある方 要するに、こちらが持っているゲームのアイデアをUnityを使って形にできる方を探しています。 とは言っても、グラフィックや音楽まで形にしてほしいということではありません。 ゲームの仕組みをプロトタイピングできるレベルの方を求めています。 「Unityを使いこなせるスキルはあるけど、なかなかアイデア
このページを最初にブックマークしてみませんか?
『WEB・アプリ開発・音楽制作 | Kaleidoscope』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く