読者です 読者をやめる 読者になる 読者になる

日々精進

新しく学んだことを書き留めていきます

safariで画面の拡大縮小をさせない / 長押し時のメニューを表示させない

web

画面の拡大縮小をさせないためには以下のmetaタグを追加する。 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> 長押し時のメニューを表示させないためには以下をCSSに追加する。 body { -webkit-touch-callout: none; // 長押し時のメニューを表示させない -webkit-user-select: none; // 長押しで文字…

iOS Safariでキャッシュを削除する

web

設定アプリを開き、Safari > Advanced > Website Data > Clear...ボタンをタップ で消える。 Safariから消せるようにしてほしいなぁ。 参考: How to Clear Safari History And Website Data in iOS 9 or iOS 8 for iPhone and iPad1e3)g=1e3;else if(200>~~…

w3c validatorでxhtmlをvalidateすると「DOCTYPE Override in effect!」警告が出る

web

でxhtmlのチェックをしたところ以下の警告が出た。 The detected DOCTYPE Declaration "" has been suppressed and the DOCTYPE for "XHTML 1.0 Transitional" inserted instead, but even if no errors are shown b…

seleniumから$("ul:eq(1) select")のようにjQueryセレクタで要素を取得しようとすると「SyntaxError: DOM Exception 12」

web

「SyntaxError: DOM Exception 12」はChromeが標準で持っている$関数が吐くエラーメッセージっぽい。 恐らく、jQueryを読み込んでいると思っていたが読み込めてなくてChrome標準の$を使っていたために、jQuery独自のセレクタ文法がエラーになったと思われる…

bootstrapでaタグをDisableにする方法

web

css class の disabledを付ければ良い。 以下のような感じ。 <a href="..." class="disabled">... これだとクリックイベント発生しそうだが、しない。理由はdisabledクラスはpointer-events: none;を設定しており、これを設定するとクリックイベントが発生しなくなるため。 これはCSS3の機能</a>…

divの高さが0pxになる

web

ブラウザの仕様で、float:left、または float:rightが設定された子要素の高さは無視されることが原因。 対応方法として1.clearfixを使う方法、2.overflow属性を使う方法が以下のブログで紹介されている。 http://ogatism.jp/techs/float_height/ 参考: …

spanタグの中身を中央寄せにする

web

以下のCSSを設定すれば良い。普通にtext-align: centerさせてくれないものか。。 { display: inline-block; width: 100%; text-align: center; } 参考: http://www.dafuku.com/2014/03/span-css-align-center.html

requirejsでjsをビルドする際にminifyさせない

web

requirejsのoptionでoptimize: "none"を指定すればよい。 参考:

cssでposition:absoluteを使う場合、親要素にposition:relativeを設定する

web

position:absoluteで位置を設定しても親要素の枠からはみ出してしまったりして思うようにいかなかった。 親要素にposition:relativeを設定すると親要素の枠からposition:absoluteで指定したmarginだけ離れた位置に要素が表示された。 なんでこんな仕様なんだ…

jQueryを任意のサイトのChrome Dev ToolのConsoleで使用する

web

Chrome Dev ToolのConsoleで以下を実行すると、$が使えるようになる。 var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); j…

Androidエミュレータで標準ブラウザを起動してもすぐに落ちる現象

web

ログには「No suitable EGL configs found.」というメッセージが出る。 以下手順で直った。 AVD Manager > Android Virtual Devicesからデバイスを選択し、Edit...ボタンをクリックする Use Host GPUにチェックを付ける エミュレータを起動する なぜこれで直…

Android標準ブラウザで表示中のページをchrome dev toolでデバッグする

web

エミュレータかUSBで接続した実機で標準ブラウザでWebページを表示し、PCのChromeのアドレスバーに 「chrome://inspect」を入力する。あとはInspectしたい端末を選択する。詳細は下記参考のサイトを参照。 すごく簡単にInspectできてびっくりした。これはす…

jQueryPromiseは一度rejectされるとその後のすべてのfailが呼ばれる

web

以下の例だと#1,#2の両方が呼ばれる。 var firstDeferred = $.Deferred(), secondDeferred = $.Deferred(); firstDeferred.promise() .fail(function (error) { // #1 }) .then(function () { return secondDeferred.promise(); }) .fail(function (error) {…

promiseをthenの中からrejectする

web

thenの中でpromiseチェーンをrejectしたい場合、rejectedなpromiseをreturnすればよい。例は以下。 api.ajaxCall(param).then((result: ResponseJSON<A>) => { return $.Deferred().reject().promise(); }); thenからpromiseをreturnすると、returnしたpromise</a>…

gulp taskを実行すると「Error: Task is not configured as a task on gulp. If this is a submodule, you may need to use require('run-sequence').use(gulp).」エラー

web

原因は以下。 * マルチプロジェクト構成にしており、かつ以下のようにnode_modulesが複数ある root/node_modules root/project1/node_modules * 両方のnode_modulesにgulpがインストールされており、gulpのrunSequenceプラグインを使っている この場合、gulp…

依存するJSライブラリの更新を簡単にチェックする

web

p2oを使うと依存ライブラリの更新をrss feedで受けるのが簡単にできる。やり方は以下記事参照。 これ便利そうなので早速使ってみます。

requirejsで読み込むJSファイルがキャッシュされるのを防ぐ

web

JSファイルがキャッシュされてしまい、変更後のコードのテストが出来ないことがあったのでキャッシュさせないようにした。 以下のようにurlArgsオプションを指定するとできる。 requirejs.config({ urlArgs: "bust=" + (new Date()).getTime(); }); ただし、…

r.jsのビルドオプション

web

今までドキュメント↓を読んでいたけど、 http://requirejs.org/docs/optimization.html サンプルファイルの方がわかりやすかった。コメント豊富だし、いいね!

gulpでRequireJSのビルドをする際にgulp-requirejsを使ってはいけない

web

gulpの公式リポジトリにはblackListというファイルがあり、非推奨なプラグインが指定されている。公式が名指しで使うなって言うってすごいな。。 このblackListの中にgulp-requirejsもある。これを使わずrequirejsを直接使えと書いてある。 なので以下のよう…

appium, genymotionでandroidエミュレータでWebのテストをする

web

appiumをiOSシミュレータでは動かせるというところからの話。手順は以下。 以下サイトの手順を参考にadbコマンドを実行出来るようにする 但し、以下の点は読み替えること。 「Android SDKのインストール」の14番目の「他の項目全て(例:Android SDK Build-t…

mixinと多重継承の違い

web

多重継承はフィールドとメソッドを継承するがmixinはメソッドのみ継承する。 でもGroovyなどのmixinはフィールドも継承する。 そうすると多重継承と同じ問題が発生するんじゃないだろうか。 多重継承はダメだけどmixinはいい理由がよく分からない。 参考: …

tslintの各オプションの意味一覧

web

項目が多かったので疲れた。。どの項目を有効にしたのかも記載した。 以下の項目はよく分かりませんでした。。 label-position label-undefined no-any Lintオプションの意味 align 縦方向の揃え方 "parameters" 関数定義の仮引数の開始位置が揃っていること…

「JavaScript Promiseの本」はとてもよい本でした

web

JavaScript Promiseの本 Promiseについてイマイチちゃんと理解出来ていなかったので読んで見たら「マジで!?」ってなることが多く非常に参考になりました。 Promise使う人は必読ですなこれは。。 Free eBookで出しているという点も面白い。Pro Gitは無料な…

「Web制作者のためのCSS設計の教科書」はとても良い本でした

web

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法作者: 谷拓樹出版社/メーカー: インプレス発売日: 2014/07/24メディア: Kindle版この商品を含むブログ (1件) を見る Web開発をすると大体CSSがカオスになるのでそ…

IntelliJでHTMLの外側のタグを削除する

web

メニューのCode > Unwrap/Remove...で開始タグ、閉じタグの両方を削除出来る。 これだけだとインデントは直してくれない。 参考: How to remove surrounding tags in IntelliJ IDEA

特定のファイルを除外するglobパターン

web

!()の中に除外するパターンを書けばいい。 myProject/src/**/!(*.js|*.map|*.src) 参考: Glob matching, exclude all JS files

gulpタスクを順次実行する

web

runSequenceを使うとタスクを順次実行できる。 var runSequence = require('run-sequence'); gulp.task('deploy', function () { runSequence('clean', 'compile', 'deploy'); }); 参考: タスクランナーgulp.js最速入門 - id:anatooのブログ run-sequence

gulpでTypeScriptのSoucemapを生成する

web

gulp-sourcemapsを使う。sourcemaps.writeを引数なしで呼ぶと生成したJSの中にSoucemapを埋め込むが、それだと ChromeDevToolsでうまく動かなかった。"./"を渡すとJSと同じ場所にSoucemapを生成してくれる。これだとちゃんと機能した。 var sourcemaps = req…

gulpでビルド時にフォルダを削除する

web

rimrafを使う。以下でrimrafをインストールする。 npm install rimraf --save-dev 以下のように書けば削除できる。 var rimraf = require('rimraf'); gulp.task('clean', function (cb) { rimraf('./dir', cb); }); 参考: ファイル削除にはgulpプラグインを…

半角英数字を折り返す

web

以下のようにword-break: break-all;をCSSで定義すれば折り返される。 p { word-break: break-all; } CSS力なさ過ぎて辛い。。 参考: 半角英数字の文字列を折り返す:CSS小技

typescriptでreflection

web

typescriptはコンパイルすると素のJSになり型情報がなくなるのでReflectionは基本できない。 for inを使うとプロパティの列挙は出来るがtypescriptのフィールドはそこにデータを代入するまで存在しないのでfor inを実行しても出てこない。 // thisはsampleFi…

MacでIntelliJのJDKの設定をする

web

JDKがどこにあるかわからず困った。以下のようなところにあるのでproject structure>SDKs>+ボタンを押す>JDK から以下のパスを指定すればいい。 /Library/Java/JavaVirtualMachines/jdk1.7.0_XX.jdk/ 参考: MacでOracle JDKをインストールする - oinume jou…

karma-jasmine-jqueryを使ってfixtureを別ファイルから読み込む

web

テストコードとテストデータを分離するためにjasmine-jqueryを導入した。手順は以下。 ・installする npm install karma-jasmine-jquery --save-dev ・karma.conf.js に以下を追加 module.exports = function(config) { config.set({ frameworks: ['jasmine-…

htmlの文法が正しいかどうかを判定する

web

以下サイトにHTMLを貼り付けると悪いところがあれば指摘してくれる。 The W3C Markup Validation Service 以下のサイトはHTMLをブラウザで表示した時に真っ白になってしまう場合の対処法が書いてあって便利そう。 Web開発者必見!サイトが真っ白になったとき…

jQuery objectが同じ要素であることを判定する

web

$("#id")と$("tr")が同じ要素であるかどうかを判定するような場合。is()を使う。 $("#id").is($("tr")) 参考: jQuery object equality

jQueryを使ってDOM要素を取ってくる方法いくつか

web

.siblings()は兄弟要素を取得する。 .parent()は親要素を取得する。 .children()は子要素を取得する。 $("#id").find("...")のようにしてある要素の子孫のみ検索対象にして要素を取得する。

javascriptにbooleanのXORを取る演算子はない

web

a ^ bはビット演算にしか使えないらしい。えー。以下のような関数を定義して使うしかない。 function myXOR(a,b) { return ( a || b ) && !( a && b ); } 参考: http://www.howtocreate.co.uk/xor.html

bootstrapを使ってGlyphiconを出す

web

以下のようにClassを指定する。 <p>Print icon: <span class="glyphicon glyphicon-print"></span></p> 下記ページに使えるアイコン一覧あり。 http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp bootstrap便利だ。

hrタグの太さをCSSで指定する方法

web

以下のように指定する。 hr { border-width: 1px 0 0 0; /* 太さ */ border-style: solid; } CSS勉強しないとなぁ。。 参考: http://step-learn.com/css/20140906-hr.html

SPAに朗報。今年末ぐらいまでにGoogleのクローラがJSを実行するようになるらしい

Web

Web業界では周知の事実なんだろうけど、初めて知った。。以下引用。 「サーバサイドでのHTMLの事前レンダリングから解放され、Googleがクロールするようになるのはいつか?」については、「今年の末までには。」という答えになる。Web Master Toolブログで、…

devdocsが便利そう

web

いつもドキュメント参照するときはDashを使ってるけど、 devdocsも便利そう。Web系のドキュメントを見るときは使ってみたい。 DevDocs: Open-source / Offline API Documentation Browser