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

don-bra.co

さいきんはphpとたわむれてます

Google Wifiで特定のサイトにつながらないとき

注: ネットワークはほとんど無知識なので、できる限り正確な情報を書くように努めていますが誤っているところがあるかもしれないです。
気づいた方はコメントなどで訂正いただけると幸いです

現象

モデム(ONU)に直接つなぐと問題ないが
Google Wifiルーターとして間に挟んでやると特定のドメインにつながらない
(ちなみに同社のOnHubでも同様の再現するようです)

具体的には
https://line.me/ja/
http://www.atmarkit.co.jp/
このあたりです。

あとLINEのアプリも画像が送れなかったりしました。

解決策

Google Wifiに接続する端末側でMTUを適切な値に設定しましょう
僕の場合は1454に変更するとつながるようになりました。
Macの場合は以下のコマンドで変更できます

sudo ifconfig en0 mtu 1454

解決までの道のり

同じような症状の人の助けになるかと思い調べて試したことを書いておきます。

今回ははじめにONUに直で繋ぐと問題ないことがわかっていたため
ルーターにしぼって色々やってみました。
もしかすると(あまりないとは思いますが)
ISPONUに問題がある可能性があるので、切り分けておいた方が良いです。

この辺をやってみてダメだったら
上記のMTUが適切な値に設定されていない可能性があります。

僕はMTUにたどり着けなかったので、Googleにお問い合わせするか、、と思って
Forumでそれらしき質問が出ていないかみたところ、まさになスレッドがあったので解決できました。

Netflix and other site are blocked on my onhub router - in Japan

たぶんGoogle Wifiに限らず、海外製のルーターを使用していると起こり得そうな問題っぽいですね。
日本で売られてるものだと、流石に作る前にNTTのMTUサイズくらいは把握して作ってそうなので。

Google Wifiとは

Google Wifiの説明を全然していなかったので少し紹介します。
wifiルーターです。ふつうのルーターと違うところは

  • メッシュネットワーク機能に対応
  • 空いているチャネルを自動で選択
  • 帯域もデバイスに合わせてくれる
  • 見た目がおしゃれ

なところです。

f:id:asayamakk:20170503144652j:plain:w400

床に直でおいてるのであんまりオシャレ感少ないです。

We do the hard work, so you don’t have to.

公式サイトGoogle Wifi – Made by Googleより

面倒なことはこっちでやるから、気にしないでねーという感じですね。

大きい家だと、家庭のネットワーク管理とか大変だと思うのですが
Google Wifiを3個ぐらい買って適当に置いといたらすっごいいい感じにしてくれます。

残念ながら僕の家は30平米ワンルームなので一台で事足りてしまっています笑

使用感とかレビューはこちらの記事が参考になるかと思います!
ももう少し使ってみたらレビューしたいです
http://espresso3389.hatenablog.com/entry/2016/12/28/051227

ちなみに前の家では上の方と同じく
ISPONU→ホームゲートウェイGoogle Wifi
の構成だったので問題なかったっぽいです。

ネットワークむずかしいですね。
しかもMTUはPCだと変更できるからいいのですが
iOSだと当然できないみたいで結局もう一台ルータをかませることになりそうです笑

mangaloo(マンガルー)に登録してみた

こんな感じです

mangaloo(マンガルー)とは

有名作のコマを使ってあなたのWebページに表情をつけよう! マンガルーでは権利者より正式に許諾を受けた作品をご利用いただけます。

マンガルー - 有名マンガのコマをWebサイト、ブログ、SNSで使える無料Webサービス より

きちんと権利者がOKしたマンガ(コマ)を問題ない形で使おうねというサービスです。 某いらすとサイトの絵だけが溢れかえっていたり、著作権的に問題がある画像が溢れかえっている中でこういった選択肢はとてもありがたいのではないのでしょうか 👏👏

ちなみにmangalooにいるカンガルーっぽいキャラクターはまんまるーくん(仮)というらしいですw とってもかわいいですね。
使い方などは公式のFAQが充実しているので特に困りませんでした。

使ってみた感想・評価

タグ検索がとっても使いやすいです!
ポチっと押して気に入ったコマをクリックするだけなのでとても楽でした。

一方でマンガから切り取るのはちょっと面倒でした。
ここだ!というタイミングで切り取れなくて何度もやり直したり、やり直した時に切り取ろうとしていたところからずれたりと微妙に使い勝手の悪さは感じました。 レビューや評判しだいでよくなっていきそうな期待が持てるので、今のところはといった印象です!

さいごに

マンガルーよさそうです!
ただ技術系の記事にいっぱいあるとうっとうしくもなりそうですねーw

rails consoleしてLibrary not loaded: libreadline.6.dylib (LoadError)が表示されるとき

環境

  • OSX (El Capitan)
  • ruby 2.3.1
  • rails5.0.1
  • Homebrew 1.1.5

とりあえず解決策

brew info readline して readline があることを確かめたら
gem 'rb-readline' をGemfileに追加しましょう。

現象

rails5.0.1で rails console しました。
途中でこけてエラーメッセージが出たりするとよいのですが、何も反応が返ってこずコンソールにも何も表示されませんでした。
とりあえずこういうときはおもむろに bin/spring stop します。

そのあともう一度 rails c すると以下のエラーが出ました。(適宜パスは読み替えてください)

Running via Spring preloader in process XXXX
path/to/project/vendor/bundle/gems/activesupport-5.0.1/lib/active_support/dependencies.rb:293:in `require': dlopen(~/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/2.3.0/x86_64-darwin15/readline.bundle, 9): Library not loaded: /usr/local/opt/readline/lib/libreadline.6.dylib (LoadError)
Referenced from: ~/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/2.3.0/x86_64-darwin15/readline.bundle
Reason: image not found - ~/.anyenv/envs/rbenv/versions/2.3.1/lib/ruby/2.3.0/x86_64-darwin15/readline.bundle

なんだかreadlineの読み込みに失敗しているようですね。

brew info readline してみたのですがreadlineはインストールされています。
シンボリックリンク貼ったらいいのかなーと思ったのですが、違うマシンでもまたシンボリックリンク貼ったりを考えると面倒だなあと思って別の方法を模索しました。ほんとはインフラも仮想化するべきなんです・・・

解決策

stackoverflowをぽちぽち見ているとどうやらgemを入れるだけで解決しそうでした。
gem 'rb-readline' をdevelopmentに追加して bundle install したあとに bundle exec rails c してみると

Loading development environment (Rails 5.0.1)
irb(main):001:0>

わーい! Hello irb 👏 解決です!

ちなみにおなじマシンの違うプロジェクトで bundle exec rails console してもすんなりいったんですよね。
railsのバージョン(正確に言うとSpringのバージョン)が違うのが原因のようです。

参考リンク

ruby - how to install "readline" for rails console - Stack Overflow

ruby on rails console hanging when loading - Stack Overflow

Vue.jsでimgタグのsrcにbindするときの注意

vueのバインディング

サンプルコードです。
imgタグのsrcになんらかの値をバインディングしています。

<div id="app">
    <img v-bind:src="image_src">
</div>
new Vue({
    el: '#app',
    data: {
        visible: true;
    },
    computed: {
        image_src: function () {
            if (this.visible) {
                return 'path/to/img.jpg';
            }
        }
    }
});

こんなコードを書いたとします。
これなら v-show 使ったほうがよくない?っていうツッコミはとりあえず無しです

Safariだけimgが残る問題

(OSXの)ChromeFirefoxではvisibleがfalseになったときは
renderされるhtml(imgタグ)は

<img>

のみになるため、画像は表示されません。

一方safariだと

<img>

で一見消えてくれそうなのですが、表示されたままになります。/(^o^)\ナンテコッタ

ちなみにimage_srcの中で nullや false を返しても同じでした。

image_srcみたいなメソッドをつくるときって Vueに渡しているデータの値に応じて表示・非表示を切り替えたり、表示する画像を変えたいときだと思うので、ちょっと困りますね。

解決策

とりあえずカッコ悪いのですが v-show にも image_src を渡すようにしました。

<div class="app">
    <img v-bind:src="image_src" v-show="image_src">
</div>

一応sampleを作ったのでsafariと他のブラウザで確認いただけます。
jsfiddle.net

おすすめのVue.js入門チュートリアル

この記事の対象者

Vue.jsとは

Vue.jsはユーザの入力やデータによる振る舞いといったインタラクティブなページを実装するためのJavaScriptライブラリです。
よくプログレッシブなフレームワークだと言われます。プログレッシブを辞書で引いてみると

進歩的な、革新的な、進歩主義の、(段階的に)前進する

progressiveの意味 - 英和辞典 Weblio辞書 より と出てきます。
つまり実装上の解決したい課題において段階的に進歩しながら(progress)対応できるフレームワークということです。これはVue.jsの拡張性の高さや、一方で導入のしやすさに由来するものと思われます。

おすすめのチュートリアル

laracasts.com

基本的なVueの概念から、応用的なフロント⇄サーバサイドと通信するアプリ作りまでかなり贅沢な内容でおすすめです!英語なのが少し難点ですが、聞き取りやすいのとコードを見れば学べると思います。

  • Vue.js公式

vuejs.org

または

https://jp.vuejs.org

公式のページも一通りの記法が載っており、技術的な解説もあるので深く動作を理解したい人は必読です!難しい概念では画像付きの解説があったり、versionによる違いもきちんとコメントされており、Vueの最新で最も良い書き方を学べる場所になっています。

  • Gihyo.jpのVue入門の連載

gihyo.jp

2016年の10月から連載が始まり、今も更新が続いています。上の2つはいきなり多くてちょっと・・・という方の入門におすすめです。

個人的な感想ですがVueの情報を調べるときはまだまだ日本語の情報が少なくて 英語が必要になることが多いので、初めから英語で学ぶのもありだと思います。

最近の動向

Vue.js 2.0が2016年の9月末に公開されたりと活発に開発が続けられています。
ちなみに2.0のコードネームは Ghost in the Shell で、1.0は Evangelion です。 日本のアニメが好きなんでしょうかね。

Vueを導入したページ

フロントの操作で状態が変わって、状態に応じて表示が変わるというよくある感じなページを作りました。
jQueryで頑張っても良かったのですが、新しいことに挑戦したい + jQueryだと表示したり隠したりvalidateしたりが辛そうだなと思ってVueにしました。
もともとVue使いたいアピールをしていたのと、新技術の導入に理解のある感じなのですんなり入れられました。あとはVueが他のライブラリと共存しやすいことも理由のひとつです。

実際に使ってみて

楽しい!!JS書いていて楽しいと思ったのは初めてかもしれないっていうくらい良かったです。 データドリブンという考え方は強力だよってLaracastsでも言っていたのですがその通りでした。

「ユーザの名前がフォームに入っていないとボタンを押せない」みたいな状況を例に挙げると

  • 今まで
イベント💥
→状態変化
→ボタンを押せるかどうかを確認
→ボタンの状態変化

みたいなコードを書いていました。

$('#form').on('keypress', function () {
  $text = $('#form').val();
  if ($text) {
    $('#button').show();
  } else {
    $('#button').hide();
  }
});

たぶんこんな感じです。加えて姓名両方のフォームのデータを見ないといけない、みたいなことを考え始めると・・・
悪い夢のようですね 😨

  • Vueを学んだあと
フォームのテキストのデータ✎
→should_showプロパティが決まる
→should_showに応じてボタンの表示切り替え

イベントによって他のデータや状態が決まるのではなく、データによって状態を決めるイメージでしょうか。表現するのがむずかしいですが。
コードだとこんな感じです(elなど一部省略)

<form>
  <input v-model="firstName">
  <input v-model="lastName">
  <input type="submit" v-show="should_show">
</form>
new Vue({
  data: {
    firstName: '',
    lastName: '',
  },
  computed: {
    should_show: function () {
      return this.firstName && this.lastName;
    }
  }
});

なんと!イベントとロジックが混在していないのでとてもすっきりしていますね。v-XXという記法も一度覚えると直感的でとても使いやすいです。
学習コストという点では、ハマりポイントも少なく(まだ踏み抜いていないだけかも)はじめてのJSフレームワークにぴったりだと思っています。

決してjQueryが悪いと言っているわけではないのですが、適材適所なのかなあと思っています。
データに依存しない、イベントドリブンな記述をしたいときはjQueryも素敵な選択の一つだと思います。
Vueにも v-on:click といったディレクティブがあるので一部イベントドリブンな書き方も可能です。

さいごに

この記事をきっかけにVueに興味を持ってくれる人が一人でもいると嬉しいなあという思いです。またVueコミュニティをにぎやかすためにも日本語チュートリアル的なのをいつか用意できたらなーと考えています。

ActionCableでreceivedが複数回呼ばれるとき

まとめ

Subscriptionをつなぐjsファイルを複数回呼び出しているのが原因でした。
<channel name>.js (もしくは.coffee) というファイルです。

App.room = App.cable.subscriptions.create({
}, {
  connected: function() {
    // Called when the subscription is ready for use on the server
  },

  disconnected: function() {
    // Called when the subscription has been terminated by the server
  },

  received: function(data) {
    // Called when there's incoming data on the websocket for this     
  }
});

これです。

原因

なぜ複数回呼び出していたのかというと、Sprockets(とActionCableも)の動作を正しく理解していないためでした。
Sprocketsについては別記事で書くのですが、簡単に今回の原因を説明すると、application.jsのrequire_treeを消したつもりで消していなかったためです。

上で書いたようにroom.jsを読み込むと1subscription作成されます。

application.jsrequire_tree する → channels/room.jscable.js を読み込み

cable.jsrequire_tree ./channels する → channels/room を読み込み

本来はSprocketsがよしなにしてくれて room.js は一度しか読み込まれません。
しかし今回はerb側でapplication.jsとcable.jsをそれぞれ javascript_include_tag で読み込んでいたために、ActionCableのreceivedが2回呼ばれてしまっていました。

おわりに

Webpackの勉強をしないとなあとか、Sprocketsから乗り換えようかなあと思っていたときなのでSprocketsの勉強ができるいい機会でした。
RailsでJS辛い問題はまだJSをゴリゴリ書くようなアプリを作れていないのでわからないのですが今後どこかで遭遇する、しないといけないなあと思っています。

GitHubでPRしたときにインデントの変更のコミットが混ざったときの小技

GitHubとっても便利ですよね 😊
まいにち元気にプルリクしてますか?
インデントの変更を加えたコミットが混ざってしまって、残念なdiffになってしまったことはありませんか? (わたしはよくあります)

わたしはsublimeで行末のスペースを削除する設定にしています。これです

"trim_trailing_white_space_on_save": true

行末スペースの削除が混ざってしまった!

他の人が編集したあとのファイルで空白が残っていると保存時に全部消してしまって、diffが真っ赤&真っ緑な(お察し)状態になってしまいます 😰
意図的にコードを整理しているときならいいのですが、そうではないときだと本質的な変更がdiffで見えづらくなってしまいますね。

そんなときに使えるのがGitHubの便利機能である Ignore whitespace オプションです。 コミットのURLやPRのURLに ?w=1 をつけるだけで、↓のように表示できます!

?w=1

Before
https://github.com/name/repo/commit/commit_hash f:id:asayamakk:20161003013631p:plain

After
https://github.com/name/repo/commit/commit_hash?w=1 f:id:asayamakk:20161003013701p:plain

文字の変更があった箇所だけ表示してくれるので、コードの変更がとっても見やすくなります!🎉 ?w=1whitespacew ですね!覚えやすい!

本来は別のコミットなりPRなりを分けるべきなのですが、うっかり混ざってしまったときもこれで安心ですね 👏

ほかのGitHubのtips

有名かもしれませんがGitHub Cheat Sheetのページにはtabのspace幅を揃える方法や、リポジトリのコードをLine Highlightするショートカットなど、他にも便利なtipsがたくさん紹介されていました!

参考サイト:

github.com