この記事を konashi.js 読み込むとLEDがビカビカひかります。https://itunes.apple.com/jp/app/konashi.js-javascript-html/id652940096?mt=8&uo=4&at=10l16903yukaishop.base.ec

まねてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. SCSS body { background: #1e1e1e; } .btn { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding-top: 8px; border: soli…

まねてみました。 DEMO See the Pen PIN by kimmy (@kimmy) on CodePen. SCSS body { background: #333; } .dots { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 156px; height: 12px; @for $i from 0 through 4 { &[da…

Feel So Moon www.youtube.com曲も好きなんですがふんだんにアイデアが盛り込まれていて見ていて飽きないです。 Golden Touch www.youtube.com逆にワンアイデアで成立しています。秀逸です。 everything but the love www.youtube.comタイポグラフィがかっこ…

近くにいるひとに見せたいサイトがあるとき、PCで見ているサイトのURLをスマフォに送りたいとき等々、URLを共有したくなる瞬間は多々あります。今回はそんなときにつかえるツールを紹介します。 QRコード おしゃれではないですが定番です。先日紹介しました …

HTML <p>a = b²</p> DEMO これで指数も表現できます。

GoogleのAPIをつかえばURLをQRコードにすることなんてお茶の子さいさいです。https://google-developers.appspot.com/chart/infographics/docs/overview JavaScript (function(win, doc) { "use strict"; var input = doc.getElementById("url"); doc.getEle…

kimizuka.hatenablog.com1年半前につくった、ブックマークレット用のスクリプトですが、typeやcharsetを設定したほうが安全なので若干手を入れてみました。 JavaScript javascript: void((function() { var script = document.createElement('script'); scri…

kimizuka.hatenablog.com以前つくったもの が不格好だったので再度挑戦してみました。 HTML <div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> SCSS body { background: #333; } .btn { box-sizing: border-box; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margi…

最近購入しました。モックをつくるにはとても便利な一品です。https://store.macnica.co.jp/products/mpression_mp-uzk001bstore.macnica.co.jpこちらをkonashiに接続して下記コードを実行すれば、各種センサ値を読み取ることができます。 DEMO

以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…

Hosted Libraries 個人的に信頼度ナンバーワンです。なんてったってGoogleなんで。developers.google.com ASP.NET 信頼できるサイトだと思います。なんてったってMicroSoftなんで。www.asp.net cdnjs.com Google CDN や Even Microsoft runs their own CDN …

以前つくったクラス を複数のプレイヤーを生成しやすいように改修しました。kimizuka.hatenablog.com 変更点 純正のYouTubePlayerを返すように変更しました。 addEventListenerに渡したコールバックに渡る引数を変更しました。 イベント名をクラスの定数とし…

以前つくった404で検証しました。 IE8, 9, 10 では display: none のプレイヤーのメソッドが叩けません。 IE11では叩けました。 display: block; display: none; ご注意を。

いままで、head要素、body要素は、 document.head; document.body; と取得していたのですが、html要素は、 document.querySelector("html"); と取得していました。最近ようやく、 document.documentElement; で取得できるを知りました。ひとつかしこくなった…

jQueryのeachをつかっているときに、continue、breakをつかいたくなったらどうするのかを調査したところ、returnする値で制御できることがわかりました。 JavaScript (function() { "use strict"; var arr = [0, 1, 2, 3, 4, 5, 6]; $.each(arr, function(in…

Android標準ブラウザで長押しによる画像の保存を防ぎたく、いろいろ試してみました。 機種によっては背景画像すらも長押しで保存できてしまうので意外に大変です。背景画像にしても、デフォルト動作を切っても、イベントを受け取らないようにしても、上にDIV…

みごとに化けました。対策探してます。

gitリポジトリをpullしたタイミングで、 No submodule mapping found in .gitmodules for path 〇〇とエラーがでて困っていました。 git rm –cached 〇〇でファイルを管理対象から外したら直りました。

Jadeとは Jade is a terse language for writing HTML templates.訳） ジェイドは、HTMLテンプレートを作成するための簡潔な言語です。http://jade-lang.com/ 導入方法 npm install jade --globalなんともらくらくでインストールできます。そう。npmがあれば…

表題のとおりですが、ページスクロールを止めようとして、touchmoveをpreventDefaultすると、clickイベントが効きづらくなります。 具体的には、click中に発生するtouchmoveも止まってしまうようで、click中に指が動くとclickイベントが発火しなくなります。…

こちらのコードで各種ブラウザに対応できるようです。 JavaScript document.write(navigator.userLanguage || navigator.browserLanguage || navigator.language); DEMO

DEMO See the Pen Scroll Icon by kimmy (@kimmy) on CodePen. HTML <div class="mouse"></div> SCSS body { background: #3e3e3e; } .mouse { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: solid #fff 2px; border-radius: 12px; width: 24px; hei…

昨今デジタル時代。IoT（Internet of Things）が盛り上がりをみせています。IoTをものすごく簡単にまとめると、ものをインターネットにつなげること。 個人的には、新しい価値・体験を提供するためにいままでインターネットに繋がっていなかったデバイスをイ…

99%迷わない！ Waaaaay!（うぇーい！）方向音痴のための距離と方向だけのナビ＆待ち合わせ Waaaaay!（うぇーい！）Houchimin LLC.ナビゲーション無料目的地の住所を入力すると目的地までの距離と方向を表示してくれるログポーズ的アプリ。 世界観が独特で、…

つくってみました。3Dでつくって視点を回転させています。 DEMO See the Pen CODEPEN by kimmy (@kimmy) on CodePen. HTML <ol class="box"> <li class="surface front"></li> <li class="surface back"></li> <li class="surface left"></li> <li class="surface right"></li> </ol> SCSS $size: 100px; html { width: 100%; height: 100%; } body { …

MOZILLA DEVELOPER NETWORK には、JavaScript では、条件に基づいて関数を定義することもできます。例えば次の関数の定義は、変数 num が 0 に等しい場合のみ myFunc という関数を定義します: if (num == 0){ function myFunc(theObject) { theObject.make =…

みどりの日（グリーンデー）なのでテキストもすべてグリーンにしてみました。いつもより若干目にやさしいかもしれませんね。前、このネタをつかったのは3月14日のホワイトデーでしたね。

いままではFlashやProcessingを使ってPCとArduinoを連携させていましたが、 Node.jsでも結構簡単に制御できることを知ったのでメモしておきます。【用意するもの】 ・Arduino ・Node.jsの動く環境 ・duino（ https://github.com/ecto/duino ） なんとかしてN…

ものすごくひさしぶりに Arduino と Processing を連携させてみました。 しばらく見ない間にものすごく便利になってますね。 Arduinoのインストール こちら からインストールします。Arduino - Home Processingのインストール こちら からインストールできま…