みかづきブログ その3

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

HTML

Pug(Jade)でfor文を書く 😎

単純にfor文を書きたければ、 Pug - for (var $i = 0; $i < 10; ++$i) { .box - }が HTML <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>

Googleハングアウトの入力ソースを切り替える

最近Googleハングアウトを使う機会が多いのですが、カメラソースを変更しようと思ってURLバーのカメラアイコンをクリックしたのですが、切り替えることができません。設定から普通に変更できました。

はてなブログの読者になるボタンのリンク

http://blog.hatena.ne.jp/#{USER_ID}/#{URL}/subscribeで読者になるか否かを選択できる画面に遷移する。なので、 http://blog.hatena.ne.jp/kimizuka/kimizuka.hatenablog.com/subscribeこちらのURLでこのブログの読者になるか否かの画面に遷移。 リンクに…

Androidの input type="file" accept="image/*" 事情

kimizuka.hatenablog.comこちらの問題 につづいてもうひとつ問題にぶつかりました。 やりたかったこと Androidからローカルの画像ファイルをアップロードするフォームをつくりたい できれば、画像以外のファイルは上がらないようにしたい さらにできればjpg…

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様

iOS10でビデオをインライン再生する kimizuka.hatenablog.comこれまで、iPhoneのmobile Safariでビデオをインラインするためには、 videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、 iO…

はじめてのtemplateタグ

いままではHTMLでテンプレートを使いたい場合は、scriptタグをつかっていたのですが、templateタグの存在に気がついたのでこれからは積極的につかっていこうと思いました。 ただし、IEとAndroidの対応状況が不安なので、まだ実践では控えておこうと思います…

0円(無料)でhttpsの環境を手に入れたい!と思った時につかえる3つのサービス

Chromeからカメラにアクセスしたいとか、TwitterCardsを検証したいとか、og:videoを検証したいとか、iOSのAPIでつかいたいとか、いろいろと理由はあるでしょう。 そんな時に僕がつかっているサービスを3つ紹介します。 GitHub Pages 独自ドメインでなくても…

iOS用のカスタムDatePickerをつくりました

See the Pen Custom DatePicker for iOS by kimmy (@kimmy) on CodePen.フォームをCSSでカスタムするのはなかなか骨が折れる作業なので、 inputタグを透明にしてしまい、上にDOMを置くことで編集しました。 iPhoneでご確認ください。 http://codepen.io/kimm…

Safariのページをアプリ化してホーム画面に登録した際、URLバーを非表示にするとキャッシュがめっちゃ強くなる

結論から書くと、めっちゃキャッシュが強くなります。 URLにクエリをつけたりハッシュをつけたりしてもキャッシュがクリアされません。 なんならホーム画面から削除して登録しなおしても、Safariのキャッシュ削除してもキャッシュが消えませんでした。 キャ…

iOS9.0でapple-mobile-web-app-status-bar-styleが効かない!

ホーム画面に登録したウェブページのステータスバーの色を変更しようと、 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> と指定しても効かずに、「何故だ!?」と思っていましたが、iOS9.3にアップデートしたら効くようになりました。</meta>

ナウでヤングなviewportの書き方調査 & まとめ 2015 春

結論 結論を先に書いておくと、当面は、 ページの拡大を止めないとき <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> ページの拡大を止めるとき <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" /> と書いていこうと思います。 viewportと…</meta></meta>

iOS9でviewportがおかしいときはshrink-to-fit=noを設定すると良いらしい

初期表示時にがたついたり、initial-scaleがうまく効いてない感じのとき、 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1" /> を、 <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" /> という感じにすると治ることがあるようです。ページ内に巨大なDOMがあった際、shrink-to-fitを設定していないと、巨大なDOMの大き…</meta></meta>

お名前.comでドメインを取得したドメインを使ってはてなブログを独自ドメインにサブドメインを設定する

DNSを設定 DNSレコード設定 完了通知 を待つ しばらく待つ(しばらくは独自じゃない方のURLリダイレクトされる模様) 基本的にはこれだけでOKです。順をおって説明していきます。 詳しくは こちら に書いてありますが、お名前.comのDNS設定だけ詳細を記して…

Tumblrに独自ドメインを設定する(お名前.com 編)

www.tumblr.comこちらを読めばすべてがまとまっています。 やるべきこと 2つのレベルがある場合 (mywebsite.comなど) ドメインのAレコード(IPアドレス)を66.6.44.4に指定してください。 3つ以上のレベルがある場合 (www.mywebsite.com または blog.mywebsi…

Apacheでバーチャルホストを設定する

/etc/httpd/conf/httpd.confを編集します。 <VirtualHost *:80> ServerName kaze.kimizuka.fm # 設定したいURL DocumentRoot /var/www/sites/kaze # ディレクトリの位置 DirectoryIndex index.html # URLにアクセスがあったときに返すファイル </VirtualHost>編集が終わったら再起動します。 …

faviconにbase64の画像を設定する

ここの部分ですね。faviconは.icoファイルをアップすることが多いですが、.icoファイルをbase64にしてもChrome、FireFox、Safariでは表示されました。 Edge、IE11では表示されませんでした。 HTML

GulpをつかってHTML, JS, CSS, 画像を圧縮するタスクをつくる

最近、ひさしぶりタスクランナーなしでコーディングをしました。タスクランナーなしで作業するときは、JSHint, a JavaScript Code Quality Tool や The W3C Markup Validation Service でバリデートをかけたり、jshint.comvalidator.w3.org/packer/ 、 CSS M…

はてブされた際に「⚠このページには別のURLが提示されています。」と表示して別のURLをサジェストする

YouTubeとかをはてブした際に出るこの画面。 ずっと憧れていましたが、どうやって実装するのかは深く考えてきませんでした。しかしひょんなことから実装方法を知りました。hatena.g.hatena.ne.jp <link rel="canonical" href="ページの正確な正規化された URL" /> といれるだけで良いんですね。ただし、このタグははてブのた</link>…

スマートフォン向けサイトに設置するフォームを設置するときの小技まとめ

最近フォームをコーディングすることがとても多いのでまとめておこうと思います。 スマートフォンでデフォルトにあたっているスタイルをリセットする webkit系のブラウザはフォームにいい感じのスタイルを当ててくれています。 いい感じではあるんですが、自…

Jadeでid属性、class属性に変数をつかう

p##{hoge}.#{fuga} piyo では駄目で、通常の属性と同じように、 p(id=#{hoge} class=#{fuga}) piyo という感じで渡せばOKでした。

Grunt作業メモ その3

kimizuka.hatenablog.com kimizuka.hatenablog.com 以前、GruntからGulpに移行しかけたんですが、なんだかんだでGruntに戻ってきてしまいました。 Jadeも導入して、Gruntファイルを更新したのでメモを残しておきます。 ディレクトリ構成 以前のものから、Jad…

Googleでキャッシュを確認する

cache:http://kimizuka.hatenablog.com/entry/2015/03/23/000000 という感じで先頭に cache: をつけたものを検索するとGoogleに残っているキャッシュが表示されます。 URLを覚えていれば(運が良ければ)サーバ上から消えてしまったサイトでも確認できます。…

最近気になったウェブページ 7選

最近は以前より積極的にネットサーフィンしておもしろいサイトを探すようになりました。 僕が最近見つけただけで、全然最近公開されたものじゃないサイトもありますが、まとめておきます。 Kitasenju Design | 北干住デザイン Kitasenju Design | 北干住デザ…

HTMLの特殊文字の使いどころを考える

サイト上で平方センチメートルをつかうときは <p>cm<sup>2</sup></p> cm2という感じでsupタグをつかって対応していたのですが、プルダウンメニュー内に実装する機会が出てきたときに困りました。もろもろ考えた結果、HTMLの特殊文字をつかって解決しました。 <select> <option value="">指定なし</option> <option value="S1">100&#13</option></select>…

Edgeのユーザーエージェント

Windows10がリリースされたので早速アップグレードして、EdgeのUA(User Agent)を調べてみました。 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240僕の環境ではこう…

Jadeで要素の中にDOMとテキストノードを入れる

HTML <p>僕は<strong>こんにちは</strong>と言いました。</p> みたいな感じで書き出したいときは、 Jade p 僕は strong こんにちは | といいました。と書けばOKです。 個人的には、 p | 僕は strong こんにちは | といいました。の方が見やすくて好きです。

Androidでカメラを起動するボタン

inputタグ の accept属性に capture=camera をつけておくとAndroidでは即カメラを起動してくれます。(iPhoneではカメラロールから選択するかカメラを起動するか選択させるUIが表示されます) HTML <form class="inner"> <input type="file" accept="image/*;capture=camera" /> </form> DEMO

Pug(Jade)・Coffee・SCSSに逆変換するウェブサービスまとめ

なんだか本末転倒のような気もしますが、覚えておくと既存サイトをリニューアルする際などに便利です。 HTML → Pug(Jade) html2jade.org JavaScript → Coffee js2.coffee CSS → SCSS css2sass.herokuapp.com

ページのユーザーエクスペリエンスと表示スピードの感じをGoogleさんに伺ってみる

こちらのフォーム にURL を入力するだけでGoogleさんに評価していただけることを教えてもらいました。お手軽ですね。PageSpeed Insights こういった評価サービスを見つけたとき、紺屋の白袴になっていないか 自分自身を評価させてみる のがライフワークにな…

Jadeで改行する

Jade p | へへい。 br | へへへい。 br | へい。へへい。 HTML <p>へへい。<br />へへへい。<br />へい。へへい。</p> これで見やすいJadeのできあがりです。

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ではこの設定を乗り越えてページをスクロ…