Jekyllでブログ始めます
初めまして、Yuhiiskこと五十川です。ここでブログを書いていくことにしました。フロントエンドエンジニアなので、主にWebに関する情報をお届けしていきたいと思います。フィードバック等ありましたら、どしどしお願いします！今回は手始めとして、今更なのは重々承知の上で、このブログを構築したjekyllについて少し触れておきたいと思います。jekyllとGithub...
View ArticleClik here to view.
最近のDOMの取得について整理してみた
自分は普段からJavascriptを書く機会が多いのですが、Webサイト構築ではDOMを扱うことがほとんどです。 最近はjQueryなどのライブラリを利用する方が多いのではないでしょうか。今回はDOMを取得する際のパフォーマンスに着眼して、今一度整理してみたいと思います。とりあえずテストしてみたJSPerfで要素を取得するメソッドをそれぞれ追加しました。basic DOM selector test...
View ArticleClik here to view.
MacでRubyをインストールする
WWDCの朝、新しく発売になったMacbook Airを買いました。自分で買った初Macです。使うのは初めてじゃないので、特に苦労はしていないのですが、...
View ArticleSafariでmp3が再生されない時がある
Mac Safari(v6.0.5)でaudio要素で指定したmp3が再生できないことがある。実はSafari5の時から発生していて、正直はっきりとした原因がわからなかった。結論から言うと、Safariのバージョンだったり、mp3ファイルのサンプルレートとかファイル自体にが関係ありそう。サンプルレートが 44,100 では初めの1回しか再生できず、 22,050...
View ArticleGoogle APIのDeveloper keyでハマったメモ
PHPでGoogle APIを使用した際に、 developer keyをリクエストに入れないといけないのですが、 API Console を探したものの見つからずグーグル先生に聞いたところ、こちらに載っていました。where i can get google developer key - Stack Overflowわかりづらい。。
View Articleスマホ向けオーディオスプライトライブラリを作った
仕事でスマホで音声再生をすることになって、 単音なら大丈夫かーと思っていたら、仕様的に何個も音を鳴らすことになり、 いろいろ試した結果、オーディオスプライトでの実装が一番安定していたので、 ここのスクリプトを元に、単音再生用の汎用的なJSライブラリを作った。audioSprite.js※サポートブラウザはiOS5+（mobile safari）, Android2.3+（標準ブラウザ）...
View Articleツイートボタンとかいいねボタンの再読み込み
ツイートボタンとかいいねボタンとかのSNS系のシェアボタンをAjaxなページで初期化したかったので、 調べてみたらちゃんと用意されていた。TwitterJavaScript Interfaces for Twitter for Websites | Twitter DevelopersHTML<!-- 事前にtwitter-widgetの読み込み...
View Articlefont-sizeの'％'指定をSassで自動生成
久しぶりの更新です。 Windows XPのサポート終了が4月に迫っていますが、時としてレガシーなIE（ここではIE8以下のこと）対応がなくなるのかと言われると、すぐにはなくならないと思います。...
View ArticleレスポンシブWebデザインにおける画像の配置方法
レスポンシブWebデザインで画像を配置する場合、「Fluid image」の考えに沿えば複数の配置方法があると思います。一般的なパターン<divclass="image"><imgsrc="path/to/image.jpg"/></div>.image{width:100%;/* 相対指定にする...
View ArticleRalisのメモ
今日覚えたことのメモController作成$ rails generate controller name テンプレート変数テンプレート変数の設定がだいたい必要。 Controllerクラスのアクションメソッド内でインスタンス変数として設定する。controllerdefview@msg='Hello,...
View Articleいつものphp.ini設定
いつもよくやるphp.iniの設定メモ。timezoneの設定[Date]; Defines the default timezone used by the date functions; Will be changed by MAMP to system timezonedate.timezone="Asia/Tokyo"...
View ArticleストレスフリーなGruntタスクの自動読み込み
Gruntfileの中でパッケージの読み込みを羅列して書くのが非常に面倒くさいと思うことがあります。特に後から追加したり、やっぱり使わなかったということが多々ありますよね。そこでGruntの設定に少しでも時間を取られないために読み込みを自動化します。通常の読み込みgrunt.loadNpmTasks('grunt-contrib-connect');grunt.loadNpmTasks('grunt...
View Articleゼロパディングのイケてる実装方法
ゼロパディングってよくやりますよね。特に時間を文字列で表す時とかに数値が10より小さい場合、01って感じで頭に0をつける実装。 日付とか数値から文字列にする場合、よく10より小さい数字の場合は0つけるみたいなif文で複雑になりがちですが、単に "0" + number.slice(-2)とすると、条件分岐が要らなくなるからスッキリ書ける。ということは2桁の時だけじゃなくて、3桁以上の時とかも使える。...
View ArticleIEの独自フィルターについて
IE対応、そしてその多くがIEの独自フィルターでハマることが多いです。【IE8,9】filterをかけると:hoverで不具合IE8でopacityが効かない時の対処法どちらも:hover擬似要素がらみですが、困ったときの備忘録でした。
View Articlez-indexをSassで管理する
今日はCSSのz-indexプロパティの上手な管理方法について書きます。 そもそもz-indexって管理が煩雑になりがちなんですよね。 オーバーレイする要素はだいたい10くらいかな？その上に重なるのは20にして…。モーダルは9999にしておくか、とか個人的には結構適当な感じで指定してしまっています。 そんな困った僕に素敵なソリューションがありました。Sassy Z-Index Management...
View ArticleAndroidでoverflow:scrollを使うとレイアウトが崩れる
スクロールバーが表示されるとレイアウト崩れする自体に遭遇。いろいろハマった結果 「絶対に使うな。」、この一言に尽きる。モーダルウィンドウ出して中でスクロールさせる、とかのUIデザインも始めに気をつけたほうがいいと思う。 今回はAndroid4~でモーダルウィンドウ全体が位置ズレしました。
View ArticleステップアップのためのJavascriptデザインパターン入門（１）
普段Javascriptをよく書いているのですが、設計が今の自分の弱点だなぁと思い、 積読になっていた JavaScriptデザインパターン - オライリー・ジャパンを引っ張りだして勉強したことを 紹介していきます。内容に関して何か間違いや問題があったらご指摘ください。デザインパターンとはデザインパターン -...
View ArticleステップアップのためのJavascriptデザインパターン入門（２） - コンストラクタパターン
前回は第1回目ということで、そもそもデザインパターンとはなんぞや？という話に触れました。 今回から具体的なデザインパターンについて紹介していきます。コンストラクタパターンコンストラクタ（Constructor）とはオブジェクトを作成し、初期化する関数のことです。 コンストラクタはJavascript以外の言語では「クラス」と呼ばれています。...
View ArticleステップアップのためのJavascriptデザインパターン入門（３） - モジュールパターン
前回はコンストラクタパターンについて紹介しました。 今回はモジュールパターンについて紹介します。モジュールパターン従来のJavascript以外でのモジュールパターンというのは、クラスにパブリックとプライベートの両方のカプセル化をもたらす方法でした。 しかし、前回Javascriptにはクラスの概念が無いということを書きました。...
View ArticleステップアップのためのJavascriptデザインパターン入門（４） - リビーリングモジュールパターン
今回はリビーリングモジュールパターンを紹介します。リビーリングモジュールパターンこのパターンはクリスチャン・ヘイルマンという人による、モジュールパターンを改良したパターンです。...
View Article
