HTML
マークアップを担当していると、デザイナーの方からpngやjpgでデザインの確認を依頼されることがあります。もらった画像をiPhoneに転送して確認してみることも少なくはありません。 デザインにMobile SafariのUIがはいっている場合もありますが、iOS7からはM…
Google URL Shortener Google Developers Blog: Transitioning Google URL Shortener to Firebase Dynamic Links手軽に短縮URLを作成できるウェブサービスです。 つくった短縮URLの最後に + を追加すると、短縮URLのクリック数もわかるという便利機能もつい…
先日つくって一部でそれなりに好評いただいた、 jsrun.it と jsrun.it ですが、1つ大きな問題点を抱えていました。そう。それはオンライン環境でないとカードを切れないということです。これは由々しき自体ですね。 オフライン環境でカードを切りたくなるこ…
千葉ロッテマリーンズのスコアがバッジで確認できるアプリことchibadge（チバッジ） 。 われながらできばえには非常に満足しておりますが、1点だけ不便に思っていることがあります。それはDockに他のアプリを置くスペースがなくなってしまったこと。 そこで…
console.log コンソール界におけるスーパースター（？）。定番中の定番です。 こいつがいないとデバッグが始まらないです。いつもお世話になっております。 console.error 基本的にはconsole.logと一緒です。 出力にエラーっぽいアイコンがつきます。 consol…
ワールドカップがもりあがっていますね。以前、 iPhoneを振ってイエローカードを出すページ をつくりましたが、今回はシンプルにアクセスした時点でiPhoneをイエローカードみたいにするページをつくりました。 イエローカード jsrun.it ついでにレッドカード…
Googleアナリティクス の、 集客 > キーワード > オーガニック検索 を確認した際に表示される (not provided) これまではなんとなく流してきましたが、改めて調べてみました。 (not provided) とは 直訳直訳すると「提供されていない」。 検索エンジンから検…
Google Search Console をつかうのが良いですが、URLを送信するだけで手っ取り早く登録したい場合は、 https://www.google.com/webmasters/tools/submit-url をつかっても良いかもしれません。※ 要Googleアカウント
タッチデバイスがはびこる昨今。SafariやChomeは、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> や <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 等のmetaメタタグでピンチによるズームをOFFにすることが多いと思います。しかし、WindowsタブレットのIE10, IE11ではこれではOFFになりません。 IEで拡大をOFF…</meta></meta>
以前、 metaタグをつかって検索結果に表示されなくなる方法 について記事を書きましたが、今回はルートディレクトリにファイルをアップすることでクローラにお帰り頂く技を紹介します。 アップするファイル User-Agent: * Disallow: /こちらのファイルを rob…
（ ）
今更ながらmarqueeタグの便利さに気づきました。タグで囲むだけでテキストをスクロールさせることができるなんてごいすーですね。スマートフォンでも動作するし、お手軽です。※ marqueeタグはHTML5で廃止される予定です。
よく このサイト をつかわせていただいております。 画像をつくる <img src="http://fakeimg.pl/250/" /> URLに1辺の長さを渡すと正方形がつくれます。 <img src="http://fakeimg.pl/300x250/" /> URLに横幅x縦幅と渡すと長方形がつくれます。 色を指定する <img src="http://fakeimg.pl/250/2c7aca/" /> URLにカラーコードをつけると色を指定できます。 <img src="http://fakeimg.pl/250/2c7aca/0a2f54/" /> もう一個カラーコードをつける…
HTML5とJavaScriptでもアプリがつくれるということで取り組んでみました。 用意したもの Windows8.1のはいったPC Microsoft アカウント Visual Studio Express 2013 for Windows 作業メモ アカウント編 Microsoftアカウントは http://msdn.microsoft.com/ja-…
<meta name="viewport" content="minimal-ui" /> と記述するだけで、ツールバーが非表示となり、UIが最小限になります。 ただし、初期表示が非表示になっているだけなのでステータスバーをタップするとツールバーが表示されます。</meta>
今更ですが、アジアンカンフージェネレーションがローリングストーンという曲をYouTubeにアップしていたことに気づいたのでつくってみました。ローディング・ストーンズ とか ライク・ア・ローディング・ストーン の横展開というか手抜き記事です。
こちらの拡張 をChromeに導入すると、アナリティクスに送信した内容がコンソールに表示されるようになるので便利です。特にデバッグの際に効力を発揮します。Google Analytics Debugger - Chrome ウェブストア
基本的には、こちらのページ のページのアドレスにhttpsからはじまるURLを入力すればOKです。httpからはじまるページでつくったはてなブックマークボタンは、 画像を http://b.st-hatena.com/images/entry-button/button-only@2x.png から、 JavaScriptを ht…
JavaScriptを一部分、ほんのちょっとだけ担当しました。http://xn--w8jtai1b2hn7abd.xn--q9jyb4c/
例えばこのアプリのアートワークを大きめの画像で取得したい場合。https://itunes.apple.com/jp/app/zushihokkinorifutingu/id853099497?mt=8&at=10l16903 1. Chromeで該当ページを開く 2. アートワークを右クリックして「要素の検証」を選択 3. デベロッパ…
<meta name="apple-itunes-app" content="app-id=853099497" />というメタタグ1つで、スマートにアプリのバナーが表示されるようになります。 mobile Safari限定です。</meta>
ローディング・ストーンズ が思いのほか好評だったのでForkしてつくってみました。 演出はつかいまわしです。
ローディング中にジャンピン・ジャック・フラッシュが流れます。 ※ PC限定 ちょっとした解説 音はYouTubeから引っ張ってきています。 ローディングの演出は基本的にはCSSアニメーションで行い、メーターが溜まっていくところのみJSをつかっています。
この投稿のしたに表示されている記事、すばらしいですね！
html5shiv をつかうことが多いですが、必要な要素をcreateElementするだけでもとりあえずレンダリングはされるようになります。例えば、sectionタグを使えるようにしたかったら、レンダリングされる前に、 document.createElement("section"); としておけばO…
audioタグをつかって音のでるサイトをつくってみたものの、急遽IE8に対応しなければならなくなったりすること。そんなことってありますよね。今回はjPlayerをつかって、audioタグがつかえる環境ではaudioタグで、つかえない環境ではFlashで音源を再生してみ…
今更ですが、この現象（ http://ceron.jp/url/d.hatena.ne.jp/amachang/20100625/1277446556 ）に出くわしました。とりあえず背景を透明なpng画像にすることでその場をしのぎましたが、それだけのために画像をアップするのも面倒なので、次回以降のためにbas…
昨日の記事 ではここで川柳を詠んでました。 (function() { document.getElementById("title_1000").setAttribute("title", "みかふ\nずわる\nのずい\nおとけ\nとびや\n こ \n む \n"); })(); こんな感じで実装しております。
HTML5から導入されたAudioタグ。 非常に便利なのですが、ブラウザによって扱えるオーディオの種類が違います。 Chromeでは.mp3ファイルを、FireFoxでは.oggファイルを読み込みたかったので、下記のようなコードを書いてみました。 音源までのパス（拡張子な…
以前 は2分で消えるページをつくりましたが。今回は逆に2分かけて表示されるページをつくってみました。 カップラーメンよりも、たけしの挑戦状の地図よりもはやくできあがります。 注意事項 やっぱりスピーディーに実装するためにCSSアニメーションでつくっ…
