カッティングボード

カルマをカットしてます

有終の美?

下のアドベントカレンダーの最後の記事です。

www.adventar.org

 今日はクリスマスということでアドベントカレンダー最終日です。最終日ということでアドベントカレンダーについて振り返っていきたいと思います。

↑のアドベントカレンダーの発端

f:id:cut-ter:20161225224920p:plain

f:id:cut-ter:20161225224931p:plain

 今見ると「何考えてるんだこいつは」って感じですが完全にノリだけでアドベントカレンダー作りました。まぁ結局1人でアドベントカレンダーやるのは無理だったのでいろんな人に協力してもらうという落ちになりましたが。。。

f:id:cut-ter:20161225225355p:plain

 みんなが協力してくれたおかげで↑のような感じで25日間見事埋まりました。数えてみたところ12人も記事書いてくれてました。ノリで始めた割に結構規模が大きくなって、ブログとか書いてなかった人もこのためにブログ作って書いたりしてくれて本当に感謝です。

 複数回書いてくれた人もいて、僕以外で一番多く書いてくれた人は6回も書いてくれてました。序盤のほうは人も少なかったですが、序盤のほう乗り切ったら後半はいろんな人がどんどん参加してくれて僕が書かずとも埋まっていくような感じになってきました。

 最初は完全にノリで始めたアドベントカレンダーでしたが全部埋まるとかなりうれしいですね。肝心のブログ力が上がったかについてですがこの記事を読んでもらった通りです。ブログ力上げるためアドベントカレンダー終わっても定期的にブログ続けていけたらいいなー。

 

 協力していただいたみなさんありがとうございました。おかげで何とかきれいな形でアドベントカレンダーを終えることができました。まとまってないですがまとめた感じにして終わりです。

世にも奇妙なforefoxの話

下のアドベントカレンダーの13日目です。

www.adventar.org

 今回は"世にも奇妙なforefoxの話"ということで、自分が出くわしたfirefoxの謎挙動の一つを紹介します。

 僕はhistory apiを使って戻るボタンの制御を行おうとしていました。そこで以下のようなコードを書いてデバックしていたのです。

f:id:cut-ter:20161213231642p:plain

 pushStateの前後でhistoryの値がどうなるのかを確かめるだけのソースコードです。これを実行すると以下のようになります。

f:id:cut-ter:20161213231736p:plain

 まぁふつうやな。pushしたからlength変わるしstateも変わるよな。次はこのページにブラウザの左上の戻るで戻ってきたときの出力です。

f:id:cut-ter:20161213231926p:plain

 は?なんでlength変わってないの!!!???

 まぁせめてlength変わってないのはいいとしてなんでstate変わってんの!!!???

 この挙動はマジで謎。デバッガーで止まるから実行されてるっぽいし。。。。実行されてるのになんでlength変わってないの?

 

 正直これに関しては解決できず別手段をとることで解決したのでなんでこんな挙動になるのか知ってる方がいたら教えていただけると幸いです。

 

 明日のアドベントカレンダーは「smdr3ke」です。

 

Bootstrapのgridシステムだけ使いたい

下のアドベントカレンダーの11日目です。

www.adventar.org

 Bootstrapのグリッドシステムの部分だけ使いたいと思ったことありませんか?実はBootstrapの4系からその望みを叶えてくれてるんです。

Bootstrap3系のCSS

f:id:cut-ter:20161211223015p:plain

Bootstrap4系のCSS

f:id:cut-ter:20161211223032p:plain 

 ↑の写真の通り4系では今までになかったファイルが大量に追加されています。初めにファイル構成を見た時にはgridシステム等が切り出されているのだと思ってしまいましたがそういうわけではありませんでした。Bootstrap4系の機能をすべて用いたいときにはbootstrap.cssを使えば機能をすべて使えます。逆にgridシステムだけを使いたいときにはbootstrap-grid.cssを使えばgridシステムの部分だけ使うことができます。また4系からCSS3から追加されたflexboxを使用したgridシステムも追加されたらしいです。デフォルトではオフにされているらしいです。オンにしたかったら↓の通りフラグをtrueにしてコンパイルしなおせばいいらしいです。

f:id:cut-ter:20161211223617p:plain

 今回からは他のCSSフレームワークで実装されていたカード機能がパネルに置き換わる形で実装されています。カード機能が使いたかったら4系を使ってみるのもいいかもしれませんね。まぁダウンロード時にalphaと書かれている通り正式リリースしているわけではないみたいなのでしっかりと動作してほしい場合には3系を使ったほうがいいかもしれません。

 今日はbootstrap4系使うときにどれを使うのか迷ったのでメモ的な感じです。一応4系での変更点へのリンク(http://v4-alpha.getbootstrap.com/migration/)を張っておきます。

 

 明日のアドベントカレンダーはまたまたベです。

ソースコードを探検する

下のアドベントカレンダーの9日目です。

www.adventar.org

 何か開発してたりして挙動等でわからないことがあり、ソースを読みに行くときありますよね。そんなときに使うと便利なコマンドがあります。知ってる人からすると当たり前のことですがgrepです。grepとは文字列を検索するコマンドで使いこなせなくても複数のオプションを知っているだけでソースコードを読み進める助けになります。

 

 まずは普通のgrepの使い方です。lsした結果をパイプでgrepに渡して検索対象文字列が含まれているものを抽出します。

f:id:cut-ter:20161209233106p:plain

 次にソースコード中からある文字列を検索するときによく使えるgrepです。rとnのオプションをつけ最後にアスタリスクをつけることで、現在のディレクトリ以下のファイルから検索対象の文字列が含まれるファイル名と対象行数、対象行を表示してくれます。cssのクラス名とかで定義ファイルを探したりするときによく使います。

f:id:cut-ter:20161209233213p:plain

 次に検索にlogファイルとかが引っかかってしまったときに使うgrepです。いろいろパイプで渡したりしていますが今回見てほしいのは最後の部分だけです。vオプションをつけて実行することで渡されたものの中で検索文字列が含まれないものを出してくれます。grepで検索かけたものにlogファイルが含まれていた時によくgrep -v logを使います。

f:id:cut-ter:20161209233413p:plain

 

 僕がよく使うgrepのオプションは上の二つくらいです。これだけでもコードを読み進めるうえですごい助けになっています。大きいプロジェクトになってきたりすると定義ファイルを探すだけで大変になってきたりしますが、grepをつかって手早く見つけましょう。linuxのコマンドは使うと便利なものがたくさんあるので使えるように頑張りたいですね。

 

 こんなコマンド使ったら便利とか、そんなもん使わないでこれ使えやとかあったら教えてください。

 

 明日のアドベントカレンダーはベです。

google map の秘孔

  ↓のアドベントカレンダーの6日目です。先月の終わりに立てた割にはなんだかんだみんなで続けていけてるしいい感じです。

www.adventar.org

まぁとりあえず6日目書き始めていきましょう。

 みなさんgoogle mapって使ったことありますよね。僕は見知らぬ場所に行くときは事前に調べもせずたいていgoogle mapに頼りながら行ってしまいます。正直google mapが間違ってることはないと思いますよね。でも一つだけ知っておかないとgoogle mapを使ってコーディングしたりすると困ることがあります。

 それは、個別郵便番号です。個別郵便番号ってなにかというと、配達物の多い企業だったりとかに個別の郵便番号を振ることで配達しやすくするよ的なものです。なんでこれで困るかというと、市役所とかが個別郵便番号になってる場合があって市役所の住所をスクレイビングしてきてgoogle mapに投げるとうまくいかないことがあります。

例えば

f:id:cut-ter:20161206104424p:plain

f:id:cut-ter:20161206104436p:plain

 

 この時に、市役所のホームページに掲載されている住所すべてをスクレイビングしてきて検索にかけるとgoogle mapでヒットしません。

 どうすれば検索にヒットするようになるかというと、個別郵便番号のみで検索する。もしくは個別郵便番号なしの住所で検索するとヒットします。

 

 個別郵便番号だけ、個別郵便番号以外の住所でヒットするならそれを合わせた時にもヒットしてくれるようしてくれればいいのに。。。。。。。

 

 今回は住所とかスクレイビングしてきてgoogle mapで検索するときに注意するべきことをなんとなく書きました。

 

 

 アドベントカレンダー最後のほうあいてるし2回以上書いてくれても構わんのだよ。

 

www.adventar.org

ブラウザ間の挙動を考察?

 アドベントカレンダー3日目を書いていきます。正直23時から書き始めていて間に合うかめちゃくちゃ焦ってます。2日目他の人が書いてくれてるのに、自分が穴をあけるわけにはいかないので頑張って書いていきましょう。

www.adventar.org

 いきなりですが、みなさんご存じのとおりブラウザ間で実装の違いがありますよね。

 特にIEではJavaScriptへの対応が遅く、ES2015で実装が決定したものなどは一部未対応なものがあり、ほかのブラウザ検証が通ってもIEで通らないことがあります。

 Webフロントエンジニアに疎まれがちなIEばかり目立っていますが、ブラウザ間の挙動の違いに悩まされることはIE以外でも稀にあります。

 自分が悩まされたことがあるのは、URLで外部参照して画像をモーダルウィンドウで表示する処理を書いていた時です。ChromeJavaScriptのデバックをしやすいので、よく自分はChromeでフロントサイドの開発を行っています。そのモーダルウィンドウででの処理がChromeでは一度目から画像を表示することができるのですが、ほかのブラウザで挙動を確認してみると一度目は画像が表示されず、二度目から画像が表示されるという挙動をしました。

 なぜそのような挙動をするのか考察してみます。モーダルウィンドウで表示する画像は、モーダルウィンドウが表示されなかった場合にはユーザーが見ることのない画像です。そのためchrome以外のブラウザでは実際にモーダルウィンドウが開かれるまで画像をロードしていないと思われます。そのため画像をロードする前にモーダルウィンドウが開かれてしまい画像が表示されないものと思われます。二度目以降はうまくいくことも一度目でロードされてるからということで説明することができます。

 逆になぜChromeで一度目から画像を表示することができるかを考えていきます。Chromeにはまことしやかにささやかれているある噂があるのです。それは、ページ内にリンクが張られているものを先にロードすることでユーザーへのレスポンス速度を上げているというものです。ある会社の方にアクセスカウンタをJavaScriptで書いたらChromeの時だけ、アクセスカウンタが仕込まれているページが検索にヒットするだけでアクセスカウンタが動作するという話を聞いたことがあります。これもgoogleの検索ページからアクセスカウンタが仕込まれているページへのリンクが存在するため、先にロードされてしまいアクセスカウンタが反応すると考えれば説明がつきます。今回もChromeの場合にはモーダルウィンドウで表示される画像であったとしても先にロードしているため一度目から表示することができたのだと思います。

 どのブラウザでも一度目から画像が正しく表示されるようにするには、onload等を用いて画像がロードされてからモーダルウィンドウを開いてあげればおーるおーけーです。

 

 何とか日付が変わる前に書き終わったので一安心です。できる限り書き溜めとかないと最後のほうしにそーーーーーー。

何事も初めが肝心???

 自分の書いたブログを読み直すと日本語的におかしかったり、自分で読んでてもつまらない記事だなとよく思うことがあります。

 できるエンジニアの人はアウトプットをよくしてますし、まとめるのがうまかったりしますよね。そんなエンジニアになるためにも、ブログ力強化月間と称しアドベントカレンダーをやっていきたいと思います。

 ここでタイトルに戻るのですが、何事も初めが肝心とよく言いますよね。12月1日になったしアドベントカレンダー初日に書かなかったら、今日以降絶対に書かないので書いていきたいと思います。

 アドベントカレンダー初日によくあるのはアドベントカレンダーについてだと思うので、自分もアドベントカレンダーについて書いていきたいと思います。

  アドベントカレンダーというと下の写真のようなものを一般的にいうらしく、wikiによるとクリスマスまでの期間に日数を数えるために使用されるカレンダーのことらしいです。

                                                 f:id:cut-ter:20161201151518j:plain

 小さいころに親戚に箱みたいになってて一つ開けるごとにチョコレートが食べられるといった形式のアドベントカレンダーをもらったことがある気がします。まぁ、その時はクリスマスを毎日カウントダウンすることなく一気に全部開けて食べたいチョコを食べてしまったような気がします。

 こういったブログを書く形式のアドベントカレンダーは特にプログラミングに関連する企画が多いらしいです。

 初日頑張りすぎても、後が続かないので初日はこれくらいにして明日以降はプログラミング関連の話題に触れていけるように頑張っていきたいと思います。

 

 一応アドベントカレンダーのリンク貼っておきます。誰か書いてくれる人がいれば適当に書いてもらって構わないのです。正直毎日書くのだるくなりそうだから誰か協力してくれるとありがたい

かったー Advent Calendar 2016 - Adventar