サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
会話術
qiita.com/nakajmg
これまでSFC(Single File Component)ではBEMによる命名を使っていましたが、コンポーネントを書くうえでは冗長だと感じました。そこで、ECSSの考え方をベースとして、SFCに合わせてカスタマイズする形に落ち着きました。 SFC向けCSSということでSFCSSと呼ぶことにしています。 scopedでも命名規則は必要 まず前提として、<style scoped>でコンポーネントのスタイルが外に漏れないとしても、命名規則は必要になります。scopedだからといって適当に書いたクラス名のツケは、きっとあとあと払うことになるでしょう。 公式のスタイルガイドに書かれているように、サードパーティのCSSが適用されないようにするためにも、コンポーネント固有のプレフィックスなどをつける必要があります。 ただしSFCでの開発は、通常のwebサイトとは性質がことなりますので、必ずしもプレフ
Vue.jsにはプロジェクトの雛形をスキャフォールドするためのvue-cliというツールを公式が提供しています。 vue-cliを使うと、.vueファイルによるコンポーネントの作成、開発用ローカルサーバー(差分更新ができる)、バンドル処理などを行える環境がすぐに構築できます。 vue-cliを使えば高速にプロジェクトをスタートさせることができます。 本記事ではvue-cli用のテンプレートを作成するうえでのTipsを紹介します。vue-cliの使い方自体はこの記事が詳しいので参照ください。 公式のテンプレートに満足できない 公式のテンプレートは良くできていますが、vue-routerやvuexを使いたいときや、プロジェクトで個人的に必ず使うパッケージがあるときに、毎回同じような準備が必要になるのが面倒でした。 vue-cliは、公式が提供しているテンプレート以外に、GitHubのリポジトリ
Electronのページ内検索はcontents.findInpageを使う必要がありますが、毎度同じような処理を書くのもなんだかなという感じがしたのでモジュールにして公開しました。 electron-search-text 使い方は👇の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> body { height: 100vh; margin: 0; } webview { height: 100%; } .search-box { display: none; } .state-visible { display: block; } </style> <link rel="stylesheet" href="./search.css"> </head> <body> <div class
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
※ Canary(39.0.2128.0)で確認 (Stableはまだ実装されていない。 ※ Stableが39になって使えるようになってました。(2014/12/16) ChromeのDevToolsのカラーピッカーが超便利になってた。 Elementsパネルからカラーピッカーを出す カーソルをページの方に持ってくと… 虫眼鏡みたいなのが出てきて画面上の色が拾える\( 'ω')/ウオオオアアア! これできたらいいなーとずっと思ってた機能なので興奮してる。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat y
watchしながら作業してるときにコンパイルエラーなんかが起こってたときに、ターミナルにエラーメッセージが出てるけど気づけないときがあったので通知を導入した。 gulp-notifyを使う gulp-notify gulp-plumber エラーが出たときにgulpを終了させないgulp-plumberと、通知を出すgulp-notifyを使う。 gulp-plumberはタスク実行中にerrorイベントが発生したときに実行するerrorHandlerを指定することができる。errorHandlerにnotifyを指定すれば通知を出せる。 gulpfile CoffeeScriptのコンパイルを例に。 var gulp = require('gulp'); var plumber = require('gulp-plumber'); var notify = require('gulp-n
id属性に値を設定すると、設定した値の変数がwindowオブジェクトのプロパティとして作られてJSからアクセスできる。 <body> <div id="test">てすと</div> <div id="global">ぐろーばる</div> <script> console.log('test' in window); // true console.log('global' in window); // true console.log(test === window.test); // true console.log(global === window.global); // true </script> </body> こんな仕様になってたの知らなかった。 (HTMLの解析後に作られるのでDOMの準備が出来る前に参照するとエラーになる) Command Line APIとかで人様の
DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
スマートフォン向けのサービスなどを開発しているとき、3G回線の様な低速な環境での振る舞いを確認しなければならないときがあります。 白ロムでWifiしか使えない場合や、パブリックなとこに置けないために実機での確認に一手間かけなければならないときもあると思います。 有名な方法としてはCharlesのようなローカルプロキシでスロットリングを行う方法があります。 ただCharlesは有料なので開発している全員の環境に入れられるかと言えば少し難しいです。トライアルもありますが常用するには厳しいと思います。 もっと手軽にやりたい。。 grunt-throttle そこで登場するのがgrunt-throttle! tjgq / grunt-throttle 使い方も超簡単 インストール
powerline たまに見かけるこんな感じのカッコいい表示。powerlineというやつを使います。 導入エントリを見るとだいたいvimがーとかtmuxがーとか出てくる。 ただターミナルをカッコよくしたいだけなのにbundleだーNeoBundleがーとかfontforgeでFontにパッチをあててーとか、手間が多い! めんどくさいインストールとか設定とかはできるだけやりたくない。 今すぐカッコよくしたい、そんなあなたに。 powerline-shell powerline-shellを使えばすぐにカッコよくなります。 milkbikis/powerline-shell step1 フォントをダウンロードしよう powerlineでカッコいい表示にするにはフォントにパッチをあてるという一手間が必要ですが、パッチを当てたフォントを公開してくれてるのでそこからダウンロードしましょう。 Lok
参考エントリ Nightwatch.jsで自動ブラウザテスト@ta9to 概要とかもろもろはこのエントリが詳しい。サンプル動かすまでは簡単。 デフォルトはFirefox、Chromeでも動かしたい Nightwatch.jsのデフォルトのブラウザはFirefox。 Chromeで動かしたいなーと思って調べたところ、最近のアップデートで動かせるようになったらしいので試してみた。 ※ nightwatch.jsのリポジトリがアップデートされてるので、↑のエントリが書かれたときにcloneとかした人は最新のソースを落としてきてください。 1. サンプルのテストを動かす 参考エントリのサンプルテスト実行あたりまでやる。 ※ アップデートされてnightwatch/examples/testsフォルダにdigg.jsていうテストのサンプルが追加されていて、このテスト通すのにFacebookのアカウン
Gruntfile.jsを10行にした話@watilde このエントリのやり方が気に入ったので自分の真似してGruntfileをダイエットさせた。 Gruntダイエットで健やかな開発を config書くのだけめんどくさい すごく良いやり方だと思ったけど、config.jsを自分で追記していくのが若干めんどうだし、自動でできればモジュール追加が捗る〜と思って書いてみた。 /* config */ var configName, fs; fs = require("fs"); configName = __filename.split("/").reverse()[0].split(".")[0]; fs.readdirSync(__dirname).forEach(function(filePath) { var fileName, stats; stats = fs.statSync(__
localStorageにはstorageというイベントがあり,localStorageに変更があった場合に発火します このstorageイベントはlocalStorageを変更したドキュメント以外の,同じlocalStorageを共有しているwindow(タブ)で発火します。 変更を加えたドキュメント内では何も起きません。 storageイベントのeventオブジェクトのプロパティにはlocalStorageにどんな変更を加えたかの情報がないので,プロパティの値から判定する必要があります。(あるよね?) storageイベントが発火するタイミング storageイベントはlocalStorageに変更が加えられたときにだけ発火します。変更がない場合には発火しません。 実行するメソッドと状況によるイベント発火の有無 メソッド 状況 タイプ イベント発火
idとclassの名前の先頭に数字は使えない CSSのid/classの名前を数字から始めた場合そのid/classに対して記述したスタイルは適用されません <DOCTYPE html> <html> <head> <style> #0id{ color : red; } .0class{ color : blue; } <style> </head> <body> <div id="0id">0id</div> <div class="0class">0class</div> </body> </html>
※ 執筆時点ではCanaryで利用できます ChromeのDevToolsに「Workspace」という機能が追加されました Workspaceを使うとDevToolsをエディタとして使うことができます ローカルフォルダの追加 DevToolsを開いて歯車アイコンからSettingsを開くと項目に"Workspace"があるので選択 Add folderでフォルダを選択 リソースへのアクセス許可を求められるので許可を選択 Sourcesパネルに選択したフォルダが追加される リソースの編集の自動反映を有効にする ブラウザのリロードなしに編集・保存したファイルが反映されるようになる(htmlはむり? 右クリックメニューから"Map to network resource"を選択 ダイアログでDevToolsの再起動を求められるので許可(Chromeの再起動ではない) 右側のエディタ部分でCSS
iPhoneやAndroidで音声を再生しようとするとき、ブラウザの仕様上の制約から色々と壁にぶちあたります。 壁たち ユーザのアクションでしかロードできない 同時に一つの音しかならせない ※iOS6のSafariとAndroidの一部機種のChromeでは同時に2つ再生できる) ファイルを最後まで読み込んでくれない 発生するイベントがOSやブラウザによってバラバラ 再生できるコーデックがバラバラ 他にも細かい制約やブラウザごとの仕様の違いでオーディオの扱いは相当な苦労を強いられます。 参考: iPhoneでHTML5のaudio要素を使うときに気をつけたいこと iOS における HTML5 の audio 要素に関する制約を克服する 地獄のvideo/audio要素 iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法 単純な再生なら「Au
画像を文字列にしてリクエストを減らしたりするアレことbase64。 普段はコマンドラインのツールとかで変換してるんですがChromeのDevToolsでかなり手軽にできたのでメモ。 htmlで画像を読み込む ブラウザで開く DevToolsを開いてリロード ResourcesパネルのImagesに画像があるのを確認 右側に表示されてる画像を新しいタブで開くようにドラッグ ↓ ヽ(`▽´)/ アドレスコピーして使える。 DevTools側の画像はbase64変換して表示してるのかーという豆知識もさりげなくゲット。 ※ サイズがある程度を超えるとアドレスバーに表示できなくなるので注意 いちいちタブで開くのめんどくさい人向け (サイズの問題も回避できる) 左下のボタンを押してDevToolsのウィンドウを切り離す (※長押しして選択しないと切り離せない場合もある) DevToolsにフォーカスし
Audio要素の仕様には22個のイベントがありますが、ブラウザによってイベントの起こるタイミングや発生するイベントのタイプがバラバラです。 iPhoneのSafariで発生してもAndroidのブラウザでは全く発生しないイベントもあります。 ライブラリを使用しないでオーディオのイベントコントロールをする場合注意が必要です。 以下のコードはロード開始から何ms後にどのイベントが発生したかを出力します。 <!DOCTYPE html> <html> <head> <title>Audio/Video Event Checker</title> <meta charset="utf-8" /> <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"/>
別のエントリで紹介し忘れてた書き方を紹介します。 [Chrome] console.log()の色々な書き方 JavaScriptオブジェクトをconsoleに出力する var obj = { hoge : "hoge", huga : "huga" }; console.log(obj);
console.time('label_name') と console.timeEnd('label_name')を使うと経過時間の測定が簡単にできる。 基本的な使い方 測りたい処理の開始時にconsole.time()を呼び出す。このとき引数にラベル名を渡す必要がある。 計測終了したいタイミングでconsole.timeEnd()を呼び出す。このとき引数には同じラベル名を渡す。 function loop(){ console.time("loop time"); for(var i =0; i < 1000000000; i++){} console.timeEnd("loop time"); } loop();
console.log('しゅつりょく'); console.log(obj); var str = "もじれつ"; var num = 555; var flo = 1.7320508075; console.log('Stringの出力 : %s', str); console.log('Numberの出力 : %d', num); console.log('Floatの出力 : %f', flo); console.log('複数出力 : %s %d %f',str,num,flo);
PreloadJSを使えば非同期ファイル読み込みと、その処理がとっても楽に書けるようになる(はず) http://www.createjs.com/#!/PreloadJS コードサンプル:画像を読み込むたびにbodyに追加していく <!DOCTYPE html> <html> <head></head> <body> <script src="./preloadjs-0.3.0.min.js"></script> <script src="./preload.js"></script> </body> </html> function init(){ // LoadQueueのインスタンス作成 // 引数にfalseを指定するとXHRを使わずtagによる読み込みを行います var queue = new createjs.LoadQueue(true); // 読み込むファイルの登録。
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く