みかづきブログ その3

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

👆

引越し先はこちらです!

2015-03-01から1ヶ月間の記事一覧

jQueryで1回だけイベントを発火させる。

jQueryをつかって1回だけ発火するイベントをはりたいとき、 いままでは、 JavaScript $(elm).on("click", function _handleClick() { alert("the 一期一会."); $(this).off("click", _handleClick); }); と書いていましたが、 one というメソッドを教えても…

TwitterのタイムラインにGIFアニメを表示するシェアボタン

SNS

kimizuka.hatenablog.comこちらの記事の応用版です。 タイムラインにGIFアニメを表示します。 DEMO タイムライン上ではmp4として表示されるので、GIFアニメ感は損なわれますが、とても便利です。

Warning: EMFILE, too many open files を解決する

Mac

Grunt の watch で Warning: EMFILE, too many open filesとワーニングが出るようになってしまいました。 どうやら同時に開くことのできるファイルの上限を越えてしまったようです。 ulimit -nで確認すると1024になっていたので、 ulimit -n 4096と入力して…

text-align: justify をつかってテキストを均等割り付けする

CSS

均等割り付けという言葉を初めて知りましたし、CSSで設定できることも初めて知りました。 text-align を justify に設定するだけでOKです。 text-align: left text-align: justify とても便利ですね。

世界一ミニマルな野球速報アプリ chibadge(チバッジ) が復活しました。

プロ野球 2014シーズン終了とともにストアから取り下げていたchibadgeですが、2015シーズン開幕とともにストアに返ってきました。chibadge.kimizuka.fm chibadgeとは chibadge(チバッジ)は千葉ロッテマリーンズの現在のスコアをバッジで伝えてくれる世界一…

Chrome の ディベロッパーツールをつかって DOM の属性が変化した際にデバッガーを張る

他人のコードを引き継いだときなど、DOMにイベントを振ってある場所がわからないけどデバッガーを張りたいというケースが無くはないとおもいます。 そんなとき、Chromeのデベロッパーツールであれば、対象のDOMを右クリックして、Break on... > Attributes M…

CSSでテキストのアンチエイリアスの感じを調整する。

CSS

ChromeやSafariではテキストのアンチエイリアスの感じを調整できることを知りました。 DEMO 便利ですね。

Sublime Text 2 から Atom に乗り換えるために複数行選択プラグインをいれる

Mac

atom.ioそんなにエディタにこだわりのある方ではないので、乗り換えてみました。Sublime Text 2 は、altボタンを押しながらドラッグで複数行選択をしていたのですが、Atomの標準機能はありません。 下記プラグインをいれればおんなじことができるようになる…

はじめてのthree.js

巷でWebGLってやつが流行っているらしいので、three.jsを勉強しはじめました。Three.js – JavaScript 3D Library jsdo.itで試す分には Add Libraryボタンから three.jsを読み込むだけで簡単につかいはじめることができます。便利ですね。 今回は立方体をぐる…

Web Components で pushタグをつくろう

前回のserifタグkimizuka.hatenablog.com に続いて、今回はpushタグをつくってみました。 クライアントに ここをプッシュして欲しいんだよね。 とか言われたときに、つかいましょう。 JavaScript (function(doc) { "use strict"; // エレメントが生成された…

Web Components で serifタグをつくろう

kimizuka.hatenablog.com kimizuka.hatenablog.com以前、タグの説明をするときに、「」が台詞を表すタグのようなものという話をしました。 マークアップに使う記号をタグと呼びます。 タグで囲まれた文章は意味がある文章になるわけです。例えば、 四郎くん…

ページからフォーカスが離れた際にBGMを止める

最近、BGMが流れるウェブページが増えてきていますが、ページを離れた際にはBGMを止めるという気遣いがあるとGoodだと思います。個人的には。そんな細かい気遣いのできるページをつくるには、blurイベントでaudioをpuseしてしまえばOKです。 JavaScript (fun…

Retinaディスプレイ時代に簡単対応するために簡単にSVGをつかう

スマフォだけではなくRetinaディスプレイ搭載のPCもあふれる昨今。 SVGの需要がますます高くなってくるのではないでしょうか。 そこで今回は、きたるべく大SVG時代に乗り遅れないように簡単にブラウザにSVGを表示させてみましょう。 SVGとは Scalable Vector…

Androdで文字が変な箇所で折り返される現象をbase64で対策する

一部Androidで文字が変な箇所で折り返される現象は、その要素に背景色をつけることによって解決します。ただし、transparent や rgba(0, 0, 0, 0) ではうまくいかないので、1px 1px の透過pngを敷き詰めたりしているかたが多いとおもいます。そんなとき、透…

自分用HTMLテンプレートを公開してみる

いつもつかっているHTMLのひな形を自分用にメモ。 そして記憶喪失になった時に備えてほんのり解説をいれておきます。 HTML <html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <meta charset="UTF-8" /> <title></title> </meta></head></html>

Chrome、Safariにプッシュ通知を飛ばす

developer.mozilla.orgいつものようにインターネットという大海原をサーフィンしていたら、偶然 Notification API とやらを見つけたのでモックをつくってみました。

Mobile Safari のリーダー表示でリーダーの情報を表示する

Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。 DEMO http://jsrun.it/kimmy/reader ※ iPhone の Safari で御覧ください つかいかた URLにアクセスするとURLバーに 「Reader View Available」と表示されます。URLの左側のリ…

ホワイトデーの日記

ホワイトデーなのでテキストもすべてホワイトにしてみました。昔の掲示板の隠しメッセージみたいですね。次、このネタがつかえるのは5月4日のグリーンデーですかね。

IE8, IE9 にて min-heightを設定した要素の子要素を高さ100%にした際の挙動

CSS

min-heightを設定した要素の子要素の高さを100%にしした際に気づきました。Chrome, Safari, Firefox, IE10, IE11 と IE8, IE9 で挙動が変わってきます。 DEMO Chrome, Safari, Firefox, IE10, IE11 の場合 bodyの高さが1200px以下の場合も#wrapperの高さは12…

metaタグをつかってIEに互換表示させないようにする

ヘッダー内で <meta http-equiv="X-UA-Compatible" content="IE=edge"> と指定しましょう。 http-equiv="X-UA-Compatible" content="互換モードの際の指定"という形で指定でき、 IE=edgeでIEの最新バージョンの標準モードを指定できます。</meta>

Chromeに名乗るほどのものではございませんと伝える

今年のはじめぐらいからGoogle Chromeが僕の名前を表示してくれるようになりました。 僕はそんなに大した人間ではないので、表示を遠慮することにしました。 名前をつけてやるアーティスト:スピッツユニバーサルAmazon

TumblrでOGPの設定がうまくいかない時に確認するべき2つのこと

検索結果にこのブログの表示を許可する これを許可していないと Twitter Cards の バリデートが通りません。 パスワード認証を設定をOFFにする パスワード認証をかけていると Facebook の OGP が自分が設定したものになりません。 単純なことですが、公開時…

Facebook の Share Dialog を JavaScript からつかう

Share Dialog 調査 - みかづきブログ その3かつて、Share Dialog を URL Redirection すなわちリンクとしてつかうための調査をしましたが、今回は JavaScript からつかうための調査をしてみました。

Velocity.js をつかってスムーズなアニメーションを実現する

Velocity.js職場の後輩に教えてもらいました。 jQueryアニメーションのようにつかえてjQUeryアニメーションよりさくさく動くと評判らしいです。 Velocity JavaScript $(function() { "use strict"; var $box = $("#box"), MS = 1000; (function anim() { $bo…

ビット演算で数値を操作する

簡単な演算であれば Math をつかうよりも高速に処理できるらしいです。 小数点以下を切り捨て num | 0; 2で割って小数点以下を切り捨て num >> 1; 4で割って小数点以下を切り捨て num >> 2; 小数点以下を切り捨てて2倍 num << 1; 小数点以下を切り捨てて4倍 …

Googleカレンダーに予定を登録するリンクをつくる

http://www.google.com/calendar/event?action=TEMPLATE&text={タイトル}&details={説明}&location={場所}&dates={開始時間/終了時間} という形でGoogleカレンダーに予定を登録するURLを作成できるようです。datesの形式は、 {yyyy}{mm}{dd}T{hh}{mm}/{yyyy}…

名称未設定

(あとで読者がじゃぶじゃぶ はてブ したくなるような本文を書く)

Grunt から Gulp へ移行してみる

Grunt 作業メモ その2 - みかづきブログ その3いままで開発環境の構築には Grunt をつかっていたのですが、Gulp の評判が良いので乗り換えてみることにしました。今回は導入までの手順をまとめておきます。 Gulp導入までの道のり Node.js の導入 すでにGrunt…

【追記あり】Tumblrをカスタムするための準備を整える

SNS

Tumblrとは Tumblr(タンブラー)は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc(現: Tumblr, Inc.)により2007年3月1日にサービスが開始された…

オンガクスリで卒業ソングを集めてみる

3月といったら卒業ですね。マジカルバナナで答えてもアウトにならないぐらい納得感があると思います。 というわけで、今回は「いま一番必要な音楽と出会えるサービス」ことオンガクスリから何曲か卒業ソングを紹介してみようと思います。 明日高校を卒業しま…