みかづきブログ その3

本ブログは更新を終了しました。長年ありがとうございました。

👆

引越し先はこちらです!

HTML

Mobile Safari での見栄えを確認する

マークアップを担当していると、デザイナーの方からpngやjpgでデザインの確認を依頼されることがあります。もらった画像をiPhoneに転送して確認してみることも少なくはありません。 デザインにMobile SafariのUIがはいっている場合もありますが、iOS7からはM…

最近活用している便利なウェブサービス

Google URL Shortener Google URL Shortener手軽に短縮URLを作成できるウェブサービスです。 つくった短縮URLの最後に + を追加すると、短縮URLのクリック数もわかるという便利機能もついています。http://goo.gl/8vWe8yという短縮URLなら、http://goo.gl/8v…

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

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

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

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

最近はまっているconsoleオブジェクトのメソッド

console.log コンソール界におけるスーパースター(?)。定番中の定番です。 こいつがいないとデバッグが始まらないです。いつもお世話になっております。 console.error 基本的にはconsole.logと一緒です。 出力にエラーっぽいアイコンがつきます。 consol…

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

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

(not provided) を調べる

Googleアナリティクス の、 集客 > キーワード > オーガニック検索 を確認した際に表示される (not provided) これまではなんとなく流してきましたが、改めて調べてみました。 (not provided) とは 直訳直訳すると「提供されていない」。 検索エンジンから検…

Googleにサイトを登録する

Google ウェブマスター ツール をつかうのが良いですが、URLを送信するだけで手っ取り早く登録したい場合は、 https://www.google.com/webmasters/tools/submit-url をつかっても良いかもしれません。※ 要Googleアカウント

IE10, IE11でページをピンチで拡大できないようにする

タッチデバイスがはびこる昨今。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>

robots.txtをつかって検索結果に表示されないようにする

以前、 metaタグをつかって検索結果に表示されなくなる方法 について記事を書きましたが、今回はルートディレクトリにファイルをアップすることでクローラにお帰り頂く技を紹介します。 アップするファイル User-Agent: * Disallow: /こちらのファイルを rob…

かっこいいね!ボタン

( )

marqueeタグでテキストをスクロールさせる

今更ながら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/" /> もう一個カラーコードをつける…

はじめてのWindowsストアアプリづくりではまったところメモ

HTML5とJavaScriptでもアプリがつくれるということで取り組んでみました。 用意したもの Windows8.1のはいったPC Microsoft アカウント Visual Studio Express 2013 for Windows 作業メモ アカウント編 Microsoftアカウントは Windows デベロッパー センター…

iOS7のSafariでツールバーを非表示にする

<meta name="viewport" content="minimal-ui" /> と記述するだけで、ツールバーが非表示となり、UIが最小限になります。 ただし、初期表示が非表示になっているだけなのでステータスバーをタップするとツールバーが表示されます。</meta>

ローディングストーン

今更ですが、アジアンカンフージェネレーションがローリングストーンという曲をYouTubeにアップしていたことに気づいたのでつくってみました。ローディング・ストーンズ とか ライク・ア・ローディング・ストーン の横展開というか手抜き記事です。

Google Analytics に送信している内容を確認する

こちらの拡張 をChromeに導入すると、アナリティクスに送信した内容がコンソールに表示されるようになるので便利です。特にデバッグの際に効力を発揮します。Chrome Web Store - Google Analytics Debugger

httpsのページにはてブボタン(はてなブックマークボタン)を設置する

基本的には、こちらのページ のページのアドレスにhttpsからはじまるURLを入力すればOKです。httpからはじまるページでつくったはてなブックマークボタンは、 画像を http://b.st-hatena.com/images/entry-button/button-only@2x.png から、 JavaScriptを ht…

ずーしーほっきー.みんな

JavaScriptを一部分、ほんのちょっとだけ担当しました。ずーしーほっきーファンによる ずーしーアプリ まとめページ

iTunesプレビューのアートワークの画像を大きめで取得する

例えばこのアプリのアートワークを大きめの画像で取得したい場合。ずーしーほっきーのリフティングFumitaka KIMIZUKAソーシャルネットワーキング無料 1. Chromeで該当ページを開く 2. アートワークを右クリックして「要素の検証」を選択 3. デベロッパーツー…

Smart App Bannerを表示する

<meta name="apple-itunes-app" content="app-id=853099497" />というメタタグ1つで、スマートにアプリのバナーが表示されるようになります。 mobile Safari限定です。</meta>

ライク・ア・ローディング・ストーン

ローディング・ストーンズ が思いのほか好評だったのでForkしてつくってみました。 演出はつかいまわしです。

ローディング・ストーンズ

ローディング中にジャンピン・ジャック・フラッシュが流れます。 ※ PC限定 ちょっとした解説 音はYouTubeから引っ張ってきています。 ローディングの演出は基本的にはCSSアニメーションで行い、メーターが溜まっていくところのみJSをつかっています。

↓ の投稿いいね!

この投稿のしたに表示されている記事、すばらしいですね!

IE8でもhtml5のタグをつかう方法

html5shiv をつかうことが多いですが、必要な要素をcreateElementするだけでもとりあえずレンダリングはされるようになります。例えば、sectionタグを使えるようにしたかったら、レンダリングされる前に、 document.createElement("section"); としておけばO…

jPlayer 作業メモ。

audioタグをつかって音のでるサイトをつくってみたものの、急遽IE8に対応しなければならなくなったりすること。そんなことってありますよね。今回はjPlayerをつかって、audioタグがつかえる環境ではaudioタグで、つかえない環境ではFlashで音源を再生してみ…

base64をつかってIE8でも透明な要素にマウスイベントを振る

今更ですが、この現象( 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"); })(); こんな感じで実装しております。

Audioタグをつかってみよう。

HTML5から導入されたAudioタグ。 非常に便利なのですが、ブラウザによって扱えるオーディオの種類が違います。 Chromeでは.mp3ファイルを、FireFoxでは.oggファイルを読み込みたかったので、下記のようなコードを書いてみました。 音源までのパス(拡張子な…

逆に2分かけて表示されるページをつくろう。

以前 は2分で消えるページをつくりましたが。今回は逆に2分かけて表示されるページをつくってみました。 カップラーメンよりも、たけしの挑戦状の地図よりもはやくできあがります。 注意事項 やっぱりスピーディーに実装するためにCSSアニメーションでつくっ…