鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

HTTPS化にチャレンジ

ググりまくり、letencryptが無料とのことでやってみることにした。
CentOS6+Nginxで設定する

python2.7をインストール

rootユーザでpyenvをインストールする

GitHub - pyenv/pyenv: Simple Python version management

python2.7.8をインストール

pyenv install 2.7.8

nginxを検出できるようにシンボリックリンクを貼る

./path/to/certbot-auto --nginx · Issue #4937 · certbot/certbot · GitHub

ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx
ln -s /usr/local/nginx/conf/ /etc/nginx

certbot-autoの導入

certbot.eff.org

sudo yum install epel-release

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto

certbot-autoは/usr/binへ移動した

pyenv shell 2.7.8
pip install virtualenv
certbot-auto --nginx

証明書用のdocument root用のディレクトリを作成する

mkdir /var/www/letsencrypt/

nginxの設定ファイルの編集

        location ~ /\.well-known/acme-challenge/ {
           allow all;
           root /var/www/letsencrypt;
           try_files $uri = 404;
           break;
        }

証明書の取得

certbot-auto certonly --webroot -w /var/www/letsencrypt

nginxのHTTPSの設定

以下のコマンドでをnginxの設定ファイルへ書き加える

certbot-auto install --nginx -d hogehoge.com --cert-path /etc/letsencrypt/live/hogehoge.com/cert.pem --key-path /etc/letsencrypt/live/hogehoge.com/privkey.pem --fullchain-path /etc/letsencrypt/live/hogehoge.com/fullchain.pem 

リダイレクトの設定も必要ならば加える(前は自動で書いてくれていたはずなんですが。・・)

    if ($scheme != "https"){
        return 301 https://$host$request_uri;
    } # managed by Certbot

iptablesの443ポートは開いてますか?

証明書の更新

0 4 1 * * /usr/bin/certbot-auto renew && service nginx reload

vue-cliでE2Eテスト、PageObject Patternをどう使うんだろう

vue-cliのe2eテストはnightwatch.jsを使っている
E2EテストはPageObjectパターンでテストをしたいので
調べる。

以下に詳細な手順がありました。

padcom13.blogspot.jp

簡単にできました!

Firefoxでのテストができない

vue-cliのデフォルトのテストはchromeで動くのですが、firefoxに切り替えると
エラーが出てしまいました。なんでだろう・・・

npm run e2e -- --env firefox
Connection refused! Is selenium server started?
{ value: 
   { message: 'Unable to create new service: GeckoDriverService\nBuild info: version: \'3.8.1\', revision: \'6e95a6684b\', time: \'2017-12-01T19:05:32.194Z\'\nSystem info: host: \'softbank126017041046.bbtec.net\', ip: \'fe80:0:0:0:92:1740:4a0a:5e19%en0\', os.name: \'Mac OS X\', os.arch: \'x86_64\', os.version: \'10.12\', java.version: \'1.8.0_91\'\nDriver info: driver.version: unknown',
     error: 'session not created' },
  status: 33 }

vue-cliを使って百人一首読み上げアプリを作る

f:id:kechiya:20171230203052p:plain

いつの間にかブラウザが日本語を喋れるようになっているのでvueを使ってWebアプリで読み上げアプリ「からくれない」を作るのを
冬休みの宿題にした
Web Speech APIで実際にしゃべる環境を調べてみた - Qiita

新しいこと、なかなか踏み出せなかった、vue-cliを使ってみってみよう!

vue init webpack karakurenai

HelloWorld.vueを改造してアプリに仕立てる。

シャッフルはエコシステム(ライブラリを使いたい)

www.npmjs.com

package.json

パッケージjsonに追記。

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "array-shuffle": "^1.0.1"
  },

HelloWorld.vueにimportを記述。

はじめにシャッフルしたいので、createdの中でシャッフルを呼び出すようにしました。

import arrayShuffle from 'array-shuffle'

export default {
  name: 'HelloWorld',
  created () {
    this.shuffle()
  },
// 中略

    shuffle () {
      this.items = arrayShuffle(this.items)
    }

とりあえず、ソースも公開

github.com

出来栄えは?

読み上げは微妙ですが!まぁいいでしょう。

結論

vue-cliでの開発は楽しい

YAPC::Okinawa ホテルについて調べる

リザンシーパークホテル谷茶ベイ

沖縄科学技術大学院大学から1.8kmの距離にあります。徒歩でも移動できそう。
14日前になるとシングルで安く泊まれるようになる。
普通に今からシングル予約だと19824円となります。

http://www.booking.com/Share-98W6qg

沖縄かりゆしビーチリゾート・オーシャンスパ

沖縄科学技術大学院大学から15.1kmの距離にあります。タクシーだと5000円程度
かかります。(深夜料金でない場合)
シングル部屋の設定があり8800円とリーズナブルです。朝食付き。
ただ、入浴施設は別途料金1000円かかるかも。
タクシーで相乗りができればかなりお安く泊まれそう。

路線バスでもいける

大学院大学から名護バスターミナル行きへのバスに乗り、伊武部でおります。
19:52->20:16,20:25->20:48,21:00->21:23,21:34->21:56(最終)。料金は640円です。
No.20, 120 那覇空港・那覇バスターミナル⇔名護バスターミナル NAHA KUKO, NAHA Bus terminal - NAGO Bus terminal

恩納和風ホテル北海荘

大学からは5.1kmタクシーで1700円ほど。9000円で朝食なしとなります。
帰りが路線バス(万座ビーチ前から空港まで乗車)となると時間がかかりそうな予感。

路線バスでもいける

大学院大学からこれも同じく名護バスターミナル行きの路線バスに乗り、万座ビーチ前で降りる。
料金は300円。
hokkaisou.com

自分の結論

料金的には、かりゆしさんが、朝食込みでお安い。
沖縄かりゆしビーチリゾート・オーシャンスパは予約済み。
リザンのシングル発売日の2月17日に空室を調べ、
料金と天秤にかけて乗り換えを検討する。

Pythonのオブジェクトをdictの値に詰めてmapでごにょると動かない

これは普通に動く。

>>> dict={0:1,1:2,2:3,3:4,4:5,5:6,6:7,7:8,8:9,9:10}
>>> print(list(map(lambda x:dict[x], range(10))))
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

でも、resourcesというdictの値はObjectのケースがなんか変。
list(map(lambda x: resources[resource],resource))

違う単なるコードミスだ。。こうやればいい感じかもかも。
list(map(lambda x: resources[x],resource))

ダンドリーキッチンが優秀作品に選ばれました

会社として取り組みました「ダンドリーキッチン」で
KIAアプリコンテスト2017で優秀3作品に選ばれました。
5万円獲得決定やりました!!!

www.kia.or.jp

プレゼンに使用したスライドはこちらです。
食Techでは端折ったスライドも含まれる「完全版」となります。
speakerdeck.com


懇親会では。

タイムラインのUIが万人受けしないという意見が出ました。
vis.jsのtimeline機能を利用してます。確かにそこは感じているところです。
クラッチで開発する実装力がないのでライブラリでなんとかしたところです。(痛)

あとは、使ってみたいという意見もでました。これはGaiaxさんの食Techでも
コメントいただいたのでなんとか早く世の中に出したいですね。
あれこれしているうちに先行されてしまいそうですね。

やっぱりビジネスにするところまでやって初めて成功と言えるので。
そこは誰も教えてくれないところで、
できたら、「料理研究家」さんや、大学の「栄養学部みたいなところ」と組んでみたいですね。

でも、そんな予算はないだろうから、自分でレシピ研究するのがいいかも。

希望では誰も動いてくれなくて、情熱を持ってやらないとダメなんですよね。

はい。なんとかしたい。

食TechでLTしてきました

食に関するWebアプリ(料理の段取りを自動的に計画してくれるアプリ)をコンテスト向けに制作していたので
ちょうどいいので発表してきました。

こう言った業務という括りで勉強会は新鮮でいい感じですし
普段交流しない新たな出会いがありました。

gaiax.connpass.com

ただ、発表自体は原稿を用意しているもののいつものアドリブしちゃう癖が出て
だいたい原稿に書いた内容をいい感じに自分の言葉でペラペラ喋っただけです。
いいんだろうか。

デモした時に会場から歓声が湧き上がり、実装の苦労が報われた気がします。
まだ一般公開していないアプリなのでもう少し洗練させて
なんとか一般公開まで持っていきたいのです。

登壇しているエンジニアさんはとても、スキルが高そうで
すごいなぁ。
私のようなおじさんで陳腐なスキルでどうやっていきていくかと
最近は悩みまくりですが、答えは得られないですね。
とにかく、子供もいるし、なんとか生きて行かないと
いけないということです。