サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
blog.webcreativepark.net
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」 grunt-autoprefixerはベンダープリフィックスを後付けする為のGruntモジュールです。 たとえば次のようなCSSがあったとします。 .foo{ box-sizing: border-box; } ただしFirefoxなど一部のブラウザでbox-sizingを利用するにはベンダープリフィックスが必要です そういった場合にgrunt-autoprefixerを実行することで以下の様に必要なベンダープリフィックスを追加してくれます。 .foo{ -moz-box-sizing:border-box; box-sizing:border-box } さらに次のようなベンダープリフィックスを指定している場合も、 .foo{ -webkit-box-sizing:border-box; box-siz
Google Chromeのブレークポイント Google ChromeのデバッグツールにはJavaScriptの処理を一時停止させることができるブレークポイントという機能があるので利用方法を解説いたします。 まずは基本的な使い方から。ブレークポイントを利用したいページでデベロッパーツールを開き「Sources」タブを表示し、左メニューのSourcesタブを選択し、ブレークポイントを利用したいファイルを開きます。 次に一時停止させたいコードの行番号をクリックすると、行番号に青いマークが付きます。その後、スクリプトを実行するとJavaScriptのスクリプトがその行で停止します。 (ステップオーバー)のアイコンをクリックすると処理が1行づつ実行されます(正確にはちょっと違うけど)。 操作内容をアニメーションGifにしてみたのでご確認ください。 このようにコードを1行づつ実行し、現在の状態やソ
jQueryで指定されたイベントの定義場所を取得する方法 セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add attribute」から適当なidを指定します。今回は「js_debug」というidを指定しています。 次にデベロッパーツールの右上のアイコンからコンソールを開き以下のコードを入力しEnterを押します。 $._data($("#js_debug").get(0), "events"); Object->click->0の順番に開いていき、
grunt-webfontで書き出されるwebフォントの文字列を変更 Gruntで web フォントを管理するためのプラグイン「grunt-webfont」の書き出し形式をカスタマイズしてみました。 grunt-webfontの利用方法はMOLの「HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ — MOL」を参考にしてください。 ただし、このままでは「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.eot」や「myfont-b5fd89266afbbfbfc281a0ce9a5bf50e.ttf」といったランダムな文字列が追加されたweb フォントが出力されます。 このランダムな文字列はGruntのoptionsでhashes:falseを指定すると出力されなくなります。 webfont: { icons:
Sass/Compassでコンパイルするとカラーコードが色名になってしまう件 先日行われた「CSS Nite LP, Disk 32: Sass」で「コンパイルするとカラーコードが色名になってしまいます。」という質問を受けたので対応方法を解説します。 まず、どういった現象かというと以下の様なSassを記述すると、 $color1 : #FFF; $color2 : #FFFFFF; .div1{ color:$color1; } .div1{ color:$color2; } コンパイル後に書き出されるCSSは以下のようになります。 /* line 3, ../sass/style.scss */ .div1 { color: white; } /* line 6, ../sass/style.scss */ .div1 { color: white; } Sass側で変数から値を抜き出す
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
Google Chrome 32でスマホのエミュレーションを行う Google Chrome 32になってスマホなどのエミュレーションを行う方法がわからなくなっていたのですが、教えてもらったのでメモっときます。 追記:最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う Macなら⌘ + option + i、WindowsならF12でデベロッパーツールを表示。 右上の アイコンをクリックして設定画面を表示。Overridesにある「Show 'Emulation' view in console drawer」にチェックを入れて設定画面を閉じます。(2014/1/31追記) 上部のタブで「Elements」を選択。 右上のアイコンをクリックすると画面下部にウィンドウが表示されます。 右側の「Emulation」タブ
新MacBook ProにインストールしたCUIアプリ 新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。 Homebrew Mac用のパッケージ管理ソフト「Homebrew」。ターミナルから以下のコマンドを入力するとインストールできます。Gitがインストールされてないとインストールできないと思うので、事前にXcodeをインストールしておきましょう。(Homebrewのインストール中にコマンドラインツールのインストール画面が表示されると思います。) ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)" インストール後に以下のコマンドでインストールされたバージョンが確認できます。 brew -v rbenv Rubyのバージョン管理ソフト「
新MacBook ProにインストールしたMacアプリ24 数年使ったMacBook AirをMacBook Proに変更しました。いろいろなアプリをクリーンインストールしたのでインストールしたアプリをまとめて紹介します。 Google Chrome 最近は日常のブラウジングでも開発でもほとんどGoogle Chromeを利用しているので、まずはこれをインストールしないと始まりません。 Firefox 検証用などでたまに利用するのでFirefoxもインストール。 Thunderbird 7年近く使っているメールソフト。何度か他のメールソフトに乗り換えようかと思ったけど結局移行できず。スマホなどの他デバイス用にGmailと併用して使っています。 1Password これまで共通パスワードを使いまわしてたけど、昨年はAdobeとか情報流出が多くて心配になったので導入したパスワード管理ソフト。i
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
jQuery Advent Calendar 2013まとめ 本エントリーはjQuery Advent Calendar 2013の26日目のエントリーです。 jQuery Advent Calendar では22個のすばらしいjQueryエントリーが書かれている訳ですが、それを全部チェックするのがめんどくさい!といった方向けに昨年につづき反響が高かったjQueryエントリーベスト10を勝手にご紹介します。反響は集計が簡単なのではてなブックマークのブックマーク数で集計しました。 とりあえずjQueryのプラグイン作ってみる | Web | position: absolute; jQueryプラグインのメソッドパターン - to-R イベントデリゲートで理解するjQueryのonメソッド - to-R jQueryを使ったAjaxまとめ jQueryのstopメソッドとfinishメソッド
jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
File APIとAjax このエントリーはjQuery Advent Calendar 2013の 8日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 前回はdrag & dropでFileオブジェクトを取得する方法を解説しましたが、このままではサーバーサイドとの連携ができません。ですので、今回はAjaxを利用してFileオブジェクトをサーバーサイドに送信する方法について解説を行ないます。 そのままでは送信できませんので、 new FormData()を利用しFormDataオブジェクトを作成し、FormData.append()で送信内容を作成してAjax送信を行ないます。 $(".dnd").on("drop",function(e){ e.preventDefault(); var fd =
jQueryでdrag & drop このエントリーはjQuery Advent Calendar 2013の 7日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 前回はFile APIをファイルAPIを利用したリアルタイムプレビューを解説したので、今回はページなどにブラウザの外からファイルをドラッグ&ドロップしたファイルからFileオブジェクトを取り出す方法について解説を行ないます。 まず、次のように指定を行うと、指定された要素にファイルをdrag & dropするとFileListオブジェクトを取得することができます。 $("div").on("drop",function(e){ e.preventDefault(); console.log(e.originalEvent.dataTrans
Androidのviewportに対する数値指定 本日はjQuery Advent Calendar 2013がお休みなのでAndroid Advent Calendar 2013の6日目でブログを書いてみます。 Android端末はviewportに対する数値指定が無視されるといのは有名ですが現状のバージョンではどうなっているか調べてみました。 まず、viewportに対する数値指定とは以下のようにviewportを指定することで任意のviewportが指定できる機能でiPhoneやiPadでは問題なく動作します。 <meta name="viewport" content="width=数値"> まずAndroid2.3.6(GALAXY S2 LTE)で調べたところ、数値にどのような値を指定してもviewportは320に固定されます。これは「width=devce-width」が採
File APIを使ってみよう このエントリーはjQuery Advent Calendar 2013の 5日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はFile APIを利用してローカルファイルの内容をページに表示する方法を解説します。 File APIが利用できるブラウザではwindowオブジェクトにFileプロパティが設定されているので以下のようなスクリプトでFile APIが利用できるブラウザと利用できないブラウザで処理を切り分けることができます。 if(window.File){ alert("File APIが利用できます"); }else{ alert("File APIが利用できません"); } サンプル1 ちなみにIEはIE10からFile APIが利用できます。 Fil
jQueryのpropメソッドとattrメソッド このエントリーはjQuery Advent Calendar 2013の 4日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) jQueryのattrメソッドの仕様がjQuery 1.9から変わったのでpropメソッドと含めて現在の仕様の解説を行ないます。 次のスクリプトではattrメソッドとpropメソッドでチェックボックスの状態を監視して取得しています。 $("input").change(function(){ alert("attr:"+$(this).attr("checked")+"\n"+"prop:"+$(this).prop("checked")) }); この挙動をjQuery 1.10.2とjQuery 1.8.3で比較してみまし
jQueryのstopメソッドとfinishメソッド このエントリーはjQuery Advent Calendar 2013の 3日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 3日目はアニメーションの制御に利用するjQueryのstopメソッドとfinishメソッドについて解説します。 アニメーションの基本 jQueryのアニメーションはキューと呼ばれるものに格納されます。たとえば次のように4つのアニメーションを指定した場合、それぞれキューに格納され、最初のアニメーションが終了した場合に次のアニメーションが、さらに終了した際に次のアニメーションがといった具合に実行されていきます。 $("div").animate({ left:100 }).animate({ top:100 }).animat
jQueryのmouseoverメソッドとmouseenterメソッドの違い このエントリーはjQuery Advent Calendar 2013の 2日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 1日目ではJavaScriptのイベントデリゲートやイベントバブリングについて解説をしたので、それを踏まえて2日目はjQueryのmouseoverメソッドとmouseenterメソッドの違いについて解説します。 mouseoverメソッドとmouseoutメソッド mouseoverメソッドとmouseoutメソッドはその名のとおり、要素のマウスカーソルが乗った場合やマウスカーソルが外れた際に発火するイベントです。次のように記述するとdiv要素にマウスカーソルが乗った際に横幅、高さが200pxに拡
イベントデリゲートで理解するjQueryのonメソッド このエントリーはjQuery Advent Calendar 2013の 1日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) イベントデリゲートとonメソッドについて解説します。 onメソッドはjQuery 1.7で新たに追加されたメソッドで、それまで利用されていたbindメソッドやliveメソッド、delegeteメソッドの代わりに利用できるメソッドです。 onメソッドの使い方を理解するにはJavaScriptのイベントバブリングを利用したイベントデリゲートを知るのが一番よいでしょう。 イベントバブリングとは? clickなどのイベントはイベントが発生した要素から親要素に伝播されます。これをイベントバブリングといいます。簡単なサンプルで解説し
JavaScriptライブラリをbowerに登録する 先日公開したjQueryプラグイン「jquery.heightLine.js」をbowerに登録したので、メモがてら登録方法をご紹介。 bowerとは? Twitter社が出しているJavaScriptライブラリなどのパッケージを管理するパッケージマネージメントシステムです。登録されているJavaScriptライブラリを依存するライブラリなどを含めてダウンロードしてくれます。 登録できるライブラリは? GitHubなどで公開しているライブラリは簡単に登録できます。 登録方法 まずはmanifest用のJSONファイルを作成します。jquery.heightLine.jsではbower.jsonという名前で以下のような内容で登録しています。ignoreにインストール時に必要ないファイルやdependenciesで依存するライブラリとバージ
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
iOSにおけるviewportの指定方法による細かい違い iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指定をSPモードとして解説を進めていきます。 <meta name="viewport" content="width=device-width"> ズーム率 ピンチインピンチアウトで拡大できる上限は、PCモードでは15倍、SPモードでは5倍まで拡大可能です。 ダブルタップの挙動 テキストが記述された要素などをダブルタップすると、PCモード、
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」 CSSソース内に散らばったメディアクエリをまとめたいと思って調べたらGruntタスク「grunt-combine-media-queries」に行き当たりました。 CSSソース内に散らばったメディアクエリとはどういうことかというと、レスポンシブWebデザインでPC向けとSP向けのCSSを記述しなくてはいけないときに、以下のようにPC向けとSP向けの記述をなるべく近くに書くことでCSSのメンテナンス性が高まる反面、1つのCSSファイルに同様なメディアクエリが散らばってファイルサイズを増加させてしまいます。 .header{ width:950px; } @media screen and (max-width: 640px) { .header{ width:auto; } } .footer
Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現
[書評]WebクリエイターのためのCreateJSスタイルブック 少し前に出版社より「WebクリエイターのためのCreateJSスタイルブック」の献本をいただいたのですが、バタバタとしていて書評が遅くなってしまいました。 本書はタイトルの通り「CreateJS」についての解説が書かれた書籍です。CreateJSは個人的に今年一番注目しているJavaScriptライブラリで、簡単に説明するとFlashのActionScriptのような記述でHTML5のCanvasを記述することができるライブラリです。FlashがCCより標準でCreateJSの書き出しをサポートするなど注目度はかなり高いです。 本書の説明はオブジェクトやクラスの概念が含まれておりJavaScriptかActionScriptをある程度理解している人には非常に解りやすいのですが、JavaScriptやActionScript初
Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ
FacebookがWebサイトへの埋め込み機能を提供 FacebookがWebサイトへの埋め込み機能を提供しました。 公開設定になっている投稿をWebサイトにとりこんで表示することができます。 例えば、このFacebookへの投稿をページ内に読み込むと以下のように表示されるようになります。 取り込み方は簡単で、投稿の右上の矢印アイコンをクリックすると「埋め込み投稿」のリンクが表示され、これをクリックするとページ内に埋め込められるHTMLソースが表示されます。 これで、とりあえずFacebookに投稿してからBlogなどに転載や、情報のソースの明示が簡単にできるようになりましたね。 関連エントリー Facebookの新プラグイン「フィード購読ボタン(Subscribe Button)」 Facebookの新しいsendボタン(送信ボタン) FacebookのLike Button(いいねボタ
Source MapでSass/Compassを簡単にCSSをデバッグする Sassはα版が公開されている3.3.0からSource Mapに対応しています。このSource Mapを利用するとCSSのデバッグや開発を簡単にしてくれるのでその方法を紹介します。 Sass/Compassで作成したCSSをGoogle Chromeのインスペクタで確認しようとすると以下のように対応するCSSファイルの行数が表示されます。 これでは何行目のScssファイルをいじったらよいかわかりませんが、Source Mapに対応させることで簡単にわかるようになります。 これは、「Google ChromeでCSSがSassの何行目に記述されているか確認する方法」のSource Map対応バージョンです。 インストール まずはターミナルから以下のコマンドを入力してSass3.3.0のα版をインストールしましょう
次のページ
このページを最初にブックマークしてみませんか?
『[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く