anyenvをシステムワイドにインストールしようとした

環境はUbuntu16.04

anyenvをシステムワイドにインストールしてrbenvいれようとしたら、sslのチェックを無視しないと入らなかった。 rbenvからrubyをインストールしようとしたらダウンロードに失敗してできない。

結論から書くと

apt-get install ca-certificates して、ca-certificates入れてからrbenv install を再度試したら成功した。

Selenium WebDriver を試してみた

環境は

• Ubuntu 16.04
• Python 3.6.1

ついでにChromeのheadlessモードも試す。

事前準備

pyenvで3.6.1を入れてお試し環境にセットする

gecko driverをダウンロード Release v0.17.0 · mozilla/geckodriver · GitHub ※任意のバージョンを入れる。

PATHを通す。今回は/usr/local/sbin/に置いて勝手にPATHが通るようにした。

Chromeを最新にする

バージョン59にする。 ChromeDriverDownloads - ChromeDriver - WebDriver for Chromeをダウンロードしてgeckodriverと同じくPATHの通った場所に配置する。

WordPressのテーマを作成してみた

レスポンシブな自作レイアウトをWordPress用テーマを作成してみた。
今確認してみたら、いくつかおかしい箇所が見つかった(´・ω・`)

大雑把な構成

以下のファイルを作成した。

絶対TOP表示に使うマン

WordPressには特定の名前のテンプレートは決められた使われ方をする。
その中でfront-pageはTOPに使われる最上位の名前、他いくつかあって、それらが見つからなかった場合、index.phpが使われる。

パーツを呼び出す

• header.php : get_header() で呼ぶ
• footer.php : get_footer() で呼ぶ
• sidebar.php : get_sidebar() で呼ぶ
• path/to/part.php : get_template_part(‘path/to/part’) で呼ぶ

まとめ

• 簡単な画面構成なら簡単に作れる感じ。
• ページネーション作り忘れた！
• 固定ページへのURLなんか間違えた…

VSCodeでよく使うショートカットなど

基本はEmacsを使うけどWindows環境で何かする場合はVSCodeの方が使いやすいので忘備録てきな

画面

コマンドパレット： Cmd+Shift+p クイックオープン： Cmd+p 統合ターミナル： Cmd+` Zenモードとの切り替え： Cmd+k -> z

エディター

マルチカーソル： Cmd+Opt+矢印 同じ単語(選択済み？)選択： Cmd+F2 選択した単語を同じもののうち、編集してもよさそうなやつだけ編集： F2

Zabbixのアクション定義でリモートコマンドを実行する

サーバーを監視するソフトウェア？Zabbixで、トリガーを元にアクションを起こす場合、メール通知やSlackにPostする以外に対象のホストもしくは任意のサーバーにコマンドを投げて実行することが出来る。

Agent側の設定

Zabbixエージェント側(コマンドを投げつけられる側)の設定ファイルの

#EnableRemoteCommands = 0

となっている箇所をコメントアウトを解除して値を1に変更する。

Zabbix-Agentサービスを再起動してエージェント側は最低限の準備完了

Zabbix: アクションの設定

アクションの設定で実行内容を「リモートコマンド」にして、タイプを「カスタムスクリプト」にする。

コマンドはエージェント側にスクリプトを用意している場合は、それを、用意していない場合は直接コマンドを書く。

パイプが使えるので、何か実行して結果をテキストファイルに追記するとかが可能。

Zabbixは敷居が高いけど便利ですね。

Mastodonをgit cloneして中を見てみる

今流行りのMastodonをgit cloneしてみた。

中は設定ファイルが沢山とrails関係、フロント用のnode_modules、テスト関係、それからVagrantfileやDocker関係のファイル。

ファイル群について

今日は内容をざっと見るところまで。

内訳は、以下です。ディレクトリを意味するものは最期に「/」をつけています。

• ライセンスとかReadmeとかDocumentとか
  • CONTRIBUTING.md
  • ISSUE_TEMPLATE.md
  • LICENSE
  • README.md
  • docs/
• buildpack
  • .buildpacks
• Heroku用設定ファイル
  • .slugignore
  • Procfile
• デプロイツール(サービス)用
  • scalingo.json
• コードレビュー用？設定ファイル
  • .codeclimate.yml
• エディターの設定統一用設定ファイル
  • .editorconfig
• git
  • .git/
  • .gitignore
• 環境変数設定ファイル(もしかしたらRails専用かも？)
  • .env.production.sample
  • .env.test
  • .env.vagrant
• Ruby on Rails関係
  • .rspec
  • .rubocop.yml
  • .ruby-version
  • Capfile
  • Gemfile
  • Gemfile.lock
  • Rakefile
  • app/
  • app.json
  • bin/
  • config/
  • config.ru
  • db/
  • lib/
  • log/
  • public/
  • spec/
  • tmp/
  • vendor/
• JavaScriptのトランスパイルとかビルドとかフロントエンド開発用とか
  • .nvmrc
  • .babelrc
  • .eslintignore
  • .eslintrc
  • node_modules
  • package.json
  • storybook/
  • streaming/
  • yarn.lock
• CI テスト用
  • .travis.yml
• Vagrant
  • .vagrant/
  • Vagrantfile
• Docker
  • .dockerignore
  • Dockerfile
  • docker-compose.yml

きになったところ

• BabelでES7？やデコレータをトランスパイルするためにPlugin入れてる
• ドイツの人が作ったからかScalingoなんていうヨーロッパ圏で流行ってるのかもしれないデプロイツール入ってた
• プルリクされるの前提だからか今時当たり前なのか知りませんがコードレビューサービス用やコーディングルール統一用の設定ファイルが入っていた
• Storybook面白そう
• yarn使ってる？
• Vagrantでのプロビジョニングがshell(Docker出てきて以降シェルゴリが一般的になった気がする。。。)
• Vagrantで、rubyはrbenvで入れるのに、nodeはパッケージで入れてる(バージョンにこだわりはない？)
• VagrantではOSにUbuntu14.04(trusty)を使用している(DebianでもOpenSUSEじゃないんだ)
• Dockerの場合はAlpineなのね。
• Railsのことさっぱりだけど、どうやらsidekiqというgemを使って非同期なキューの処理を実現しているらしい、redisをバックエンドに使うようだ
• Webサーバー用意してリバースプロキシって構造ではないんですね。
• Rails = Unicornというイメージでしたが、Rails5からはPumaが標準搭載とのことでPumaを使っているらしい

多分なんですけど、envファイルを読み解けば、自分用の公開インスタンスを立てることはできそう。 VPSか、Herokuか、単体のDockerコンテナにするかは分かりませんが。

進捗ありません

この1週間、調子が悪かったり仕事に追われたりしていて何も勉強できていない。 少しだけReduxのサンプルを写経して動かない箇所を動くように修正した程度。

ES2015で理解が足りていない事

import Hoge from './hoge'; //hogeファイルの中でexport defaultされたものをHogeとなづけてimport
import * as Hoge from './hoge'; //hogeファイルの中でexportされたもの全てをHogeオブジェクトとしてimport
import { Hoge } from './hoge'; //hogeファイルの中でHogeという名でexportされたものをimport

という理解だったのだけれど、Reduxのサンプルで意図する挙動をしなくて困った。 最終的に記述ミスだったのか、勘違いだったのか、動くようになったけど。

いっぺん基礎を網羅的に勉強しないとダメですね。 しかし、ECMAScript2015のドキュメント原文を読むのはなー。。。

気がつけばMarkdown

いつの頃からかドキュメントはMarkdownで書くようになった。

最初はなんじゃこりゃ書きにくい、意味わからんと思っていた。

でも一度慣れてしまうととても書きやすい。

文章を章立てで考えられるし、VisualStudioCodeにプレビュー機能があってわかりやすい。

そしてBearのようなメモアプリや、何よりHugoのようなMarkdownで書いて静的サイトを生成できるツールに世の中溢れているので、一度慣れてしまうともう戻れない。

WordPressを普通のテキストを書くなんて苦行でしかない。

まとめ

Markdown最高！

進捗

直近の目標に対する結果と進捗

• ブログや静的サイトのテーマをつくり込みたい(Pelican,Hexo,Jekyll,WordPress,Hugo,Sphinx)
• Makerel試したい
• Dockerをある程度使えるようになりたい

ブログや静的サイトのテーマをつくり込みたい

Plican,Hexo,Jekyllについては完了。 Jekyllは二度と触りたく無い。

4月にWordPressのテーマ作成他のテンプレートを作りたい。

進捗としてはまぁまぁ。

期限：5月で変わらず

Makerel試したい

試した。

カスタムメトリクスは真面目にきちんと時間を取らないとだめっぽいので諦めた。

とにかく試したので完了とみなす。

ちなみにトライアル期間終わったのでお金払わないとフル機能試せなくなった。

Dockerをある程度使えるようになりたい

久しぶりに触った。

SwarmやKubernetesはハードル高いので今は諦めた。

ひとまず現状のバージョンのDockerに入れ替えた。

完了としたい。

4月の目標

ブログテーマの作成は引き続き行う。

仕事上の別件が忙しくなるので他の課題を設定せず欲張らず地道にやっていきたい。

最近のフロントエンド事情はまるで発展途上国の交通事情ですか

ES6で書いてES5に変換したいだけなのに、なんなんですか？

ES6からES5に変換したいだけなんだ

Babel

Babelを使えば変換できる。。。

Babelを毎回実行するのだるいからWebpackでタスクランナー的に実行する。

考えはいい。それで十分だし、何も難しいことはなさそうだ。

でもいざ環境を揃えようとすると……

以下をインストールする。

• webpack
• webpack-dev-server
• babel-core
• babel-loader
• babel-preset-es2015

webpack.config.jsと.babelrcにも設定を書く。

これですむのならいい。

実行したら文法エラーが出た。

• babel-preset-stage-0

を追加したら解決した。

なんだよそれ！最初からbabel-coreだけで対応しろよ！

他にもbrowserify,babelifyとかいろいろプラグイン的なものがある。

自分の書いたES6のコードを動くようにするのにいったいどれを入れたら動くのか分からない！

BabelとWebpack

webpackの設定及び.babelrcにも何を変換処理に使うのか書かないとちゃんと変換されない。

webpackに書いただけじゃダメで.babelrcにも書かないといけない。という認識だけど、多分理解が足りなくて本当は綺麗な書き方があると信じてる。

まとめ

ES6で書いてES5に変換するの辛い。

早くブラウザが標準でES6対応してほしい。