Webサイト制作に便利なGruntプラグイン（その1） - Qiita
これからGruntを始める同僚の参考になればいいなぁ、と思い書きました。今回は基本のGrunt-contribプラグインにターゲットを絞り、その中で僕がWebサイト制作で特に利用することの多いプラグインを紹介しています。 簡単な設定例も併記しましたが、たいていはそれぞれのプラグインでより多くのオプションが用意されており、また僕自身もそれらの機能を十分把握していない可能性もあるので、実際に使用する際には各々の説明ページを参照してください。 また、grunt-contrib以外で利用しているその他のGruntプラグインは、別記事としていくつか紹介しています。 Gruntにやってもらうと便利な作業 さまざまな用途に利用できますが、Web制作では以下のような機能が便利に使えるのではないでしょうか。 【開発時】 任意のファイルを更新すると、ブラウザを自動で更新（ライブリロード） CSSスプライトの生
Web開発でIntelliJ IDEAを使うべきNつの理由 - Qiita
Nが何個かはまだ考えていませんが、Web開発でIntelliJ IDEAを使うべき理由について、いくつか書いていきます。 HTML部門 Live Edit IntelliJ IDEAには、Live Editという機能があります。 IntelliJ IDEA上で修正したHTMLおよびCSSを、リアルタイムでブラウザ側に反映させる機能です。 使用できるブラウザや反映できる箇所などに制限はありますが、画面を見ながらHTMLやCSSを調整する場合には重宝します。 (本当はスクリーンショットを入れるつもりでしたが、IntelliJ IDEA 13にしてから動かず…) Emmetサポート EmmetはZen Codingの後継で、少ないキー入力でHTMLに展開してくれます。 このEmmetをIntelliJ IDEAは標準でサポートしています。 機能的にはLive Templatesの一環で提供されて
WebStorm AngularJS Webinar (April 24th, 2014) 補足メモ - Qiita
［追記]公式ブログの方で録画映像と記事が公開されました。 http://blog.jetbrains.com/webstorm/2014/04/webstorm-8-webinar-recording/ 日本時間で25日の夜中に、JetBrainsのエンジニアであるJohn Lindquist氏によるWebStorm8の新機能についてのWebinarが開催されました。 来週にはJetBrainsのブログのほうに内容のおさらいが動画で公開されると思いますが待ち切れないので自分が把握できた分だけ書き下しておきます。 ちなみに話された内容はこちらにリストアップされています。 https://gist.github.com/brockangelo/11260515 リストが細かく書かれてるので実際はそんなに書き下すことないんですが、ところどころ補足したいところもあるので↑のリストと並べて読んでもら
スマホで音声再生をスムーズに行うためにオーディオスプライトを作成/使用する - Qiita
iPhoneやAndroidで音声を再生しようとするとき、ブラウザの仕様上の制約から色々と壁にぶちあたります。 壁たち ユーザのアクションでしかロードできない 同時に一つの音しかならせない ※iOS6のSafariとAndroidの一部機種のChromeでは同時に2つ再生できる) ファイルを最後まで読み込んでくれない 発生するイベントがOSやブラウザによってバラバラ 再生できるコーデックがバラバラ 他にも細かい制約やブラウザごとの仕様の違いでオーディオの扱いは相当な苦労を強いられます。 参考: iPhoneでHTML5のaudio要素を使うときに気をつけたいこと iOS における HTML5 の audio 要素に関する制約を克服する 地獄のvideo／audio要素 iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法 単純な再生なら「Au
Grunt - Getting Started - Qiita
まず読む Getting started - Grunt: The JavaScript Task Runner Official Manual ビルドプロセスの自動化で効率アップ // Speaker Deck 概要説明スライド [JavaScript] Jenkinsの対抗馬になるか？ビルド管理をJSで行うGrunt.jsの内容説明とスタートアップ - YoheiM .NET Briefing node製の自動化ツール「grunt.js」の参考サイトまとめ | riatw.me 参考サイトまとめ Gruntで快適な環境を整備したい！【インストール編】 パッケージ概要説明あり Integrate with IDE [JavaScript] IntelliJ IDEAでGruntのタスクをしたい « きんくまデザイン IntelliJ IDEAでのGrunt設定方法 PhpStormでGr
百姓なりにJavaScriptで大事そうなとこメモる - Qiita
JavaScript Hyakusho 手を動かしたり、JavaScript Ninja読んだりして、 百姓なりにJavaScriptがうすぼんやりみえてきたので、 忘れないように大事そうなとこメモ書き。 参考: JavaScript Ninja / Effective JavaScript / サイ本 というかこんなん読んでないでみんなも読みましょう。 JavaScriptと真摯に向き合うために大事そうなこと jsの関数はファーストクラスオブジェクト jsで関数はこれでもかってほど幅広い役割を持たされてる上に、節操がないほど柔軟な設計になってます。 関数の果たす役割がみえてくればjsの外観もほぼみえてるんじゃないかって錯覚できるレベル。 純粋に処理を記述するためのプロシージャ/関数という役目に飽きたらず、 インスタンスを生成するコンストラクタであり、ローカルスコープを定義し、 半歩進んで
君は知っているか、あのCompassのstatsコマンドを！ - Qiita
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
スマホの画面サイズ取得 - Qiita
// 画面幅 screen.width // 画面高 screen.height // 有効画面幅 screen.availWidth // 有効画面高 screen.availHeight // 表示領域幅 window.innerWidth // 表示領域高 window.innerHeight // ウィンドウ幅 window.outerWidth // ウィンドウ高 window.outerHeight // 表示領域幅 $(window).width() // 表示領域高 $(window).height() // 表示領域幅 document.documentElement.clientWidth // 表示領域高 document.documentElement.clientHeight // ドキュメント幅 $(document).width() // ドキュメント高 $(
input[type=file]で投稿画像を即時表示する際のメモ - Qiita
input[type=file]使って投稿画像を表示する時、 大抵の場合はFileReaderオブジェクトのreadAsDataURLメソッドを使うサンプルをよく見かけるけど、 Android4.0だと動作が不安定だった。 $(function(){ var $input = $('#js-input'), $result = $('#js-result'); $input.on('change', function(e){ var file = e.target.files[0]; if (!file) { return; }; var filereader = new FileReader(); filereader.onload = function(e){ var url = e.target.result, $img = $('<img>').on('load error', f
![input[type=file]で投稿画像を即時表示する際のメモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/84ad770e90926d6b2d02a209513b70d0d75f54bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9aW5wdXQlNUJ0eXBlJTNEZmlsZSU1RCVFMyU4MSVBNyVFNiU4QSU5NSVFNyVBOCVCRiVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MiU5MiVFNSU4RCVCMyVFNiU5OSU4MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5OSVFMyU4MiU4QiVFOSU5QSU5QiVFMyU4MSVBRSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTcyN2JmODA5NWFkZTEyMjEyODdmMDJhMDgxNjA2ZWE%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwRmlOR0FIT0xpQyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjJkOTVlMDM0NDUyYjNjYWZmMzI1YjYzOTBiNGMyNDM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dde4f00a8b480839bb02e0819ea064523)
document.body.scrollTopが常に0を返す謎を調べてみた - Qiita
という指定がしてあったからでした。 これは body の子要素で body からはみ出る部分は自動的にスクロールバーが表示されて、スクロールが出来るようになります。 詳しくはこう で、図にしてみるとわかりやすいのですが +------------------------------------------------------------- | html | +-------------------------------+←ーー ここがscrollTop = 常に0 | | body | ↑ | | +---------------------------+ | | | | | ↑ | | bodyではスクロールしないで | | | Scroll Area | | 子要素の中でスクロールする | | | ↓ | | | | | +---------------------------+
ライセンスの選択を恐れる必要はありません - Qiita
この記事はCC BY 3.0に基いて公開されてゐるWebサイトChoosing an OSS license doesn’t need to be scary - ChooseALicense.comのコンテンツ各ページを翻訳し、単一記事として再構成、訳者による補足を追加したものです。 2017年5月9日に開示されたコミュニティガイドラインに伴って、本記事の翻訳部分につきましては削除いたしました。 (この記事が削除または非公開化されない限り、編集履歴からお読みいただくことは可能です。) (訳註: この「はじめに」及び末尾の「訳者による補足」の章は原文にはなく、翻訳者(@tadsan)によるものです。記事の著作権表示及び元Webサイトの利用規約、免責事項、そしてこの記事についての訳者の見解について記します) (この記事の一部または全て ——ただしコメント欄は含まれない—— はCC BY-SA
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
GoogleAnalyticsを使ったメールマガジン等からのトラフィック分析 - Qiita
GoogleAnalyticsのカスタムキャンペーンを利用することで、 リファラーなしの遷移や、出稿した有料のWeb広告からのトラフィック分析を することができる。 この機能はURLクエリパラメータ上にutm_campaignやutm_medium等 を含めることで使えるようになる。 Qiitaのメールマガジン上のURLをクリックした際にも、utm_campaign等が付与されていますね。 AdWordsへ出稿した場合はこれらのパラメータが自動で付与されます。 上記URLの例に記載されている http://www.example.com/?utm_campaign=spring&utm_medium=email&utm_source=newsletter1 がクリックされた場合、GoogleAnalyticsには以下の2.が記載される。 (GoogleAnalytics上で[トラフィック]
iOS/Androidブラウザでデバッグ - Qiita
iOSやAndroid上でJavaScriptが期待したとおりに動いてくれない。 特にAndroid2.3系では毎回つまずいてしまいます。 そこで、リモートで手軽にデバッグ出来る便利なツールを教えてもらいました。 weinre このツールを使えばスマホのブラウザやアプリのWebViewのjs, css, DOMやらをPCからリモートで色々できて便利らしい。 インストール（最新版はnode.jsで実装されています。）
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
WebStormの設定を共有する - Qiita
チームで開発しているとIDEの設定を共有したくなりますよね。 ならないとしたら、今すぐこの記事を読むのをやめて病院に行って下さい。 バージョン管理する対象に.idea/以下を含める http://devnet.jetbrains.com/docs/DOC-1186 下記の「設定をエクスポートしてインポート」より良い方法として、プロジェクトの.ideaディレクトリ以下をバージョン管理対象に含める方法がありました。 Mavenで管理する → ダメだった eclipseにはmaven-eclipse-pluginという設定ファイルを生成してくれたりする便利なMavenプラグインがあります。WebStormにも似たものがないか探しました。で、あったにはあったのですが、codestyleなどの設定ファイルは作ってくれないみたいで目的に合いませんでした。 設定をエクスポートしてインポート → できた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
https://qiita.com/yuzroz/items/cd273ddb638562c7f32e
CreateJS × Android でハマったこと - Qiita
