読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

Androidでviewportがうまく効かない時は動的に設定すると解決することがある

<meta name="viewport" content="width=device-width,user-scalable=no"/> と設定すると一部Androidで拡大された状態で表示されてしまうのですが、 <meta name="viewport" content="width=device-width"/> メタタグの時点ではwidthのみ決めておき、 <script> document.querySelector("[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1, use…</meta></meta>

localhostとAudioタグとcurrentTime

ページをクリックするたびにAudioを再生しようと思い、 (function(win, doc) { "use strict"; var audio = new Audio("./audio.mp3"); // localhost上のファイル document.addEventListener("click", function() { audio.currentTime = 0; // 再生位置を先頭…

Canvas 検証メモ

AndoroidでCanvasをさくさく動かすためにいろいろ検証したことを一旦メモしておきます。 ※ Android 4.2.2 GALAXY NEXUS にて検証。 Canvasサイズが小さいほどパフォーマンスが良い 当たり前といえば当たり前なのですが、Canvasの大きさは最低限にしておいた…

minimal-ui 調査

iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告 iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告|Web制作 W3G多少問題はありましたが、Safariの表示領域を広くつかう手段としては有効だったminimal-ui。しかし、 iOS 8 Release No…

Googleカスタム検索エンジン調査

Googleカスタム検索エンジンを調べてみました。 こちらのサイト から簡単に作成することができます。 (function() { var cx = '016617070659792596056:uixp4xttcky'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.asy…

LINEで送るボタンは別タブで開くべからず

LINEで送るボタン|メディア運営者の方へ 設置方法|LINEで送るボタンこちらのページから簡単に設置できるLINEで送るボタン。 WEBページにであれば aタグだけでも手軽に設置できます。 <a href="http://line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a> 設置方法|LINEで送るボタン 記述例より引用 が。 間違え…

CSSでメッセージアプリ風のUIを再現する

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>

議事ロックをつくろう

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

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アニメーションでつくっ…

2分で消えるウェブページをつくろう。

おかげさまでブログをはじめて100日が経過しました。 アナリティクスで確認したところ、ブログの平均滞在時間は2分13秒でした。 なので今回はの記事は2分13秒かえてだんだん消えていき、最終的にはすべて消えてしまう仕様にしてみます。 とりあえず、スピー…

はてなブログでカスタムURLを設定しよう。

先日投稿した この記事 のURLが、 http://kimizuka.hatenablog.com/entry/http%3A//cdn-ak_f_st-hatena_com/images/fotolife/k/kimizuka/20140120/20140120101050_png_1 となっていて、「なんだかいつもと違うなぁ」「なんだかおかしいなぁ」「なんだかいつ…

インタラクティブな投稿を試してみよう。

google+のインタラクティブな投稿機能を試してみました。

metaタグをつかって検索結果に表示されないようにしよう。

Googleさんはサイトを巡回してページをランクづけしています。 そしてページランクが検索結果に反映されるのです。 まあ、ミシュラン調査員が店を回ってランク付けしていくようなものでしょうか。ときには、検索結果に表示したくないサイトをつくるときもあ…

ブログを勝手に書き換えてみよう。

今回のブログの本文は誰でも編集可能です。 テキストをクリックして適当に編集したあとに保存ボタンを押せば、つぎにアクセスした際も編集後の文章が表示されます。 結果はブラウザごとに保存されるため、別のブラウザには編集結果が反映されませんのであし…

スタイルシートをhtmlの外に追いだそう。

前々回 は、 <html> <head> <meta charset="UTF-8" /> <title>僕が考えた最強の打線。</title> <style> li {color: red;} </style> </head> <body> <h1>僕が考えた最強の打線。</h1> <p>僕が考えた最強の打線を発表します。</p> <ol> <li>遊 小坂</li> <li>二 西岡</li> <li>一 福浦</li> <li>右 サブロー</li> <li>指 初芝</li> <li>捕 里崎</li> <li>三 今江</li> <li>左 大塚</li></ol></body></html>

セレクタをつかってタグに呼びかけよう。

前回 は、文量の関係で、スタイルの記述を、 スタイルをあてたい要素名 {プロパティ: 値;}と説明してしまいました。我ながら誠に遺憾です。正確には、 セレクタ {プロパティ: 値;}というように記述します。 なので今回はセレクタについて説明します。 セレク…

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

前回まで のあらすじ。一昨日の記事 内で、突然姿を表した styleタグ 。 登場するや否や速攻で大活躍。彼は味方なのか敵なのか。 あと、突然こんなはじまりかたをして、この記事はどうやって着地するのだろうか。 乞うご期待であります。はい。そんなこんな…

要素の親子関係を探ってみよう。

前回 の説明の中で、突然 親の要素 という言葉がでてきました。今回は要素の親子関係、兄弟関係について説明したいと思います。 親要素・子要素 以前 解説しましたが、htmlではタグの中にタグを記述することができます。 すなわち要素の中に要素をいれること…

マークアップをはじめよう。 style属性編

前回 はstyle属性をさくっとした感じで解説しました。間が開いてしまったのでさくっと復習しましょう。 前回の復習 スタイル属性とはすべてのタグが持っている属性で、スタイルを書き込む為の場所です。 タグのスタイル属性にスタイルを書き込むことによって…

style属性で文章の見た目を整えよう。【font-size, color 編】

前回 は架空のタグと架空のstyle属性のプロパティでスタイルとはなんたるかを解説しました。今回は実際に存在するプロパティを変更してみましょう。文章は前回と同じものを使いますが、一旦pタグでマークアップしておきます。 <p>「全くアメリカ人好みの浅まし</p>…

style属性で文章の見た目を整えよう。

前回 、 前々回 はタグを使って文章に意味を与えていきました。 今回はstyle属性を使って、文章の見た目を調整していきたいと思います。 style属性とは タグの見た目を調整する為の属性です。以前、「」が台詞を表すタグのようなものという話をしましたが、…