みかづきブログ その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のできあがりです。