HTML
こちらのフォーム にURL を入力するだけでGoogleさんに評価していただけることを教えてもらいました。お手軽ですね。PageSpeed Insights こういった評価サービスを見つけたとき、紺屋の白袴になっていないか 自分自身を評価させてみる のがライフワークにな…
Jade p | へへい。 br | へへへい。 br | へい。へへい。 HTML <p>へへい。<br />へへへい。<br />へい。へへい。</p> これで見やすいJadeのできあがりです。
Android標準ブラウザで長押しによる画像の保存を防ぎたく、いろいろ試してみました。 機種によっては背景画像すらも長押しで保存できてしまうので意外に大変です。背景画像にしても、デフォルト動作を切っても、イベントを受け取らないようにしても、上にDIV…
みごとに化けました。対策探してます。
Jadeとは Jade is a terse language for writing HTML templates.訳） ジェイドは、HTMLテンプレートを作成するための簡潔な言語です。http://jade-lang.com/ 導入方法 npm install jade --globalなんともらくらくでインストールできます。そう。npmがあれば…
qiita.comhttps://bpush.net/早速 こちら を試してみました。 (function(d,s,ns){ var ns = d.createElement(s); ns.async=1;ns.src="//bpush.net/connect/button.js"; var s0=d.getElementsByTagName(s)[0]; s0.parentNode.insertBefore(ns, s0); })(docume…
先日Googleが「サイトがスマートフォンに最適化されているかどうかを検索順位に反映する」的な発表をしました。サイトがスマートフォンに最適化されているかどうかは こちら から簡単に調べることができます。Mobile-Friendly Test - Google Search Console …
Web Componentsをつかって嘘をマークアップするためのlieタグをつくりました。 JavaScript (function(doc) { "use strict"; doc.registerElement('k-lie', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { if …
前回のserifタグkimizuka.hatenablog.com に続いて、今回はpushタグをつくってみました。 クライアントに ここをプッシュして欲しいんだよね。 とか言われたときに、つかいましょう。 JavaScript (function(doc) { "use strict"; // エレメントが生成された…
kimizuka.hatenablog.com kimizuka.hatenablog.com以前、タグの説明をするときに、「」が台詞を表すタグのようなものという話をしました。 マークアップに使う記号をタグと呼びます。 タグで囲まれた文章は意味がある文章になるわけです。例えば、 四郎くん…
スマフォだけではなくRetinaディスプレイ搭載のPCもあふれる昨今。 SVGの需要がますます高くなってくるのではないでしょうか。 そこで今回は、きたるべく大SVG時代に乗り遅れないように簡単にブラウザにSVGを表示させてみましょう。 SVGとは Scalable Vector…
いつもつかっている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>
Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。 DEMO http://jsrun.it/kimmy/reader ※ iPhone の Safari で御覧ください つかいかた URLにアクセスするとURLバーに 「Reader View Available」と表示されます。URLの左側のリ…
ヘッダー内で <meta http-equiv="X-UA-Compatible" content="IE=edge"> と指定しましょう。 http-equiv="X-UA-Compatible" content="互換モードの際の指定"という形で指定でき、 IE=edgeでIEの最新バージョンの標準モードを指定できます。</meta>
検索結果にこのブログの表示を許可する これを許可していないと Twitter Cards の バリデートが通りません。 パスワード認証を設定をOFFにする パスワード認証をかけていると Facebook の OGP が自分が設定したものになりません。 単純なことですが、公開時…
1. ツール > Web 開発 > 開発ツールを表示 を選択2. 歯車マークを選択3. 3Dビューにチェックをいれる4. 歯車マークの左隣の方にあるキューブみたいなボタンを押す5. ドラッグしたりしてページをぐるぐる回す 以上、なんかたぶんこんな感じです。
Chromeのアドレスバーに下記URLを打ちこめば一覧が確認できるのでそこから削除すればOKです。 chrome://appcache-internals/ 昔はアプリケーションキャッシュを消すのも一苦労だった気がしますが、とても便利な世の中になりましたね。
IEとかもろもろを考えると、iframeのcontentWindowにアクセスするのがベストな気がしています。 その際、iframeのonloadを待たないとうまくいかないのでご注意を。 JavaScript (function(win, doc) { "use strict"; var iframe = doc.getElementById("iframe…
http://kimizuka.github.io/ http://kimizuka.github.io/GitHubページをつくってみました。こちら を見ながら進めればなにも問題なくつくることができますが、一応手順を記載しておきます。 ユーザーページのつくりかた username.github.ioというプロジェク…
いつも忘れてしまうのでメモしておきます。 http://{ユーザー名}:{パスワード}@{http://以下のURL}で埋め込めます。例えば、ユーザー名: kimizuka パスワード: tohohoでhttp://kimizuka.fm にアクセスしたかったら、 http://kimizuka:tohoho@kimizuka.fmとな…
<input type="range" value="0" min="0" max="100" step="1" /> 見た目はブラウザに依存しますが、これだけで簡単にUIがつくれます。value属性で初期値、 min属性で最低値、 max属性で最大値、 step属性でステップ数を設定できます。イベントも簡単に貼ることができて非常に便利な存在です。 JavaScript var slider = doc…
基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…
<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>
ページをクリックするたびにAudioを再生しようと思い、 (function(win, doc) { "use strict"; var audio = new Audio("./audio.mp3"); // localhost上のファイル document.addEventListener("click", function() { audio.currentTime = 0; // 再生位置を先頭…
AndoroidでCanvasをさくさく動かすためにいろいろ検証したことを一旦メモしておきます。 ※ Android 4.2.2 GALAXY NEXUS にて検証。 Canvasサイズが小さいほどパフォーマンスが良い 当たり前といえば当たり前なのですが、Canvasの大きさは最低限にしておいた…
iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告多少問題はありましたが、Safariの表示領域を広くつかう手段としては有効だったminimal-ui。しかし、 iOS 8 Release Notes には、 The minimal-ui viewport property is no longer supported in i…
Googleカスタム検索エンジンを調べてみました。 こちらのサイト から簡単に作成することができます。 (function() { var cx = '016617070659792596056:uixp4xttcky'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.asy…
LINE Developersこちらのページから簡単に設置できる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 Developers 記述例より引用 が。 間違えて aタグ の target を _blan…
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 で販売できる（会議参加者がダウンロードする） という…
