トラハをnuxtjsで書き換えて多少バグがあるものの概ねうまく動いている。記事の作成、編集をする時にページから離脱する際に警告を出しているがVueで実装する際に少し調べたのでメモしておく。

現状は下記のコードをpagesに定義することで実現している。 beforeRouteLeave のみだとリロードや戻るボタンなどに対応出来なかったので通常の beforeunload イベントもフックするようにしている。

  created() {
    if (process.browser) {
      // ページを消そうとしたりリロードした場合などに対応
      $(window)
        .off('beforeunload')
        .on('beforeunload', () => {
          if (!this.pageState.saving) {
            return '編集中のデータがあります！'
          }
        })
    }
  },
  beforeRouteLeave(to, from, next) {
    // フォームを送信した場合などに離脱とみなさないようにするため。
    if (this.pageState.saving) {
      $(window).off('beforeunload')
      return next()
    }

    this.$swal({
      title: '編集中のデータがあります！',
      text: 'ページを移動すると編集中のデータが失くなります。',
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'はい、移動します',
      cancelButtonText: 'キャンセル'
    }).then(result => {
      if (result.value) {
        $(window).off('beforeunload')
        next()
      } else {
        next(false)
      }
    })
  }
}

今回使用したメソッドについては下記のページを参考にした。

Navigation Guards | Vue Router

トラハ は現在ものすごくシンプルな作りになっている。

そこで以前使ったことがあるnuxt.jsで置き換えてみようと思って作り変えていてやっと認証周りの部分まで実装が進んできた。

Omniauthを使った現在のフローは極力崩さずに@nuxtjs/authを使えないかと思い試行錯誤した結果が今回の方法である。

基本的にOmniauthの時に行っていたコールバック時の処理などには全く手を付けていないのでその辺を再実装する手間は省けた。

シーケンス図

Nuxt.js(@nuxtjs/auth)とRails(omniauth)でTwitterとOAuth認証を行うシーケンス図

説明

ポイントはTwitterからRoRにコールバックが返ってきた時に有効期限の短い(ここでは1分)のJWTを付与してNuxt.js側にリダイレクトしている。

Nuxt.js側は受け取ったトークンを元に this.$auth.loginWith('local', { data: this.$route.query }) でログイン用APIにJWTを渡し、その値をもってログイン処理をし、有効期限が長いまたは無しのJWTを発行することによってログインを完了としている。

既にOmniauthの設定、コールバック時のユーザー登録等の処理を実装済みだったのでこのような設計になっている。

フロントエンドとバックエンドで基本的に同じドメインを使うようにしているので適宜nginx等で適切な方へプロキシしてあげる必要がある。

最近、チェンマイに引っ越した。バンコクほど暑くなくて快適に過ごせるので非常に居心地が良い。

今までJavaScriptから動的にGoogle Adsenseの広告を表示したことがなかったのでメモを残しておく。

最近主に記事をアップしているトラハでは目次をJSで動的に作成している。で、その下に広告を表示できないかと思い試してみたら普通に出来たので今後のためにメモを残しておこうと思う。

と言ってもやることは簡単だ。

下記のadsenseで共通で利用するJSをどこでもいいので読み込まれるようにしておく。今回はheadタグ内に追加した。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

今回はjsrenderを使っているので下記のようなadsenseで使い回せるテンプレートを定義する。

<script type="text/x-jsrender" id="adsense-template">
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="{{:layout}}"
     data-ad-format="{{:format}}"
     data-ad-client="{{:client}}"
     data-ad-slot="{{:slot}}"></ins>
</script>

最後に表示したい箇所に追加して終わり。

var $contaienr = $('#adsense-container');
var data = {layout: '', format: '', client: '', slot: ''};
$container.append($.templates('#adsense-template').render(data));
(adsbygoogle = window.adsbygoogle || []).push({});

久しぶりに趣味でサービス作った気がする。

トラハ

20歳以降、酒を大量に飲んでも翌日に残らなかったのに30歳を過ぎてから少しずつ翌日に残るようになってしまってちょっと嫌になっていたので思い切って最近禁酒した。そのせいもあってか夜なかなか寝付けなくて暇なのでちょっと欲しかったサービスを作り始めることにした。

トラハ

普段、タイに住んでいて定期的に周辺国やタイ国内を旅行しているのでそんな時に役立った商品を紹介している場所をまとめてられたらいいなと思って作った。まだまだかなり荒削りではあるけど、先週の初めくらいから毎晩少しずつ開発して先週の土曜日に確か本番環境に公開出来た。

ドメインを取るのさえめんどくさかったのとあまり多くのドメインを管理したくなかったのでサブドメインでの公開になっている。成長する見込みがあればドメインの購入も検討したい。あとデザインをまともなものにしたい。

雑な部分が多く残るけどもしよかったら使ってみてフィードバックもらえるとサービス維持のモチベーションが上がります。

技術的な余談

Digital Oceanのシンガポールリージョンを使ってるのでもしかしたら日本から閲覧した時に表示が重いという印象があるかもしれない。一応、Let’s EncryptでSSL対応しているけどLet’s EncryptによるSSL証明書の発行をロードバランサー配下にいるサーバーで行おうとするとサーバーが複数台あった場合に正常に処理が行われない可能性があるので、今回は初めてDNSのTXTレコードでの認証を行ってみた。

しかし、この方法の場合、毎回手動で設定する必要がありそうで毎月の対応が必要なので早いところ自動化したい。

WordPressの投稿画面からFlickrの画像を気軽に挿入するためのプラグイン「wp-flickr-press」のバージョン2.6.1をリリースしました。
プラグインの詳細についてはこちらより参照下さい。

変更点

• img templateにwidth/heightオプションを追加

img templateにwidth/heightオプションを追加

現在、挿入時のテンプレートで [img] の部分がimgタグに置き換わっていますがオプションを指定出来るようになりました。具体的には下記のようになります。

[img width="1 or 0" height="1 or 0"]

width,heightのデフォルトは1なので何も指定しない今までの指定の場合にはwidth,heightがimgタグに指定されて出力されます。もし、何らかの理由でオフにしたい場合は0を指定してください。

知り合いのPHPプロジェクトを少し手伝う機会があったので試した時の記録。

環境

• PHP: 7.1.11
• ruby: ruby 1.8.7 (2011-06-30 patchlevel 352) [x86_64-linux]
• gemコマンドない(インストールできない)
• rakeコマンドない

みたいな構成のレンサバ。

gemがインストール出来る環境だったらsinatra-activerecordとcapistranoでデプロイとDBマイグレーションを実現出来たはず。

goose

当初、あまりVPSだとばかり思ってxbuildでruby入れてsinatra-activerecordとcapistranoで対応しようかと思ったけど、よくよく調べてみると自由にソフトウェアをインストールすることが出来ない環境だった。

何かソフトウェアをコンパイルするのは難しそうなのでgolangのマイグレーションツールであるgooseを使ってみた。

シンプルだけど今回の要件を満たしてるので問題ない。

deploy.rb

大半のコードはcapistrano/railsのmigrationsから拝借したものになった。rake db:migrateの部分を書き換えただけ。

まとめ

自動デプロイとDBマイグレーションがあるとやっぱり助かる。

普段、Railsを使ってる事が多いので、capistranoを使った。

ただ、ある程度の規模のPHPプロジェクトを触ってくてPHPプロジェクトの場合、どういったデプロイツールやDBマイグレーションツールを使うのが流行りなのか知りたい。

WordPressの投稿画面からFlickrの画像を気軽に挿入するためのプラグイン「wp-flickr-press」のバージョン2.6.0をリリースしました。
プラグインの詳細についてはこちらより参照下さい。

変更点

• デバッグ情報を表示

デバッグ情報を表示

設定画面の最下部付近にデバッグ情報を表示するようにしました。

バグ報告時にこちらの情報をコピペしてもらえると調査が楽になるのでよろしくお願いします。

今後、必要な情報があれば増やしていくつもりです。

react-nativeの勉強も兼ねて急にGPSロガーを作りたくなったので作り始めた。

リポジトリは下記。

fukata/travel-logger-app: THIS IS SAMPLE APP of react-native (only testing android)

まだ、

• 位置情報を定期的にファイルに書き出し。
• 記録したログファイル一覧、シェア(Androidのシェア機能)、削除。
• 各種、取得する位置情報に関する設定の更新。

これくらいしか出来ていない。

あと、アプリとは別に記録したログファイルからgoogleマップに情報をプロットするためのスクリプトも簡単ではあるけど用意した。これは今のところ単にそれぞれの位置情報をpolylineで描画するというもの。

最終的には移動中や停止などを判別してどの区間でどれくらいかかったなども表示出来るようにしてブログに埋め込みたいと思っている。最悪、インタラクティブな物じゃなくてもじゃなくても静止画でも良い。

react-nativeは以前から触ってみたいと思っていたのに仕事を理由にしたり、作るものが思いつかなかったなどがあったけど、急にGPSロガーを作って記録してみたいと思ったので夜にチマチマやって3日ほどで現状まで出来た。

react-nativeの事をよく分かっていないのでコードはぐちゃぐちゃだと思う。まぁ、この辺は今はあまり気にしないでおこうと思う。とりあえず、自分が使える程度の動くものを最優先している。じゃないと開発へのモチベーションが一気に低下してしまう。それが最も現れたのがデフォルトの設定値の保存を行うタイミング。

現状、TabNavigatorを AppRegisry.registerComponent に渡している。出来れば、アプリの起動時に初期設定を行ってから画面を描画したい。ただし、設定値を端末側に保存するライブラリのAPIが非同期でこの辺を上手いこと処理する方法が思いつかなかったので今はその辺がものすごくグチャッとなっている。

ただ、目的は位置情報を記録してブログに埋め込めれば良いので今は諦めた。落ち着いたら見直したい。というか作り直した方が良いレベルのものだと思う。

2日間react.jsを触ってその1,2週間後くらいにこれを作り始めたわけだけど、react.jsの知識があればだいぶ気軽にアプリが作れるなと感じた。特に今回作ってるのが複雑なフローもレイアウトも重い画像などが無いというのが非常に大きいと思う。

なんとかモチベーションが低下しないうちにブログへの埋め込みまで作ってしまいたい。

とはいえ、アプリ側は出来たので来週のラオス小旅行中に早速これが使える。

今月の16日から数日、バンコクからラオスとの国境沿いの街であるノンカーイに行って、そこからヴィエンチャンに陸路で入国するつもり。タイに3年ほど住んでるけど陸路での入出国は未体験なので楽しみ。

WordPressの投稿画面からFlickrの画像を気軽に挿入するためのプラグイン「wp-flickr-press」のバージョン2.5.0をリリースしました。
プラグインの詳細についてはこちらより参照下さい。

変更点

• スマートフォン対応

スマートフォン対応

簡単ではありますが、新UIに関してスマートフォンの対応を行いました。

「メディアの挿入」から表示

使える機能はPCの時とほぼ同じ。

プロパティの変更も可能。

現状、多くのスマートフォンで画像が2列表示になっていると思います。画像を選択すると右列の画像が表示されなくなって選べなくなりますが一番下にある「クリア」ボタンを押すことでプロパティの変更用の右サイドバーが非表示になるのでその後再度選択してください。

また、PCの時と基本的には同じ機能が使えますが唯一使えないのが複数挿入です。

複数挿入に関してはいずれ時間を作って実装しようかと思っていますのでしばらくお待ち下さい。

追記: 2017-11-25 03:00:00

スマホの場合に複数選択モードにするボタンを表示するようにしました。これを押すことでスマホでも複数挿入が可能になります。v2.5.2から利用可能です。

WordPressのインポート機能で取り込んだ時にIDが変わってしまったものがあったのでリダイレクタを作った。

プログラムから生成したmrubyのリダイレクタは下記。

blog_redirect_handler.rb

あとは、これをh2oの設定ファイルで mruby.handler-file に指定すれば正常に動作する。

WordPressのプラグインとして書こうかとも思ったけど既に以前のドメインでアクセスが来た際にblog.fukata.orgにリダイレクトしていたのでフローを変えずに処理するのはこれが最も楽だったと思う。

プログラムから吐き出したmrubyスクリプトはerniebrodeur/ruby-beautifyで整形した。簡単に整形出来て良い。なんならsyntaxチェックまでやってくれるので便利。

久々にRailsじゃなくてruby書いた気がする。