HTMLファイ部のほんだです。

気づきTips! Σ(・ロ・)

カヤックの中でもHTML5のWebフロントエンド実装を担当する
エンジニアを集めた部署「HTMLファイ部」では、
制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。

通常は、

1. 制作で何かわからないことがでた

2. Google等で検索して解決の糸口をさがす

3. こんな方法があったのか〜 と気づきを得る

というフローでスキルアップしていくことがもっぱらだと思うのですが、
学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。
カヤックHTMLファイ部では、

1. みんなで蓄積したTipsをざぁっと読む

2. こんな方法があったのか〜 と気づきを得る

3. 制作の際に導入していく

というフローを繰り返し実践していくことで、
検索では気づけないことを学び、実装力アップを図っています。

この記事では、そんなHTMLファイ部の気づきTips集を公開しちゃいます!
(※ 実装経験のある中級者向けの記事となっております)

マークアップ編

<br>をdisplay:noneすると Σ(・ロ・)

<br>をdisplay:noneすると、改行を消すことができます。
最近はPC/SPサイトを1ソースで作成することも多いですよね。
画面サイズによって改行の位置を変えたい!といった時に便利な技です。
参考ページ:http://jsdo.it/calmbooks/qCzf


CSSで縦位置センタリング①(display:table-cell) Σ(・ロ・)

一筋縄ではいかない、要素の縦位置センタリング。
display:table-cellを使った方法です。
要素の高さに依存せず、センタリングできます。
参考ページ:http://kimizuka.hatenablog.com/entry/2014/03/16/233158


CSSで縦位置センタリング②(position:absolute) Σ(・ロ・)

position:absoluteの場合でも縦位置センタリングできる方法です。
要素の高さ指定は必要です。
参考ページ:http://dskd.jp/archives/35.html


Sass/SCSSで色の調節が行える関数 Σ(・ロ・)

明度を調節できるlighten()/darken()や、透明度を調節できるtransparentize()という関数があります。
使いどころによってはめっちゃ便利!
参考ページ:http://www.webopixel.net/html-css/771.html


CSS calc()で複雑なサイズ指定 Σ(・ロ・)

%とpxを併用して指定したい時などに便利です。徐々に使える環境も増えています。
参考ページ:http://negimemo.net/2364


#topにするとページトップへ移動する Σ(・ロ・)

idが"top"の要素がなくてもハッシュを#topにすると、ページトップに移動します。
参考ページ:http://jsdo.it/calmbooks/kmi5


JavaScript編

JS内で文字列を改行したい Σ(・ロ・)

JS内で長い文字列を読みやすく改行したい時ってありますよね。
意外と一筋縄ではいかず、色々な方法があるみたいです。
参考ページ:http://kimizuka.hatenablog.com/entry/2014/09/12/095957


配列の中の連想配列をキーでソートする Σ(・ロ・)

sort()メソッドで連想配列をソートする方法。
参考ページ:http://kimizuka.hatenablog.com/entry/2014/05/19/000000


配列の中で1番大きな値のインデックスを取得する Σ(・ロ・)

indexOf()とMath.max()をうまく使います。
参考ページ:http://kimizuka.hatenablog.com/entry/2014/09/18/230000


jQueryのfilter()は判定式を渡してフィルタリングできる Σ(・ロ・)

jQueryのfilter()は、セレクタを渡すのが基本的な使いかたですが、
判定式の関数を渡すことで、より便利に使えます。
参考ページ:http://nanoappli.com/blog/archives/4649


プライベートブラウジングの検出方法 Σ(・ロ・)

プレイベートモードだけで問題が起こる!なんてことがたまにあると思います。
検出不可能と思われたプライベートモードですが、(ブラウザごとに異なる)変化するプロパティを見て検出できます。
参考ページ:http://please-sleep.cou929.nu/detect-private-browsing-mode.html


API編

音声合成API Σ(・ロ・)

テキストを読み上げてくれるAPIです。
音声認識APIのほうはわりと使われているようですが、
こっちはあまり使われていない印象・・
Chromeだけじゃなく、なんとMobile Safariでも使えます。
参考ページ:http://jsdo.it/kimmy/69GV


フルスクリーンAPI Σ(・ロ・)

ページをフルスクリーンにできるAPIです。
参考ページ:http://jsrun.it/calmbooks/saruFull


Web Messaging API Σ(・ロ・)

クロスドメインでiframe間の通信を行う場合などに使えます。
参考ページ:https://developer.mozilla.org/ja/docs/DOM/window.postMessage


バイブレーションAPI Σ(・ロ・)

スマホをブルブルできるAPIです。
まだ対応している環境はごくわずかです。
参考ページ:https://developer.mozilla.org/ja/docs/Web/Guide/API/Vibration


WebGL、GLSL編

GLSL powに負の値を入れてはいけない Σ(・ロ・)

動作未定義。PCではよしなに対応してくれていますが、
特定のAndroid端末だとバグるようです。
参考ページ:https://www.opengl.org/sdk/docs/man/html/pow.xhtml


GLSL continue がIE11で動かない Σ(・ロ・)

for文などをスキップさせるcontinueがIE11のGLSLでは動きません
なんでも、IE11ではGLSLのバージョンが0.94と、他と比べて低いみたいです。
参考ページ:http://qiita.com/cx20/items/39826348a059a2f235ba


開発・デバッグ編

Browserify Σ(・ロ・)

node.jsのrequireをクライアントJavaScriptで実現してくれるnpmモジュールです。
依存関係を気にせず他ファイルを読み込めるのが便利です。
参考ページ:http://qiita.com/makotot/items/d524941fc6b8b4493de2


Chromeでキャッシュ削除&ハードリロード Σ(・ロ・)

開発中は、キャッシュを削除したい!ということはしょっちゅうですが、
なかなか消えないしつこい汚れ(キャッシュ)ありますよね。(特にjsで動的に読み込んだファイルとか・・
この方法できれいに汚れをおとしましょう。
参考ページ:http://kimihiro-n.appspot.com/show/86002


すぐに長さを測りたい Σ(・ロ・)

Mac限定ですが、スクリーンショット機能「cmd + shift + 4」で
サイズをすぐにどこでも測れます。
参考ページ:http://hamachan.info/mac/kihon/screen.html


すぐに色を調べたい Σ(・ロ・)

Macの標準搭載アプリ「Digital Color Meter」を使いましょう!
参考ページ:http://tokyo.secret.jp/macs/digi-color.html


注意!編

IEでは透明なdivにイベントは振れない Σ(・ロ・)

背景に透明な画像を指定することで解決できます。
参考ページ:http://kimizuka.hatenablog.com/entry/2014/03/21/000000


iOS8 Mobile Safariでzoomプロパティが無効に Σ(・ロ・)

Retina対応やViewport関連でzoomを使ってサイトをつくったことのある人は注意かも。
参考ページ:http://roka404.main.jp/blog/archives/110


jQueryのdata()メソッドはデータ属性を取得するメソッドではない Σ(・ロ・)

jQueryのdata()メソッドには実は色々な使い方があります。
きちんと理解して使わないと、思わぬところではまることも・・
参考ページ:https://w3g.jp/blog/jquery-data-attr-cache


cursor:url();での指定は絶対パスで Σ(・ロ・)

IEだと相対パスがCSSファイルではなく、HTMLからのパスに
なってしまうので、絶対パスで指定するのが無難
参考ページ:http://zero.css-happylife.com/property/cursor.shtml


6to5はIE8で動かない Σ(・ロ・)

ES6を使えることで話題のaltJS「6to5」ですが、IE8では動かないようです
Object.createをPolyfillすることで動くようになります。
参考ページ:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create


うんちく編

1文字のドメインは存在する・・ (・ロ・)?

中国のGoogleでは、「g.cn」を採用しています。
ドメインのルールはトップレベルドメインによって異なるようです。
参考ページ:http://web-tan.forum.impressrd.jp/e/2009/03/05/4419


margin-start、margin-end・・ (・ロ・)?

margin-top、margin-left などはよく使いますが、
margin-start、margin-end などは見慣れないという方が多いんじゃないでしょうか。
参考ページ:http://kojika17.com/2012/08/margin-of-css.html


引数の最大数・・ (・ロ・)?

JavaScriptの関数は最大 255 個の引数を持てます。
参考ページ:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope


IEの画像補間方式・・ (・ロ・)?

画像の補間精度は、バイキュービック(滑らか) > バイリニア(やや滑らか) > ニアレストネイバー(ジャギジャギ)の順です。
IE6 : 拡大縮小はニアレストネイバー一択
IE7 : ms-interpolation-mode登場でバイキュービック補間可能に
IE8 : 画像の補間はデフォルトでバイキュービックに
IE9 : ms-interpolation-mode廃止
となっています。
画像の補間方式は環境によって異なるので注意です。
参考ページ:http://goo.gl/9Bcebs


Dateオブジェクトが扱える範囲は・・ (・ロ・)?

1970年1月1日の前後 273,785年です。
よって、275,755年まで扱えることになります。
275,755年問題が起きるかもしれませんね。
参考ページ:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope


まとめ

いかがでしたでしたか?
へー ほー こんな方法があったのかー
と思えるTipsが1つでもあれば幸いです。

カヤックではHTML5エンジニアをひきつづき募集中です!Σ(・ロ・)

HTML5飯