単純にカウンターをつくろうとすると、カウント用にグローバル変数をつくり、それを操作していく形になると思います。 var count = 0; countUp(); // -> 1 countUp(); // -> 2 countUp(); // -> 3 function countUp() { return ++count; } これで問題なく動…

最近は隙を見て Code Pen に投稿することが趣味のひとつとなっています。 今回はCSSアニメーションで謎の演出をつくってみました。 一応、水中の文字が浮かび上がってくる感じをイメージしていますが、あまりうまくいってません。 DEMO See the Pen hello wo…

以前 、position: fixed をつかっておしゃれな背景を演出しましたが、よく考えたら、背景色を変えるだけなら position: fixed を使わなくても良かったということに気づきました。position: fixed; でおしゃれな背景を演出する - みかづきブログ その3 DEMO H…

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>

今月のアマゾン買い物履歴です。 ステートフルJavaScript - MVCアーキテクチャに基づくWebアプリケーションの状態管理 社内のスーパープログラマーに勧められて購入。 まだ読みきってないですが、日々の業務に役立ってます。ステートフルJavaScript ―MVCアー…

※ 未定義の変数、文法的におかしいところがあります。フィーリングで読んでください。 var today = new Date(); if (!!me.megane) { return; } else { // me.megane = undefined; var karte = new Karte(me.eyesight); me.megane = new Megane(karte); } 訳…

border-radius をかけた要素の overflow を hidden にしたときに効いたり効かなかったりするなぁと思っていたんですが、backface-visibility が関係していた模様です。偶然発見しました。 DEMO 対策 compass/reset をつかうと全要素の backface-visibility …

予告どおり Ogaki Mini Maker Faire 2014 に参加 してきましたが、かなり反省の多い展示となりました。 初日 めざしたもの 千葉ロッテマリーンズの現在の得点が表示されるバッジを目指していました。 できたもの konashi連携が間に合わず、iPhoneを直接バッ…

いま 出展者 | Ogaki Mini Maker Faire 2018 に参戦すべく大垣に向かってます。 いまつくっているもの 世界一ミニマルなウェアラブルデバイス chibadge（チバッジ）をつくっています。 イメージスケッチ こんな感じです。 千葉ロッテマリーンズの現在の得点…

こちらの記事は削除されました。

複数のスプライト画像を動かす際に、それぞれの要素にクラスを振ったり、data属性を振ることはよくあると思うのですが、JSからのDOMアクセスを減らすべく、 スプライトの親にのみアクセス 親のdata属性に子の配置をすべて書き込む という実装方針で実装を試…

DEMO 偶然みつけました。PCのブラウザだと.imgのheightがgreenの80%になりますが、スマートフォンのブラウザだと.imgのheightがbodyの80%になります。 発生条件 親（#green）の高さが%指定で、その親（#red）の高さがauto 自分自身（.img）はposition: stati…

今月はちょっとはやめに試してみたアプリをまとめてみます。 逆転裁判5 iPhone版の逆転裁判123HDもプレイしましたが、それと比較するとユーザーに親切なインターフェイスになりましたね。 随所に迷わずに操作できる工夫が見られます。 その反面、123HDほど自…

前回つくったもの をベジェ曲線にしようと試みていたんですが、点が多すぎると処理が大変なので、 この前つくったThrottleクラス をつかってmousemoveを間引くという地味なマイナーアップデートを施してみました。 JavaScript (function(win, doc) { "use st…

タイトルの通りです。Grunt で何回、 npm installしてもうまくいかなくなってしまって npm-debug.log を読んでみたところ、なんかchacheが残ってるっぽかったんで、いちかばちか npm cache cleanを実行してみたところ、すんなりインストールできるようになり…

これまで。コールバック関数を間引きたい時は 先人につくっていただいたThrottleクラス をつかわせていただいておりましたが、良い機会なのでフルスクラッチしてみることにしてみました。 Throttleクラスに求めること インスタンスに実行間隔を渡せる インス…

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

かつて、「英語は地球語」というコピーでCMを打っている英会話教室がありました。 しかし、現在の地球には残念ながら地球語というものはありません。地域によって話す言葉はまちまちです。もしも宇宙人が地球になにか交渉にきたとして、そのとき、その宇宙人…

以前、 CSSでボタンをつくったこと がありました。 最近は影とグラデーションを足してつかうことが多くなってきたのでアップデートをかけておきたいと思います。 See the Pen hello world. by kimmy (@kimmy) on CodePen. HTML <div class="wrapper"> <div class="btn"> <p class="inner">H</p> </div> <div class="btn"> <p class="inner">E</p> </div> <div class="btn"> <p class="inner">L</p> </div></div>

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

ディスクユーティリティでMacの調子を修復しよう。 - みかづきブログ その3 ディスクユーティリティでMacの調子をもっと修復しよう。 - みかづきブログ その3以前から調子が悪く、だましだましつかってきた僕のMacですが、突然再起動を繰り返し始めるなどい…

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

昨日のコード を改修してパスをたくさん描けるようにしてみました。また、今後の拡張性を考え、 FPSを定数で定義する パスの管理に多元配列を用いる という実装に変更してみました。 (function(win, doc) { "use strict"; var canvas = doc.getElementById("…

いままであんまりCanvasをつかったことが無かったのですが、いよいよ本格的に取り組んでいきたいと思います。まずは手始めに一筆書きを描画するCanvasをつくってみました。 ※ PCでしかうごきません。 (function(win, doc) { "use strict"; var canvas = doc.…

前回 までで想定していた機能は実装しきったのですが、今回はレンダリングの部分をcanvasに差し替えてみたいと思います。 canvasの作成 HTML <canvas id="canvas"></canvas> CSS * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; overflow: hidden; } とりあえ…

ちょっと期間が空いてしまいましたが、前々々回 、 前々回 、前回 のつづきです。今回はいよいよあたり判定の部分を実装していきます。 インスタンスを複数つくれるようにする まずはhitAreaを複数描画できるように、DOMにクラス名を渡せるように変更してみ…

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

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

前々回 、 前回 のつづきです。今回はエリアを見えるように改修しますが、また1点気になるところを修正してから実装を行います。 定数をkeyup時のコールバック関数の外に出す 前回のコードの、 doc.addEventListener("keyup", function(evt) { var TOP_KEY_I…

前回 のつづきです。今回はViewの部分をつくっていこうと思ったんですが、前回のコードを見返したら修正したいところが何点かあったので、まずはそちらの修正を行います。 移動量をインスタンスが持つようにする 前回、キーボードのイベントでオブジェクトの…