みかづきブログ その3

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

HTML

Androidで長押しによる画像の保存を防ぐ

Android標準ブラウザで長押しによる画像の保存を防ぎたく、いろいろ試してみました。 機種によっては背景画像すらも長押しで保存できてしまうので意外に大変です。背景画像にしても、デフォルト動作を切っても、イベントを受け取らないようにしても、上にDIV…

Shift_JISでつくったページがFacebookのタイムラインで文字化けする

みごとに化けました。対策探してます。

はじめてのJade導入メモ

Jadeとは Jade is a terse language for writing HTML templates.訳) ジェイドは、HTMLテンプレートを作成するための簡潔な言語です。Jade - Template Engine 導入方法 npm install jade --globalなんともらくらくでインストールできます。そう。npmがあれ…

ブラウザ用PUSH通知サービス bpush を試す

Chrome - ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った - Qiitaqiita.comhttps://bpush.net/早速 こちら を試してみました。 (function(d,s,ns){ var ns = d.createElement(s); ns.async=1;ns.src="//bpush.net/connect/button.js"; var …

サイトがスマートフォンに最適化されているかどうか調べる

先日Googleが「サイトがスマートフォンに最適化されているかどうかを検索順位に反映する」的な発表をしました。サイトがスマートフォンに最適化されているかどうかは こちら から簡単に調べることができます。Mobile-Friendly Test ちなみに自分自身( https…

lieタグをつくろう

Web Componentsをつかって嘘をマークアップするためのlieタグをつくりました。 JavaScript (function(doc) { "use strict"; doc.registerElement('k-lie', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { if …

Web Components で pushタグをつくろう

前回のserifタグWeb Components で serifタグをつくろう - みかづきブログ その3kimizuka.hatenablog.com に続いて、今回はpushタグをつくってみました。 クライアントに ここをプッシュして欲しいんだよね。 とか言われたときに、つかいましょう。 JavaScri…

Web Components で serifタグをつくろう

hatsugenタグをつくろう - みかづきブログ その3kimizuka.hatenablog.com style属性で文章の見た目を整えよう。 - みかづきブログ その3kimizuka.hatenablog.com以前、タグの説明をするときに、「」が台詞を表すタグのようなものという話をしました。 マーク…

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

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

自分用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>

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

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

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

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

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

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

Firefoxでページを3D的に見て重ね順を確認する

1. ツール > Web 開発 > 開発ツールを表示 を選択2. 歯車マークを選択3. 3Dビューにチェックをいれる4. 歯車マークの左隣の方にあるキューブみたいなボタンを押す5. ドラッグしたりしてページをぐるぐる回す 以上、なんかたぶんこんな感じです。

Google Chrome に保存されているアプリケーションキャッシュを確認して削除する

Chromeのアドレスバーに下記URLを打ちこめば一覧が確認できるのでそこから削除すればOKです。 chrome://appcache-internals/ 昔はアプリケーションキャッシュを消すのも一苦労だった気がしますが、とても便利な世の中になりましたね。

同一ドメインのiframe内にアクセスする

IEとかもろもろを考えると、iframeのcontentWindowにアクセスするのがベストな気がしています。 その際、iframeのonloadを待たないとうまくいかないのでご注意を。 JavaScript (function(win, doc) { "use strict"; var iframe = doc.getElementById("iframe…

GitHub Pages をつかってウェブページを公開する

kimizuka.github.ioGitHubページをつくってみました。こちら を見ながら進めればなにも問題なくつくることができますが、一応手順を記載しておきます。 ユーザーページのつくりかた username.github.ioというプロジェクトをつくる ※ usernameは自分のユーザ…

URLにベーシック認証のID、パスワードを埋め込む

いつも忘れてしまうのでメモしておきます。 http://{ユーザー名}:{パスワード}@{http://以下のURL}で埋め込めます。例えば、ユーザー名: kimizuka パスワード: tohohoでhttp://kimizuka.fm にアクセスしたかったら、 http://kimizuka:tohoho@kimizuka.fmとな…

input type="range"をつかってスライダーUIをつくる

<input type="range" value="0" min="0" max="100" step="1" /> 見た目はブラウザに依存しますが、これだけで簡単にUIがつくれます。value属性で初期値、 min属性で最低値、 max属性で最大値、 step属性でステップ数を設定できます。イベントも簡単に貼ることができて非常に便利な存在です。 JavaScript var slider = doc…

iPhone、Androidでページスクロールを止める

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

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…