みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

つくったもの

200を返すページをつくってみる

http://200.kimizuka.fm/ http://200.kimizuka.fm/ 200を返すページをつくってみました。 200が返ってこない場合やオフラインの場合はChrome的な恐竜が表示されます。

404 NOT FOUND を実際の404ページに設定してみる

404 NOT FOUND - みかづきブログ その3 以前つくった 404ページ ですが、実際の404ページに設定してみました。 404 | NOT FOUND 上記ページは200を返すサンプルページなので、本物の404が欲しい場合は、http://404.kimizuka.fm/404等、実際には存在しないペ…

404 NOT FOUND

以前、ページのローディング中に ローリング・ストーンズ の曲が流れる 「ローディング・ストーンズ」 というページをつくったことがありました。 The Loading Stones - みかづきブログ その3 今回は、404ページ用に Mr.Children の NOT FOUND が流れるページ…

SNSアプリ乗っとり対応シミュレータ

2014年につくっていたものを棚卸ししていて見つけました。 SNSアプリののっとりを疑似体験できるシミュレータです。 基本的にCSSでなんとかしているところに当時の情熱を感じました。 良きタイミングでリリースしようと思ってつくっていましたが、完全に期を…

Instagramの写真を振り返る

今更ながら、はてなブログにInstagram貼り付け機能があることに気づきました。 かつてスネオっぽいイラストを書いてInstagramに投稿することにはまっていた時期があったので、その時のアーカイブを貼り付けておこうと思います。 いかがでしょう。たまにはこ…

続・YouTubeでマルチアングル風の演出をつくろう

YouTubeでマルチアングル風の演出をつくろう - みかづきブログ その3以前、2本のYouTubeを切り替えるモック をつくりましたが、それを応用して 「まじですかスカ!」 ( http://www.youtube.com/watch?v=ArfDmSjuU_Y)のPVを全員分同時に再生するサイトをつ…

アモーレ・モアレ その2

アモーレ・モアレ - みかづきブログ その3以前つくったこちらのコンテンツをCodePen用にリメイクしてみました。 といっても丸抜きして、回転スピード / 方向を変えただけです。 なんかもっと有効に活用できるような気ができるような気がしたりしなかったりし…

CSSでkonashiの素材をつくる

CSSでiPhone本体の素材をつくる - みかづきブログ その3こちらの記事が意外に好評だったので、今回もCSSでフラットな素材をつくってみようとおもいます。 前回よりもちょっとニッチなデバイスですが、最近お世話になっているデバイス konashi をCSSでつくっ…

CSSでiPhone本体の素材をつくる

最近、WEBサイトにiPhoneっぽいものを置きたいときがよくあるので、素材用につくってみました。See the Pen hello world. by kimmy (@kimmy) on CodePen.若干デフォルメしてますが、割とサイズ感にこだわってつくってます。つくってから気づいたんですが、簡…

CSSでメッセージアプリ風のUIを再現する

CSSでメッセージアプリ風のUIを再現してみました。 是非ともiPhoneでご観覧頂きたいです。 DEMO See the Pen hello world. by kimmy (@kimmy) on CodePen. HTML <div id="global-wrapper"> <header id="global-header"> <h1 class="ttl">Message</h1> </header> <div id="global-stage"> <div id="global-stage-inner" class="inner"> </div> </div> </div>

position: fixed; でおしゃれな背景を演出する

sectionを通過するたびに背景色を変更していくモックをつくってみました。 ウィンドウのリサイズには対応していないので、読み込み時のウィンドウサイズのままご利用ください。 JavaScript (function(win, doc, $) { "use strict"; var $win = $(win), $bg =…

CSSでiOSのバッジ風デザインをつくる

chibadge (チバッジ) - 千葉ロッテマリーンズのスコアがバッジで確認できるアプリ のときにつくったCSSを流用してバッジ風のCSSをつくってみました。アイコンの大きさはiOS7、バッジのデザインはiOS6を見本にしています。 See the Pen hello world. by kimmy…

konashiの入力をkonashi.jsで受け取る

今日までの3日間、http://gugen.jp/hirameki に参加させてもらってきました。そのなかで、konashiの入力の状態を監視するアプリづくりを担当したのですが、せっかくなのでそのときのソースを公開しておこうと思います。 実装期間が実質半日程度しか取れず、…

箇条楽器をつくろう

箇条書きが楽器になったらおもしろいなと思ってモックをつくりました。 箇条書きを書くときに過剰な楽器の音が出る の部分から試してみましょう。 サンプル音源なんで過剰な楽器音ではないですが、タイプ音がでるページをつくってみました。モックは こちら …

議事ロックをつくろう

ロックに議事録をとれたらおもしろいなと思ってモックをつくりました。 議事録をとるときにロックな音が出る 議事録が楽譜みたいに出力される 重要な部分がサビになるのでわかりやすい そのまま iTunes で販売できる(会議参加者がダウンロードする) という…

イエローカードに音を加えてみる

以前つくった イエローカード にさらに改良を加え、画面をタップした際にホイッスルっぽい音を出すことにしてみました。 ソース HTML <style> html, body { margin: 0; padding: 0; height: 100%; } #card { width: 100%; height: 100%; background: -webkit-gradie</style>…

オフラインでもイエローカードを出せるようにする

先日つくって一部でそれなりに好評いただいた、 jsrun.it と jsrun.it ですが、1つ大きな問題点を抱えていました。そう。それはオンライン環境でないとカードを切れないということです。これは由々しき自体ですね。 オフライン環境でカードを切りたくなるこ…

ランチャーページをつくろう

千葉ロッテマリーンズのスコアがバッジで確認できるアプリことchibadge(チバッジ) 。 われながらできばえには非常に満足しておりますが、1点だけ不便に思っていることがあります。それはDockに他のアプリを置くスペースがなくなってしまったこと。 そこで…

iPhone用イエローカード(シンプル ver.)

ワールドカップがもりあがっていますね。以前、 iPhoneを振ってイエローカードを出すページ をつくりましたが、今回はシンプルにアクセスした時点でiPhoneをイエローカードみたいにするページをつくりました。 イエローカード jsrun.it ついでにレッドカード…

iPhoneを振ったときにイベントを発火する

iPhoneを振っているときと振ってないとき用の関数を渡すと一定時間毎に実行するクラスをつくりました。 現状はインスタンスを返しませんが、のちのちメソッドを実装したいと思っているので new で実行しています。 ソースコード /** * opt_moveFunc // iPhon…

chibadge kuro リリースできました。

chibadge shiro 以上に申請に手こずった chibadge kuro ですが、本日ついにリリースできました。https://itunes.apple.com/jp/app/chibadge-kuro-marinzuno-shi/id687708321?mt=8&uo=4&at=10l16903これで先日公開した、chibadge shirohttps://itunes.apple.c…

iPhone用タッチポインタ(習作)

最近、ウィンドウズストアアプリをつくっていて、Windowsタブレットをつかう機会に恵まれまくっているのですが。Windowsタブレットにはタッチした箇所にタッチした感を演出する機種が結構あります。その演出とおんなじような体験の再現を目指してコードを書…

世界一ミニマルな野球速報アプリ chibadge(チバッジ) をつくりました

chibadge(チバッジ)とは chibadge(チバッジ)は千葉ロッテマリーンズのスコアをバッジで伝えてくれる世界一ミニマルな野球速報アプリです。 ※ chibadgeはマリーンズファンが勝手につくった千葉ロッテマリーンズ非公式アプリです。 chibadge (チバッジ) - …

Chromeでひらくボタン

iPhoneのSafariで開くとChromeのバナーと、Chromeへ招待するボタンが表示されます。 動作原理 URLスキーム mobile Safari の URLバーに、 googlechrome:// と入力すると(Chromeをインストール済みであれば)Chromeを開くことができます。 また、その際に、 …

FacebookアプリのWebViewではすべてを表示しないモック

試しにつくってみました。こちらのサイト をFacebookでシェアし、 iPhoneのFacebookアプリで見てみると、本文が途中までしか表示されず、Safariで開くようにサジェストされます。Safariで開くと、隠れていた部分が徐々に表示されていきます。原理としてはユ…

【再】続・車窓に小人を走らせよう

こちらの記事 で紹介した過去につくっていたプロダクトですが、過去のSNSアカウントを整理していたらアーカイブ映像がわんさかでてきました。 車の中のイメージ すごくよく映ってます。 名刺の組み立て方 映りがいまいちです。無音なのも寂しいですね。 ダン…

かっこいいね!ボタン

( )

iPhoneでインディアンポーカーをやってみる

寿司屋で急にインディアンポーカーがやりたくなったのでつくってみました。 iPhoneだけで簡単なWEBアプリがつくれてしまう jsdo.it 。ごいすーですね。 ※ スマフォからだとえらいことコードが打ちにくいですが。 つかいかた スマフォで http://jsrun.it/kimm…

【再】車窓に小人を走らせよう

かれこれ6年前ぐらいのできごとですが、当時の僕は車の中で鑑賞するコンテンツの制作を目指していました。 kimizuka.fmその名もサプライズ・ウィンドウ。 子供の頃、車の中で考えていたことの具現化を試みた一品です。 車窓から見える景色をステージとしたア…

2.12との戦い

2010年にDeveloper登録してから、はや4年。 先日、ようやく1本目のアプリをリリースすることができました。https://itunes.apple.com/jp/app/zushihokkinorifutingu/id853099497?mt=8&at=10l16903このアプリをリリースするまでに、 実に5本のアプリがリジェ…