はてなブックマーク

C/C++で書かれたLibsassをwrapしているnode-sassを使用。 Sassのgemをインストールしなくてもgulp-sassのみで使用可能。 Sassのgemを使用。 gulp-ruby-sassを使用するときは、あらかじめgemのインストールが必要。 処理速度処理速度はgulp-sassのほうが速いらしい。 gulp-ruby-sassは一度gemに処理を投げているからなのかな…？ 出力形式出力形式はgulp-ruby-sassのほうが豊富(nested/compressed/compact/expanded)。 gulp-sassはLibsassが'nested’, ‘compressed'の2つしかサポートしていないため。 書き方 gulp-sassでコンパイルするときは、ソースの指定で /*.scss のような指定方法が可能。 また、ソースの指定には gulp.src

JS界隈で人気のあるイベント「JSオジサン」に行ってきました。 毎回参加枠がすぐに埋まってしまうため行けなかったのですが、今回やっと参加出来ました。 流れが速かった&PC持って行ってないのであまり覚えていませんが、覚えている範囲でメモしておきます。 JSを使ったアプリ開発！iPhone/Android/FirefoxOSに挑戦！ - 西田 寛輔 氏（とのさまラボ)iPhone/Android/FirefoxOSに対応するアプリ作るならHTML/CSS/JSで作るのがいいよね「PhoneGap」とか「cordova」とか色々あるけど「Monaca」がいいらしいブラウザ上で開発できる作成したものはiPhone/Android用のアプリとしてダウンロード出来るFirefoxOS用は、あっ・・・(察し自分でラップすればFirefox用のアプリも出来るとか出来ないとかFront-end Packag

またまたSublime Textネタです。 最近公開されたSublime TextのテーマであるSeti_UIというテーマの紹介です。 このテーマの何がいいかといいますと、サイドバーにあります。 ソースの部分やタブなどはよくあるテーマと同じなのですが、サイドバーのファイルに付いているアイコンがとても可愛い。 拡張子を判別し、それに該当するアイコンを表示してくれます。 どのようなアイコンかは以下をご覧ください。

Sublime TextのパッケージであるAutoFileName。 Web制作でSublime Textを使っている人はだいたい使っているであろうパッケージです。 img要素のsrc属性にキャレットを当てると、フォルダ/ファイルの一覧を表示してくれる優れ物です。 今まで相対パスでしか動作しないと思っていのですが、ちゃんと設定すればルートパス(“/"から始まるパス)でも動作することを発見しました。 その方法をメモしておきます。 今回の環境この記事は以下の構成で確認しています。 別のバージョンの場合、設定方法が異なる場合がありますので、ご了承下さい。 Sublime Text Build 3605Sublime Text Build 3065(2014.09.11追記 バージョンが間違っていました…)設定方法プロジェクトの設定ファイルを開きます。 コマンドパレットから "Project: E

以前作成したSublime Textで全角カナ/半角カナの変換が出来るプラグインを書き直し&アップデートしました。 また、アップデートに伴いプラグイン名を新しく変更してみました。 ConvertJaZenHan機能について基本的な機能は以前と変わらず、 全角カナ及び全角記号を半角カナに変換半角カナ及び半角記号を全角カナに変換の2点です。 ファイルを開いている状態でコマンドパレットを開き、コマンドを選択することで変換が出来ます。 また、変換範囲は「ファイル全体」もしくは「選択した範囲」のどちらかを選択出来ます。 コマンドについて用意しているコマンドとその機能は以下のとおりです。 コマンド機能

今までgulp3.8.6を使ってたんですが、いつの間にか3.8.7が出てたんですね。 ローカルのディレクトリにインストールした際に気づきました。 グローバルとローカルでバージョンが違うのは気分的に良くないのでバージョンを上げてみました。 その際のメモをまとめます。 注意 バージョンアップをすることでプラグインが動かなくなったり、gulpfile.jsの書き方が変わることがあるかもしれませんので、注意して実行してください。 やり方は結構簡単ざっくり言うと、gulpをアンインストールした後に再度インストールすればよいです。 簡単ですね。一応それぞれの工程を見て行きましょう。 グローバルのgulpをアンインストールターミナルを開いて次のコマンドを打ちます。 sudo npm uninstall -g gulp これで一旦グローバルのgulpがアンインストールされました。 再度gulpをインストー

最近話題になっていますね、Web Starter Kit。 タスクランナーにGulpを使っているとのことで、早速中身を確認してみました。 その中で使用されているプラグインについてまとめました。 以下がgulpfile.js内に記述されているプラグイン一覧です。 browser-syncdelgulpgulp-autoprefixergulp-cachegulp-changedgulp-cssogulp-ifgulp-imagemingulp-jshintgulp-load-pluginsgulp-minify-htmlgulp-replacegulp-ruby-sassgulp-sizegulp-uglifygulp-uncssgulp-userefjshint-stylishpsirequire-dirrun-sequenceそれぞれどのようなプラグインなのかを見ていきます。 brows

普段HTMLのコーディングをする際、 コードの見通しを良くするために毎回以下のように閉じタグの前にコメントをいれるようにしています。 <div id="foo" class="bar"> 〜 <!-- /#foo.bar --></div> このコメントはEmmetやZen-codingで"|c"を入力することで入れることが出来るのですが、閉じタグの後にしか出力されません。 毎回コメントを出力して閉じタグの前にカット&ペーストするのも面倒…。 「それなら作っちゃえばいいんだ！」と思い作りました。 ちょうど元カヤックの渕上さんがDreamweaverで同じような拡張機能を作成されていたので挙動を参考にしました。 この場を借りてお礼申し上げます。 コメントを生成して挿入するDreamweaver用の拡張機能を作成しました | KAYAC DESIGNER’S BLOG - デザインやマークアッ

Sublime Text3(以下ST3)ではPackage ControlからLiveReloadをインストールしても使えません。 何故ならそのLiveReloadはST2用のものだからです。 ST3に対応しているLiveReloadはLiveReloadのGithubページから次期バージョンのdev版を手動インストールする必要があります。 そのメモを残しておきます。 因みにMacのST3用のTipsです。 Windowsは…。 とりあえず予めST3を終了させておいてください。 Githubページからdev版をインストールする(ターミナル, Git使用版)ターミナルを開いておきます。LiveReloadのGithubページの中程にある「Installing」の「OSX users」に書かれている文言をコピーします。一応場所の図と内容を載せておきます。 <code> cd ~/Library

前回の記事で、Gulpのインストールまで出来ました。 今回はSassのファイルを監視し、変更されたらCSSにコンパイルするところまで書きます。 ディレクトリ構成今回、以下の様なディレクトリ構成になっています / ├― gulpfile.js ├― package.json ├― node_modules/ │ └ 諸々のモジュール郡 ├― scss/ │ └ layout.scss └― css gulpfile.js: gulpのタスクが記述されたファイルpackage.json: このプロジェクトで使用しているgulpの設定ファイルnode_modules: gulpでインストールした諸々のファイル群scss: Sassファイル群css: コンパイルされたSassファイルの格納場所使用するプラグイン以下のプラグイン及びメソッドを利用します。 Sassファイルのコンパイル: gulp-s

レスポンシブ対応で機能も沢山あり商用利用も可と、個人的にはとてもお世話になっているjQueryプラグイン「Flexslider 2」ですが、iOS7のSafariで閲覧するとスライダーがフリーズする事象に出会いました。 「useCSS」というプロパティを「false」にすれば問題なく動くのですが、「useCSS: true」の時に比べて動作がスムーズじゃない…。 transitionを切れば動くあたり、Safariとtransitionの相性がわるいのかなー。とか思うのですが、いまいち原因がつかめず。 Github上でも話題になっているので詳しいことが知りたいのであれば、以下のページを御覧ください。 IOS7 css transitions · Issue #853 · woothemes/FlexSlider · GitHub 追記(2014/05/19)今まではスクロール中にスライダー

タイトルのまんまです。 スマホサイトを作っている際、img要素のwidth, heightの値って画像サイズの半分の値をいれなければいけませんよね。 今までは自分で計算して都度値を入力していたのですが、その作業がとても面倒…。 何かうまい方法は無いかと調べても中々見つからず。 無いなら作っちゃえ！と思い立って勢いで作りました。 Sublime Textのプラグインを作ったことが無ければPythonも触ったことがなかったのですが、なんとか形にはなりました。 プラグイン自体はGitHubにて公開しています。 「HalfImageSize」 - https://github.com/Satoh-D/HalfImageSize プラグインの使い方について使い方は至って簡単です。 下記の様なimg要素を選択した後、 <img src="hoge.jpg" width="100" height="10