npmとBrowserifyでjQueryプラグインを管理する
npmとBrowserifyでjQueryプラグインを管理する 本エントリーは「to-R JavaScript Advent Calendar 2015」19日目のエントリー、前回はnpmでjQueryを管理するところまで実行しましたので今回はjQueryプラグインを管理してみます。 今回はわたしの開発しているjQuery.heightLine.jsを読み込み実行してみます。 まずは以下のコマンドでjQuery.heightLine.jsのインストールを行います。 npm install heightline -save そうするとnode_modulesディレクトリ内に heightlineディレクトリが作成され ├── node_modules │ ├── heightline │ │ ├──.... │ └── jquery │ ├── .... package.
npmとBrowserifyでjQueryを管理する
npmとBrowserifyでjQueryを管理する 本エントリーは「to-R JavaScript Advent Calendar 2015」18日目のエントリー、これまではJavaScriptライブラリの管理にはbowerなどが使われていましたが、最近ではnpmを利用することが多いようなのでnpmを利用した管理方法についてjQueryを利用して解説を行います。 まずはnpm init すでに開発環境としてnpmを利用している場合は不要ですが、まずは開発ディレクトリでnpm initと入力してpackage.jsonを作成します。 npm init 色々聞かれますがGitHbuなどで公開しないのであれば基本Enterで問題ありません。 まずは雛形を用意 確認用の雛形を用意しましょう。 package.jsonと並列にindex.htmlとbundleディレクトリ、destディレクトリをそ
JavaScriptライブラリをbowerに登録する
JavaScriptライブラリをbowerに登録する 先日公開したjQueryプラグイン「jquery.heightLine.js」をbowerに登録したので、メモがてら登録方法をご紹介。 bowerとは? Twitter社が出しているJavaScriptライブラリなどのパッケージを管理するパッケージマネージメントシステムです。登録されているJavaScriptライブラリを依存するライブラリなどを含めてダウンロードしてくれます。 登録できるライブラリは? GitHubなどで公開しているライブラリは簡単に登録できます。 登録方法 まずはmanifest用のJSONファイルを作成します。jquery.heightLine.jsではbower.jsonという名前で以下のような内容で登録しています。ignoreにインストール時に必要ないファイルやdependenciesで依存するライブラリとバージ
CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する ネタ元：[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。 次のようなHTMLがあったとして、 <div id="outer"> <div id="inner"></div> </div> 次のようにCSSを指定すると天地左右中央配置が可能です。 #outer{ height:100%; display:-webkit-box; -webkit-box-pack : center; -webkit-box-align : center; } #inner{ width:50%; height:40%; background
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
CSS3でセレクトボックスをカスタマイズ
CSS3でセレクトボックスをカスタマイズ スマホ向けにセレクトボックスをカスタマイズする必要があったのjQuery Mobieなどが利用している方法でデザインをカスタマイズしました。 セレクトボックスはCSSでのカスタマイズはほとんど出来ないので結構トリッキーな方法です。 サンプル HTMLは次のような感じ。 <select> <option>オプションA</option> <option>オプションB</option> <option>オプションC</option> <option>オプションD</option> <option>オプションE</option> </select> <div>オプションA</div> select要素以外にカスタマイズ用のdivなどを用意しておきます。そしてdivをCSSでセレクトボックスっぽくカスタマイズ。before擬似要素とかafter擬似要素なんか
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
