動的にデータを取得する Vue.js のツリーコンポーネント

ツリー表示する方法を調べてたら Vue.js の公式サイトにいい感じのサンプルがありました。このサンプルではコンポーネント再帰することでツリーを実現しています。とても学びがありますね。

ただ、今回はツリーを開くタイミングで動的にデータを取得するようにしたかったのですが、このサンプルは初期表示の時点でツリーのデータをすべて持っています。

というわけで、サンプルをカスタマイズしてみました。

github.com

構成は公式サイトのサンプルとほぼ同じですが、今回必要のなかった箇所は移植していません。

ツリーを開くときに呼ばれる toggle メソッド内でツリーの子要素を取得します。また、2回目以降ツリーを開くたびにリクエストが飛ばないように m-loaded 属性で制御しています。

あと、ローカルで動作確認するために JSON Server を使っています。

> npm install -g json-server
> json-server --watch db/db.json

スタディサプリ ENGLISH で英語の勉強を始めました

2018年の目標に「英語の勉強」を挙げてましたが、進捗ゼロのまま半年以上が過ぎてしまいました...。

2017年のふりかえりと2018年のこと - kntmr-blog

このままではよろしくないので、とりあえず通勤時間を利用して英語の勉強をしてみようかと。とはいえ、本や単語帳アプリでは長続きしなさそうなので、以下のアプリを試してみました。

eigosapuri.jp

で、1週間ほど無料コンテンツを試してみたところ、なかなかいい感じ。

  • ストーリー仕立てで飽きない
  • 文法やリスニングのポイントなどを動画で解説してくれる
  • 自分の弱点を評価してくれる

というわけで、プレミアム会員に登録してみました。月額1080円。頑張ります。

ちなみに英語を勉強するモチベーションですが、特にかっこいいものではなくて、映画を字幕なしで観たいとか、海外ミュージシャンのMCを理解したいとかそんな程度です。

50000PV

特にたいしたものではないんですが、今朝たまたま見たらアクセス数の合計がちょうど 50000 だったのでキリ番ゲット的な気持ちで記念にキャプチャしました。

f:id:knt_mr:20181003161126p:plain

よくアクセスされるページは、Spring や JMockit 関連が多い模様。あと、最近は Vue.js 関連のアクセスが多くなってきました。しかし、アクセス元のサイト (Google, Bing, Yahoo!検索) によってアクセスするページの傾向が違うのはちょっと興味深い。

Docker Compose を使って EC2 に Redmine をインストールする

前回の続きというわけではないんですが、せっかく作成したインスタンスがあるので、Docker Compose を使って Redmine をインストールしてみました。備忘録。

AWS の10分間チュートリアルで EC2 インスタンスを起動してから HTTP アクセスするまで - kntmr-blog

バージョン情報

一応、カーネルのバージョンを確認。

$ uname -r
4.14.47-56.37.amzn1.x86_64

Docker インストール

$ sudo yum update -y
$ sudo yum install -y docker
$ docker -v
Docker version 18.03.1-ce, build 3dfb8343b139d6342acfd9975d7f1068b5b1c3d3
$ sudo service docker start
$ sudo usermod -a -G docker ec2-user # ec2-user を docker グループに追加
$ exit
# ssh 再接続する
$ docker info # sudo なしで OK

Docker Compose インストール

Install Docker Compose | Docker Documentation

$ sudo -i # スーパーユーザーで実行
$ curl -L https://github.com/docker/compose/releases/download/1.21.2/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
$ chmod +x /usr/local/bin/docker-compose # 実行権限付与
$ exit # スーパーユーザーここまで
$ docker-compose --version
docker-compose version 1.21.2, build a133471

docker-compose.yml 作成

適当なディレクトリに docker-compose.yml を作成する。

$ vi docker-compose.yml

GitHub - sameersbn/docker-redmine: Docker Image for Redmine

内容は上記にある docker-compose-mysql.yml とほぼ同じですが、少しだけ手を入れます。全体は以下の通り。

version: '2'

services:
  mysql:
    image: sameersbn/mysql:latest
    environment:
      - DB_USER=redmine
      - DB_PASS=password
      - DB_NAME=redmine_production
    volumes:
      - /srv/docker/redmine/mysql:/var/lib/mysql
  redmine:
    image: sameersbn/redmine:latest
    depends_on:
      - mysql
    environment:
      - TZ=Asia/Tokyo

      - DB_ADAPTER=mysql2
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_USER=redmine
      - DB_PASS=password
      - DB_NAME=redmine_production

      - REDMINE_PORT=10083
      - REDMINE_HTTPS=false
      - REDMINE_RELATIVE_URL_ROOT=/redmine
      - REDMINE_SECRET_TOKEN=

      - REDMINE_SUDO_MODE_ENABLED=false
      - REDMINE_SUDO_MODE_TIMEOUT=15

      - REDMINE_CONCURRENT_UPLOADS=2

      - REDMINE_BACKUP_SCHEDULE=
      - REDMINE_BACKUP_EXPIRY=
      - REDMINE_BACKUP_TIME=

      - SMTP_ENABLED=false
      - SMTP_METHOD=smtp
      - SMTP_DOMAIN=www.example.com
      - SMTP_HOST=smtp.gmail.com
      - SMTP_PORT=587
      - SMTP_USER=mailer@example.com
      - SMTP_PASS=password
      - SMTP_STARTTLS=true
      - SMTP_AUTHENTICATION=:login

      - IMAP_ENABLED=false
      - IMAP_HOST=imap.gmail.com
      - IMAP_PORT=993
      - IMAP_USER=mailer@example.com
      - IMAP_PASS=password
      - IMAP_SSL=true
      - IMAP_INTERVAL=30

    ports:
      - "10083:80"
    volumes:
      - /srv/docker/redmine/redmine:/home/redmine/data

実行

Docker Compose を実行して Redmine のコンテナを起動する。

$ docker-compose up -d # -d でバックグラウンド実行

10083 ポートで /redmine にアクセスすると Redmine の画面が表示される。

リバースプロキシ

前回インストールした Apache のリバースプロキシを使って、80 ポートの /redmine でアクセスできるようにする。

$ sudo -i # スーパーユーザーで実行
$ vi /etc/httpd/conf.modules.d/00-proxy.conf # 下記参照
$ exit # スーパーユーザーここまで
$ sudo service httpd restart

00-proxy.conf の設定内容は以下の通り。

ProxyRequests Off
ProxyPass /redmine http://127.0.0.1:10083/redmine
ProxyPassReverse /redmine http://127.0.0.1:10083/redmine

80 ポートでアクセスすると Redmine の画面が表示されるはず。admin / admin でログインできます。

まとめ

Docker Compose 便利。

JJUGナイトセミナー「緊急特集!Javaの無償版はなくならないぞ!」に行ってきた #jjug

JJUGナイトセミナー「Java SE 10 / JDK10 リリース特集」に行ってきました。簡単に所感をまとめます。

jjug.doorkeeper.jp

メモから抜粋。(資料が公開されたら貼っておきます)

JDK:新しいリリースモデル解説

www.slideshare.net

JDK8 までのリリースモデル

  • OpenJDK はソースコードを公開、バイナリ提供なし
  • ラクルは OpenJDK のソースコードにツール類を追加してバイナリ生成&提供
    • BCL
  • セキュリティアップデートはオラクルが開発
    • OpenJDK への同期は不完全
    • セキュリティアップデートにバグフィックスやたまに機能追加があったり
  • OpenJDK は Update Project が Update Release を提供している
  • これまでのリリースモデルだと開発完了した中小機能はリリース待ちの状態に

JDK9 以降のリリースモデル

  • OpenJDK コミュニティが開発してソースコードを公開
  • Java 11 では JFR や JMC が OpenJDK のソースコードに含まれる
  • OpenJDK では開発した機能が順次リリースされる
  • Oracle JDK はバージョンを固定して使いたいニーズに特化している
    • 3年に1度のリリース
    • 有償サポートは最低8年 (LTS)
  • アップデートリリースには脆弱性対策やバグFixが含まれる
    • 4半期ごと
  • OpenJDK バイナリは単一のソースコードで機能追加やメンテナンスが行われる
  • Oracle JDK は各バージョンごとにリポジトリが分かれる
  • バージョン番号は OpenJDK に合わせる
    • Oracle JDK 11 の次バージョンが 17 になる
  • 例えば、OpenJDK 13 あたりのタイミングで有償版に切り替えると Oracle JDK 11 時点の機能しか含まれない

  • Oracle Java Archive はそのまま残る

  • OpenJDK 側でも JDK9 以降のアーカイブ提供開始
  • Java SE 仕様の提案⇒定義⇒承認は JCP で進められる

  • OpenJDK は再配布可能なライセンスになっている

  • Deprecated の運用ルールはこれまで通り

    • 最短1年で機能が削除される可能性あり
  • Oracle JDK で11から17にアップデートするといきなり削除されている機能があるかもしれない

  • Oracle JDK 8 は2019/1までアップデートされる (個人利用に限り2020年末まで)

    • 企業内で使う場合は個人利用に含まれないので注意

あとで資料公開されるかもしれませんが、同様の内容は以下にあります。

JDKの新しいリリース・モデル、および提供ライセンスについて

OpenJDK開発の実態

適当に投げた質問がまさか上位に来るとは...。でも、普段聴けない話を聴くことができて面白かったです。

これまででいちばん胸熱なbugはどんなやつでしたか?

コンパイラが落ちる系のバグ」「Project Lambda のときは毎週のように落ちていた」

いかにJavaのバージョンアップと付き合うべきか

docs.google.com

  • Java はライフサイクルが早くなっただけ
    • リリースのスピードが速くなって、EoL も早くなった
    • 有償化されるとか無償版がなくなるというのは認識誤り

Java バージョンアップについて

  • 広範囲に亘って再テストが必要になる > テストするのは当たり前
    • バージョンアップ戦略を事前に決める (予算確保の意味で)
    • テスト自動化でコスト削減を図る
  • 周辺ライブラリやフレームワークの対応
    • Java のバージョンを上げるとフレームワークのバージョンを上げる必要があるかも
    • 周辺ライブラリの対応を待っている間にサポート期間が過ぎてしまうかも
    • 対応しないライブラリは切る、別のライブラリに乗り換える
  • AdoptOpenJDK
    • 最近、スポンサーに Microsoft が追加された
    • Java11 以降、3年ごとに4年間のLTSを提供する
    • 移行期間として1年間の猶予があるということ
  • LTS に追従、バージョン固定、に6ヶ月リリースに追従という選択肢が増えただけと言える

事前に日経xTECHのひとを呼んでインタビューをしていたとのこと。素晴らしい...。

バージョンアップ戦略はとても重要だなと思います。とは言え、6ヶ月リリースに追従するのはちょっと厳しいと思うし、バージョン固定はアレとなると、LTS に追従することになるかと思いますが、無償版を使うつもりならいよいよ本格的に AdoptOpenJDK を調べておいた方がよいのかなという印象。

以前、きしださんのエントリにいくつか載ってましたが、このあたりの詳細とか比較なんかを聴いてみたいです。

qiita.com

Vue.js で ToDo アプリを作る (Firebase Realtime Database 編)

前回の続き

Vue.js で ToDo アプリを作る - kntmr-blog

前回作成した ToDo アプリはデータを LocalStorage に保存していましたが、今回は Firebase Realtime Database に保存するようにしました。また、Vuex の Plugins は使わず、mutations のところで state を書き換えるついでに Firebase の API を呼び出しています。が、これでいいのかどうかは微妙なところ...。

あと、他の端末が Realtime Database のデータを変更したことを検知できるようにコールバックを実装しています。(VueFire 使えばもっと簡単にできると思いますが、今回はあえて使わないことに...)

ソースコードはこちら。

github.com

参考にしたドキュメントは以下。


以下、備忘録。

> npm install firebase --save

Firebase の初期化は src/main.js で実施。

import firebase from 'firebase/app'
import 'firebase/database'

var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "APPNAME.firebaseapp.com",
  databaseURL: "https://APPNAME.firebaseio.com",
  projectId: "APPNAME",
  storageBucket: "APPNAME.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx"
}
firebase.initializeApp(config)

import firebase from 'firebase' だけだとコンソールに警告が出るようです。必要なものだけ import しましょうということっぽい。今回は Realtime Database だけ使うので以下のようにする。

import firebase from 'firebase/app'
import 'firebase/database'

ビルド & デプロイ

ビルドする。

> npm run build

Firebase プロジェクトとして初期化する。

> firebase login # ログイン
> firebase init
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choi
ces. Hosting: Configure and deploy Firebase Hosting sites
? Select a default Firebase project for this directory: APPNAME # 既存のプロジェクトを選択
? What do you want to use as your public directory? dist # npm run build で dist に出力されるため、dist を指定する
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No # index.html は上書きしない

Firebase にデプロイする。

> firebase deploy

Android 端末でアクセスすると「ホーム画面に追加」が表示されます。初回アクセスでは表示されません。Android / iOS (Safari) ではオフラインでも動作します。また、Realtime Database の機能で端末間でデータが同期されます。オフラインで操作すると、次回オンラインになったときにデータが同期されます。すごい!

まとめ

もともと PWA について調べるつもりで始めましたが、最初に vue init pwa todo-app した以外は普通に Web アプリを作る感じになってしまいました。まだ、PWA や Service Worker あたりの理解が浅いので引き続き要学習。しかし、Realtime Database なかなか便利ですね。

AWS の10分間チュートリアルで EC2 インスタンスを起動してから HTTP アクセスするまで

試してみたついでに備忘録。

EC2 インスタンス作成&起動

EC2 インスタンスを作成して起動。10分間チュートリアルは以下。便利。

aws.amazon.com

httpd インストール

EC2 インスタンスssh でアクセスして、httpd をインストールする。

$ sudo yum install -y httpd24
$ sudo service httpd start

セキュリティグループ編集

デフォルトでは ssh (ポート20) のインバウンドしか許可されていない。該当インスタンスを選択して、セキュリティグループの launch-wizard-1 をクリック。

ここで、セキュリティグループを編集する。

  • アクション > インバウンドのルールの編集
  • ルールの追加
  • タイプ: HTTP を指定して保存 (必要に応じてソースを指定)

パブリック DNS かパブリック IP で HTTP アクセスすると、httpd のページが表示されるはず。

おまけ

Node.js / npm をインストールする。今回は nvm を使う。

Node Version Manager - GitHub

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
$ source ~/.bashrc
$ nvm ls-remote # 最新の安定版を確認してインストール
$ nvm install v8.11.3
$ node -v
v8.11.3
$ npm -v
5.6.0