AI on PIYO Notes

かゆいところに手が届く！patch-packageでnpmパッケージを乗りこなそう - bagelee（ベーグリー）

タグをカラフルにしたあのとき以来、6年もそのままでした。書こうにもなんとなくテンションが上がらないというのは6年前と同じなんですが、最近Claude DesignとClaude Codeを触ることが増えたので、その流れで一気にリデザインしてみることにしました。

Claude Designでデザインを起こす

Claude DesignはAIにデザインを依頼できるツールで、HTML/CSS/JSのプロトタイプを出してくれます。

ブログのトップとよく開かれている記事のURLを3つほど投げて、ざっくり「リデザインしたい、方向性は特に無し」と相談しました。すると、トーン、アクセントカラー、タイポグラフィ、レイアウトの好みなど、いくつかの質問が返ってきました。

僕はこんな感じで答えました。

ライト&ブライト（白基調）
深い青・緑（落ち着いた知性）
モダンサンセリフ（Noto Sans JP系）
縦長リスト or 2カラム
圧倒的な可読性重視

そしたら4方向の案が出てきました。A案ミニマル縦長、B案雑誌2カラム、C案タイムライン強調、D案タグ駆動カラフル継承の4種です。それぞれトップと記事ページのセットになっていて、Canvas上でアクセントカラーを切り替えながら比較できるようになっています。

A案を選びました。今のブログの正統進化という方向性です。

その後、コードブロックの強化、サイドバーの追加、フッター回りなどを追加で依頼して、A案の仕上げ版が完成しました。

Claude Codeで実装してもらう

Claude Designから出てくるのはあくまでプロトタイプなので、ブログに反映するにはHugoのテンプレートに適用する必要があります。

ここから先はClaude Codeに任せました。Claude DesignにはClaude Codeへ直接ハンドオフできるプロンプトが用意されていて、そのプロンプトをコピペするだけで開始できます。ハンドオフされたプロジェクトの中のREADMEを読みつつ、意図を汲んで実装してくれます。

書き換えてもらった範囲はこんな感じです。

layouts/partials/styles.css — デザイントークン入れ替え + 新コンポーネントCSS
layouts/_default/baseof.html — スティッキーヘッダー + リッチフッター
layouts/_default/list.html — 年見出しグルーピング
layouts/_default/summary.html — 記事ページ構造
layouts/_default/li.html — リストアイテム
layouts/partials/sidebar.html — About / Popular / Latest / Tags
layouts/partials/share.html — シェアボタン (X / はてブ / URLコピー)

このあたりを一気に書き換えてもらって、全ページ問題なくビルドされることを確認しました。

また、その過程でローカルのHugoバージョンだとhugo.IsServerが動かないとか、node_modulesが消えていたとか、一部のショートコードが未定義だったとか、付随する問題もいくつか見つけてもらって、それぞれ潰してくれました。

細かい調整

実装してもらったあと、ブラウザで眺めながら気になるところを直してもらいました。

ブログタイトルを変更
サブタイトルも変更
特別意味のないbio文を削除
ヘッダー/メイン/フッターで横位置がズレていたのを揃える
コードブロックが二重にハイライトされて崩れていたのを、Chroma単体に整理
ファビコンを同心円のシンプルなデザインに刷新

ファビコンもClaude Designに何パターンか作ってもらって、その中から同心円のシンプルなSVGを採用しました。それをClaude Codeに渡したら、各サイズのPNGへの変換やICOの作成、置き換えという流れを全部やってくれました。

ヘッダーとフッターには同じマークをインラインSVGで配置していますが、fill/strokeをcurrentColorにしておいて、CSS側でcolor: var(--accent)（ヘッダー）とcolor: #fff（フッター）に切り替えるようにしました。1つのSVGで明背景にも暗背景にも対応できます。

おわり

6年前はTailwindの9色でカラフルなタグを実装したのを、今回はNavy一色の単色ピルにぜんぶ置き換えました。見た目を変えてテンションを上げる、という動機は6年前と変わっていません。

patch-packgeでpackage.jsonの差分を含める

Wed, 13 May 2020 06:13:40 +0900

patch-packageっていうnpmパッケージありますよね？

この記事↓が詳しいので紹介はだいぶ任せちゃうのですが、npmパッケージを手元でちょっとだけ直したいときに重宝する仕組みです。

npmパッケージを利用する際、バージョンの違いなどで動かなかったり、少しだけカスタマイズしたいといったような場面に遭遇することはないでしょうか？そんなときに使えるpatch-packageというツールをご紹介します。

bagelee.com

使い方はこう。

手元でnode_modules配下のとあるパッケージのコードをいじる
npx patch-package xxx_target_package を実行
1の差分のpatchができる
post-installに書いとけば自動的にpatchが当たる

（もちろん明らかな問題の場合はプルリクエストを投げるなりIssueで報告するなりが望ましいのですが、React Nativeのライブラリに含まれるネイティブコードがまれによく壊れる関係で、こういう仕組みも必要なのです！！）

なんですが！

パッケージによってはimport時にビルド済のコード（distとか）が参照されるために、パッチを当てにくい場合があります。

minifyされたコードを無理やり変更してnpx patch-packageした場合、コード全部がパッチ対象になるのでかなり厳しいことになります。

ところで昨今、大抵のプロジェクトではアプリケーション側で何かしらのビルドの仕組みを入れていることが多いと思われます。であればimport対象をビルド前のソースコードにして、アプリケーション側でビルドさせてしまうこともできるはず。そしてそうすればpatch-packageの修正も数行に収めることができるはずです。

ということで、とある架空のプロジェクトのpackage.jsonにこういう変更を加えます。

1--- a/node_modules/xxx-lib/package.json
2+++ b/node_modules/xxx-lib/package.json
3@@ -108,7 +112,7 @@
4- "main": "dist/index.js",
5+ "main": "src/index.js",
6 "name": "hogehoge",

そして実際に変更を加えたいところも直してnpx patch-packageします。

するとなんと、package.jsonへの差分が無視されてしまいます。実はpatch-packageには除外の仕組みがあって、package.jsonは除外対象となっているのです。

Fails to recognize diffs in package.json · Issue #219 · ds300/patch-package

I was trying to modify a package's main field, but patch-package reported no changes found my guess is the package.json is intentionally ignored to avoid anomalous diffs made by package managers. b...

LSUIElement | Apple Developer Documentation

ということで、今回の場合は↓のように除外対象を上書きすることでpackage.jsonを対象にできました。

npx patch-package xxx-lib --exclude '^$'

バッテリー監視のMacアプリを作ったんだけど難しかった

Tue, 12 May 2020 21:39:12 +0900

久しぶりにMacアプリを作りました（5年ぶりぐらい）。難しかったです。

5年ぶりぐらいにMacのネイティブアプリ書いたけどさー、相変わらず情報なさすぎるしiOSの情報ばっか出てくるからググりにくいし、世の中のMacアプリ書いてる人はみんな天才なのかな？と思うよね
— 大野ぴーちゃん (@pi_cha_n) April 26, 2020

Macbook Proをドッキングステーション経由の給電で使ってるせいか、たまに接触が悪いのか充電できない状態になることがあります。気がついたらバッテリー切れでMacが死んでしまうのでとても不便です。

バッテリー残量監視アプリはストアにいくつか並んでいますが、これらはたいていMacの通知センターで通知してくれます。おやすみモードを有効にしているときや離席中にはMacの通知では気づけません。そこで、定期的にバッテリー残量を監視してSlackやその他ツールのWebhookのURLにメッセージを投げることができるアプリを自分で作りました。特にストアなどには公開していません。

ステータスバーへの表示

いわゆる常駐アプリのような形で作ったので、ステータスバーへの表示は必須と考えました。

ステータスバーへのアイコン表示は↓のような感じで実現できました。ここではImage AssetとしてIcon.pdfというファイルがあるとします。

（カラーアイコンの表示方法はわかりませんでした。白黒のPDF画像を用意しておくとダークモードかどうかで自動的に色を反転させてくれるようです。）

1let statusBarItem = NSStatusBar.system.statusItem(withLength: CGFloat(NSStatusItem.squareLength))
2if let button = self.statusBarItem.button {
3 let size = NSMakeSize(22, 22)
4 let image = NSImage(named: "Icon")
5 image?.size = size
6 button.image = image
7}

ステータスバーのアイコンを押したらメニューを出すのがよくあるパターンだと思います。先程のstatusBarItemにメニューを追加すると表示してくれるようになります。

 1let statusBarMenu = NSMenu(title: "Menu")
 2statusBarItem.menu = statusBarMenu
 3statusBarMenu.addItem(
 4 withTitle: "Preferences...",
 5 action: #selector(AppDelegate.togglePopover),
 6 keyEquivalent: "")
 7
 8statusBarMenu.addItem(NSMenuItem.separator())
 9
10statusBarMenu.addItem(
11 withTitle: "Quit",
12 action: #selector(AppDelegate.quit),
13 keyEquivalent: "")

設定、セパレータ、終了の3つを並べています。action引数にはメニューを押したときの挙動をかけます。このアプリでは、設定メニューは設定画面Popoverの切り替えを、終了メニューは単にアプリを終了させる処理を書いています。

Dockに表示させない

Info.plistにLSUIElement = trueな設定を追加することでアプリアイコンをDockに表示させないようにできます。

LSUIElementはバックグラウンドアプリのための設定です。

A Boolean value indicating whether the app is an agent app that runs in the background and doesn’t appear in the Dock

A Boolean value indicating whether the app is an agent app that runs in the background and doesn’t appear in the Dock.

Explains how to write background processes that perform work on behalf of applications or serve content over the network.

1# Info.plist
2<key>LSUIElement</key>
3<true/>

SwiftUI

SwiftUIが発表されて依頼はじめてマジメに触りました。今回はせいぜい設定画面のみでたくさんの画面を作るわけではないのでSwiftUIを採用してみました。

プレビュー

SwiftUIでUIを定義すると、Xcodeが即座にプレビューを更新してくれます。最初は即座に確認できて便利、、、と思っていました。

しかし、ちょっとタイピングして保存とするとすぐにプレビューを更新し、エディタ部分のフォーカスが失われるのでめちゃくちゃ不便ということがわかりました。しかもしらないうちにプレビューが壊れていたりして、Resumeしないと動かないという。

これは僕の感想ですが、まだ実用的ではないなと思いました。

Toggleのクセ

今回SwiftUIを使ったのは設定画面です。設定画面なので、値を変更したら即座にUserDefaultsに保存しようと考えていました。

当初TextFieldやSliderはonEditingChangedで変更を検知できるので、そのタイミングで保存処理を書いていました。

しかし後述する「ログイン時に起動」をToggle（チェックボックス）で実現しようとしたときに困ったことになりました。ToggleにはonEditingChangedがなかったのです。

プロパティのdidSetで実現できないかとか、もっと苦しいワークアラウンド（空のテキストを返す関数を定義してViewに埋め込み、その関数内でToggleの値を使って処理する）とか、色々考えました。しかしUserDefaultsの保存のコードがうまく動かないし、そもそもワークアラウンドだと関数が何度も呼ばれてしまうなど、あまりよろしくありません。

変更を検知できないなら、ユーザーが保存ボタンを押すしかないだろうということで、保存ボタンをキャンセルボタンを設けることにして逃げました。

ログイン時に起動

常駐アプリであるからには、Macを再起動したときにも勝手に立ち上がって欲しいですよね。これを実現するにはService Management Frameworkという仕組みを使ってログイン時に起動する項目に追加する必要があるようです。

Adding Login Items

GitHub - sindresorhus/LaunchAtLogin-Legacy: Add “Launch at Login” functionality to your macOS app in seconds

Service Management Frameworkについての情報（特に日本語情報）はあまり多くないのですが、幸いまるっとライブラリ化されているOSSがあったので、それを活用させてもらうことにしました。

Add “Launch at Login” functionality to your macOS app in seconds - sindresorhus/LaunchAtLogin-Legacy

JetBrains Mono: A free and open source typeface for developers

導入はとても簡単で、Run Script Phaseにスクリプトを追加することと、コードを少々追加するだけです。

今回の僕のアプリでは設定画面を保存する際に、Toggleの状態に応じて設定を更新してやるだけでいけました。

1import LaunchAtLogin
2
3// Toggleのstate
4@State private var launchAtLogin = false
5
6// 保存時
7LaunchAtLogin.isEnabled = self.launchAtLogin

これだけで実際にログイン時に起動してくれるようになりました。自分で書いていたらMacの作法に乗るのが大変だったと思うのでこのライブラリには感謝しています。

フォント JetBrains Monoが素敵だったので導入しまくった

Thu, 07 May 2020 06:01:57 +0900

JetBrains Monoが素敵すぎていろんなエディタに設定して回ったという話です。

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose.

www.jetbrains.com

まあ↑をみにいってくれればそれまでなのですが、以下のようにプログラミングに適したフォントでオープンだという特徴があります。

高さを増やして可読性を向上
コードリーディングに最適化
コード固有のリガチャ
JetBrains Monoは無料かつオープンソースです

特にリガチャがかっこよかったので即導入です。

!==とか>=とか<=とか~=とか、こうなるんですよ！

このブログにも似たようなフォントであるFira Codeを入れているので、それっぽいリガチャになってるはず…！

ちなみにFira Codeはこちらです。こちらもリガチャが使えます。

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub.

https://github.com/tonsky/FiraCode/wiki/Emacs-instructions#using-composition-char-table

Emacsでの設定

JetBrains Monoを僕のメインエディタであるEmacsで設定する方法については特に情報がなく、色々調べていたらほぼFiraCodeと同じ設定方法でいけることがわかりました。

Mac port版のEmacsでは一行書けば動くようなのですが、僕のEmacsは色々パッチを当てたりなんだりだった気がしなくもない（覚えてない）ので、↑のWikiにあるのを順に試していった結果↓のコードで動くようになりました。ただし、一部エラーが発生したので46をコメントアウトしました。

 1;; フォント設定
 2(set-face-font 'default "JetBrains Mono-14")
 3
 4;; リガチャを有効にする
 5(let ((alist '((33 . ".\\(?:\\(?:==\\|!!\\)\\|[!=]\\)")
 6 (35 . ".\\(?:###\\|##\\|_(\\|[#(?[_{]\\)")
 7 (36 . ".\\(?:>\\)")
 8 (37 . ".\\(?:\\(?:%%\\)\\|%\\)")
 9 (38 . ".\\(?:\\(?:&&\\)\\|&\\)")
10 (42 . ".\\(?:\\(?:\\*\\*/\\)\\|\\(?:\\*[*/]\\)\\|[*/>]\\)")
11 (43 . ".\\(?:\\(?:\\+\\+\\)\\|[+>]\\)")
12 (45 . ".\\(?:\\(?:-[>-]\\|<<\\|>>\\)\\|[<>}~-]\\)")
13 ;; (46 . ".\\(?:\\(?:\\.[.<]\\)\\|[.=-]\\)")
14 (47 . ".\\(?:\\(?:\\*\\*\\|//\\|==\\)\\|[*/=>]\\)")
15 (48 . ".\\(?:x[a-zA-Z]\\)")
16 (58 . ".\\(?:::\\|[:=]\\)")
17 (59 . ".\\(?:;;\\|;\\)")
18 (60 . ".\\(?:\\(?:!--\\)\\|\\(?:~~\\|->\\|\\$>\\|\\*>\\|\\+>\\|--\\|<[<=-]\\|=[<=>]\\||>\\)\\|[*$+~/<=>|-]\\)")
19 (61 . ".\\(?:\\(?:/=\\|:=\\|<<\\|=[=>]\\|>>\\)\\|[<=>~]\\)")
20 (62 . ".\\(?:\\(?:=>\\|>[=>-]\\)\\|[=>-]\\)")
21 (63 . ".\\(?:\\(\\?\\?\\)\\|[:=?]\\)")
22 (91 . ".\\(?:]\\)")
23 (92 . ".\\(?:\\(?:\\\\\\\\\\)\\|\\\\\\)")
24 (94 . ".\\(?:=\\)")
25 (119 . ".\\(?:ww\\)")
26 (123 . ".\\(?:-\\)")
27 (124 . ".\\(?:\\(?:|[=|]\\)\\|[=>|]\\)")
28 (126 . ".\\(?:~>\\|~~\\|[>=@~-]\\)")
29 )
30 ))
31 (dolist (char-regexp alist)
32 (set-char-table-range composition-function-table (car char-regexp)
33 `([,(cdr char-regexp) 0 font-shape-gstring]))))

VSCodeでの設定

VSCodeはさすがに簡単でした。

Font FamilyにJetBrains Monoを追加します。

さらにリガチャを有効にしたい場合には、設定ファイル（Settings.json）に以下を記載します。

1 "editor.fontLigatures": true,

…ブログはFira Codeで

ブログにも入れるぞーと一瞬思ったものの、Fira CodeがCDNで配信されていて簡単そうだったのでFira Codeを使うことにしました。

なので設定はめちゃくちゃ簡単でした。

1@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@3/distr/fira_code.css);
2body { font-family: 'Fira Code', ...other fonts; }

ソースコード部分だけじゃなく、全体でFira Code最優先にさせてしまえ！ということで本文や見出しなどでも英字部分はFira Codeになっているはずです。

Hugoブログのタグをカラフルにしてみました

Tue, 05 May 2020 16:45:46 +0900

GW中にブログの見た目をだいぶいじりました。

ブログ書こうにもなんとなくテンションがあがらないのを見た目を変えることで無理やりテンションを上げるという作戦です。

久しぶりだったこともありローカルサーバーを動かすところですら苦労したのですがそれはまた後日メモするとして、今日は新しい見た目でちょっとだけ頑張った、タグ表示の色付けの部分を紹介したいと思います。

記事中のタグ部分をHugoで処理するときには、タグの配列をループしてその中身（タグ本体）に対してHTMLを書くような感じで定義します。

たとえばこんな感じで、ulの中にliを並べたりします。

 1{{ $params := .Params }}
 2{{ range $key, $value := $.Site.Taxonomies }}
 3{{ if isset $params $key }}
 4<ul class="taglist">
 5 {{ range (index $params $key) }}
 6 <li class="tagitem">
 7 <i class="fa fa-tag"></i>
 8 {{ . }}
 9 </li>
10 {{ end }}
11</ul>
12{{ end }}

ただし、この方法だと全てのタグが同じ見た目になってしまいますよね。

今回の見た目の変更では、タグ用の色を何色か用意してある程度ランダムに割り振るということを行いました。ただし、同じタグはいつも必ず同じ色になるようにしなければいけません。ビルドするたびにタグの色が変わっては行けないし、あるタグが別の記事に紐付いたときに色が変わるようではいけません。つまりただランダムに色を割り振るだけではダメということです。

タグを唯一識別する情報はタグ名です。なので、タグ名からあるロジックで色を割り振ることができれば良いと考えました。

タグの実装

Tailwindの導入

そしてココから先は割と力技でいきました。

まずタグの見た目には、Tailwind CSSというユーティリティ用のクラスがたくさん定義されているCSSフレームワークを用いました。

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

このフレームワークには背景色用のclassがいくつか定義されていて、グレースケール系を除くと、

red
orange
yellow
green
teal
blue
indigo
purple
pink

の9種類です。

また、それぞれにbg-red-600やbg-green-100のように数値で色の段階を指定できます。

参考） https://tailwindcss.com/docs/background-color/#app

今回はこれらの9色にタグを割り振ることにしました。

1<span class="text-xs mr-2 py-1 px-2 items-center bg-red-600 text-red-100 leading-none rounded-full flex inline-flex">
2 <i class="fa fa-tag" aria-hidden="true"></i>
3 タグだよ
4</span>

Tailwindの他のクラスも駆使して↑のようなHTMLを書くと、↓のようなタグを出せます。

タグだよ

タグ名から色名にマッピングする

タグ名をキーとして、なんらかの計算を駆使して色名にマッピングすることができれば、あとは表示するのは簡単です。

9色に分けるという点から、整数を9で割った余りを使うのがよさそうだと考えました。つまり、タグ名を何らかの整数値に変換した上で9で割った余りを得て、その数値を色名配列のインデックスとして用いることで色名を得るというアイデアです。

そして、Hugoではこれをなんとか実現できましたので、コードを紹介します。

まず最初に紹介したようなループでタグを書き出す部分ですが、ここは大きく変わらずに↓のようになります。

 1{{ $params := .Params }}
 2{{ range $key, $value := $.Site.Taxonomies }}
 3{{ if isset $params $key }}
 4{{ range (index $params $key) }}
 5
 6<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-xs">
 7 <span class="mr-2 py-1 px-2 items-center bg-{{ $variant }}-600 text-{{ $variant }}-100 leading-none rounded-full flex inline-flex">
 8 <i class="fa fa-tag mr-1" aria-hidden="true"></i>
 9 {{ . }}
10 </span>
11</a>
12
13{{ end }}
14{{ end }}
15{{ end }}

HTMLになっている箇所の大部分が先程紹介したタグ定義の部分です。ここで注目してもらいたいのが、bg-{{ $variant }}-600 text-{{ $variant }}-100のところです。

$variantという変数にTailwindの色名が適切に割り振られることで、色違いのタグを実現できます。

次に、その$variantを計算するところです。

1{{ $colors := slice "red" "orange" "yellow" "green" "teal" "blue" "indigo" "purple" "pink" }}
2
3{{ $val := ((md5 .) | replaceRE "[0a-z]" "") }}
4{{ $val = substr $val 0 5 | int }}
5{{ $mod := mod $val (len $colors)}}
6{{ $variant := index $colors $mod }}

コードの意図は上のから順にこうです。

色の配列を定義
タグ名のmd5ハッシュを計算し、その結果から0とアルファベットを除去
↑の結果の先頭5桁を整数に変換する
↑の整数を $colorsの要素数（9）で割った余りを得る
↑の余りをインデックスとして$colorsから色名を得る

Hugoのこのあたりの関数を使いました。

コード全体はこんな感じになりました。

 1{{ $colors := slice "red" "orange" "yellow" "green" "teal" "blue" "indigo" "purple" "pink" }}
 2
 3{{ $params := .Params }}
 4{{ range $key, $value := $.Site.Taxonomies }}
 5{{ if isset $params $key }}
 6{{ range (index $params $key) }}
 7
 8{{ $val := ((md5 .) | replaceRE "[0a-z]" "") }}
 9{{ $val = substr $val 0 5 | int }}
10{{ $mod := mod $val (len $colors)}}
11{{ $variant := index $colors $mod }}
12
13<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}" class="text-xs">
14 <span class="mr-2 py-1 px-2 items-center bg-{{ $variant }}-600 text-{{ $variant }}-100 leading-none rounded-full flex inline-flex">
15 <i class="fa fa-tag mr-1" aria-hidden="true"></i>
16 {{ . }}
17 </span>
18</a>
19{{ end }}
20{{ end }}
21{{ end }}

おしまい。

Soundflowerを使ってMacで再生中の音声をMacのサウンド入力にする

Mon, 08 Jul 2019 17:00:38 +0900

Macの画面収録と合わせて、Mac上で鳴っている音を録音したくなったことがあります。

音を鳴らした状態で画面収録＋録音をするとMac標準のマイクで音を拾ってしまうので音が割れるなどして劣化します。微妙です。

今回の用途は子どもの習い事に関するものなのですが、やろうと思えば再生中の音楽を録音する、みたいなことができてしまうので要注意です。

で、その方法ですが、こちらのSoundflowerというツールを使います。

GitHub - mattingalls/Soundflower: MacOS system extension that allows applications to pass audio to other applications. Soundflower works on macOS Catalina.

MacOS system extension that allows applications to pass audio to other applications. Soundflower works on macOS Catalina. - mattingalls/Soundflower

https://github.com/mattingalls/Soundflower/releases/tag/2.0b2

インストール方法や使い方の説明はむしろこちらにあります。

カーネルエクステンションを入れたら出力デバイスを作るという流れです。

Soundflowerのインストール

まずは、2.0b2のページ下部のリンクからSoundflower-2.0b2.dmgをダウンロードし開きます。中にSoundflower.pkgが入っていますので、ダブルクリックなどして開き、インストールを始めます。

ただし、初回は失敗します。

先程のダウンロードページにあるように、設定のセキュリティとプライバシー、設定ペインでsoundflowerを許可する必要があります（すいません、スクショは撮れず）。

The first time you run the installer (Soundflower.pkg), it will ask for your admin password, and will FAIL! A security alert will appear, with a button to take you to System Preferences "Security & Privacy - General" pane. Once there, there should be an "Allow" button (**) that you will need to click on to give permission to use Soundflower (developer: MATT INGALLS). Then, RUN THE INSTALLER AGAIN. It should inform you installation was successfull.

その上で再度Soundflower.pkgを実行すればインストール完了となります。

Soundflowerという名前のオーディオデバイスが作成され、音声入力として利用できるようになります。

ただし、これだけではMacで鳴っている音を入力として使うことができません。Macの音をSoundflowerに流すような設定が必要です。

出力デバイスの作成

続いて出力デバイスを作ります。

SpotlightなどでMIDIと入力するとAudio MIDI設定.appという名前のアプリがみつかりますので、こちらのアプリ上で設定を進めます。

左下の+ボタンを押す
複数出力装置を作成
新しくできた装置を選び、右側から内蔵出力、Soundflower(2ch)の2つを選ぶ

ここで作った複数出力装置をサウンド設定から出力に変更することでSoundflower(2ch)にMacの音が流れるようになります。

あとは音声入力としてSoundflowerを選ぶことでMacで鳴っている音を色々なアプリでも使えるようになります。

Nuxt.jsと同等ESLint設定を他のプロジェクトでも使う

Sat, 09 Mar 2019 06:57:20 +0900

先日書いたようにVisual Studio Codeを使い始めました。

Emacs卒業なるか。JS用のエディタとしてVS Code使い始める際に設定したこと。 - PIYO Notes

普段使いのエディターはEmacsでして、仕事で一番書いている割合の多いRailsやテキストを書く際に使っています。 JavaScriptが面倒です。JSXやVueコンポーネントなど少々複雑なフォーマットのファイルを編集したり、サクっとESlintを書けたりするのがうまくいきません。いや、できないことはないけど惜しい感じで便利ではないのです。

GitHub - nuxt/eslint: Collection of ESLint-related packages for Nuxt

いざ手持ちのReact NativeプロジェクトをVS Codeで開いて編集し保存したら自動的にESLintによるフォーマットが効いてくれた！

のですが…、保存のたびに結果が変わる挙動をしてしまいました。かわるというか、2つのパターンを行ったり来たりというか、結果が揺れる感じです。

そのプロジェクトはReact Nativeのプロジェクトで、保存のたびに↓のような感じで

1<View
2 style={...}
3>

となったり、

1<View
2 style={...}
3 >

のようになったりといったり来たり。こんなの困ります。保存するたびに差分ができるなんて！

まあね、言われてみればESLintの設定をごちゃっとやっていてなんだかよくわかっておらず設定した節があります。どこかに矛盾があるんですかね。

そこでESLintの設定を見直すことに。

NuxtのESLintがよかった

Nuxt.jsを触ったとき、ESLintの効きがちょうどいいなーと思った記憶があります。それを思い出して調べてみると、Nuxtのプロジェクトに@nuxtjs/eslint-configなるパッケージが入っていました。

Collection of ESLint-related packages for Nuxt. Contribute to nuxt/eslint development by creating an account on GitHub.

itunes.apple.com →https://itunes.apple.com/jp/app/working-copy/id896694807?mt=8

あのいい感じにできるのならやってみようかなと思い、READMEにしたがって入れてみました。そして、既存の.eslintrcをバッサリ捨てて新しく以下のように書き換えて実際にファイルを触ってみると、保存のたびに結果が揺れることがなくなりました。

 1{
 2 "root": true,
 3 "parserOptions": {
 4 "parser": "babel-eslint",
 5 "sourceType": "module"
 6 },
 7 "extends": [
 8 "@nuxtjs"
 9 ]
10}

React/React Nativeでの追加設定

NuxtはVueベースなので、React Nativeに関係する指摘をしてほしい場合にはルールが足りません。

eslint-plugin-react
eslint-plugin-react-native

の導入と設定追加を行います。

1% npm install --save-dev eslint-plugin-react
2% npm install --save-dev eslint-plugin-react-native

.eslintrcに以下のように追加。

 1{
 2 "plugins": [
 3 /* ... */,
 4 "react",
 5 "react-native"
 6 ],
 7 "extends": [
 8 /* ... */,
 9 "@nuxtjs",
10 "plugin:react/recommended",
11 "plugin:react-native/all"
12 ]
13}

pluginsの指定は必須、extendsするのか、個別にルールを選んでいくのかはお好みです。

Working CopyとGoCoEditでiPadでコードリーディング

Thu, 07 Mar 2019 05:37:22 +0900

iPhoneが出てからというもの、ソースコードリーディングを暇な時にできればなーとずっと画策していたのですが、なかなかかなわず。

iPadでコードを書ける環境を整備するってのをちょくちょく見かけてたし、つい最近もバズったのがあったんで改めて調べてみました。

いつも「iPad コードリーディング」などと調べることがいいんですが、観点を「読む」から「書く」に変えて「iPad プログラミングエディター」などと調べてみました。

なぜか今まであまり考えたことがなかったけど、プログラミングができるなら読むのだってそれなりにできるはずです。

Working Copy

まずGitHubを参照するにあたり、Working Copyというアプリを入れます。

Working CopyはiOSデバイスで動くGitクライアントでリポジトリをクローンしたり、手元でファイルを変更してリモートリポジトリへPushしたり色々なことができます。

実はこれ単体だけでもそれなりにコードを読むことができます。ディレクトリツリーを辿ってファイルを開けるし、ある程度シンタックスハイライトしてくれるし、シンボルの検索もできます。

読みたいプロジェクトによってはこれだけでも十分使えるレベルと言えそうです。

キャプチャでちょっと紹介します。

`rails/rails`をクローンしてみる

中身を見たり検索したり

なかなか、それなりに見えますよね。

iPadでも使える

サイドバーとエディター画面にわかれているのでもう少し使いやすいです。

Working Copyの弱点

iPhoneにしてもiPadにしてもナビゲーションが大変です。ファイルの移動をするのにディレクトリを戻ったり潜ったり。

iPadはサイドバーがありますが、選べるのは同一階層のみ。別階層のファイルを交互に読みたいときなどには適していません。

シンタックスハイライトが弱い

hamlとかvueとか、プログラミング言語そのものではないフォーマットのハイライトができません。

たとえばvueコンポーネントはこんな感じになっちゃってまともに読めません。実は最近Vueアプリのコードを読みたいと思っていたのでこれは困ります。

そこでGoCoEdit

そんな弱点を補ってくれるのがGoCoEditというiOSアプリです。買い切りの有料アプリで、大体1000円ほど。ファイルの移動やシンタックスハイライトもだいぶ快適です。

itunes.apple.com →https://itunes.apple.com/jp/app/gocoedit-code-text-editor/id869346854?mt=8

iCloud Driveからファイルの読み出しができるほかGoogleDriveやDropboxなどとも連携できますが、なんといってもWorking Copyからファイルをまるっと読み出せるのが良いです。

つまりGitHubからCloneしたリポジトリのコードを全部GoCoEdit側で開くことができ、Working Copyよりも便利にコードを読めるというわけです。

初期設定ではエディター部を選択したときにかならずキーボードが開いてしまいますが、これは設定の「Enable Auto-Keyboard」の設定を無効にすることで回避でき、読むことに専念できます。

参考までにスクショを載せてみます。まずはファイルツリー。

続いてVueコンポーネントのシンタックスハイライト。ちなみにこちらのスクショでは画面上部にファイルごとのタブが見えるのがわかります。開いているファイルはタブで切り替えることも可能です。

この組み合わせでコードリーディングを捗らせたいです。

Emacs卒業なるか。JS用のエディタとしてVS Code使い始める際に設定したこと。

Tue, 05 Mar 2019 09:42:33 +0900

普段使いのエディターはEmacsでして、仕事で一番書いている割合の多いRailsやテキストを書く際に使っています。

JavaScriptが面倒です。JSXやVueコンポーネントなど少々複雑なフォーマットのファイルを編集したり、サクっとESlintを書けたりするのがうまくいきません。いや、できないことはないけど惜しい感じで便利ではないのです。

そこでこれまではWebStormを使ってきました。有償のIDEで必要な機能は大体揃っているし、JSの対応もバッチリでほぼ言うことありません。

WebStormの唯一の欠点は鈍重であることです。いちいち動作が遅いし、メモリを食うので他のアプリケーションへの影響もあります。正確にいえばメモリ使用上限は設定ファイルで書き換えられますが、メモリを食わないようにすると動作がもっと遅くなるという状況に陥るため詰んでいます。

そこで大体としてVisual Studio Codeを試してみることにしました。なんとなくイメージ的にJavaScriptな人がよく使っている印象があったからです。

入れたもの・変えた設定メモ

前置きが長くなりましたが、EmacsユーザーとしてCodeにも入れておきたい拡張や設定などをメモしておきます。

というのも、しばらく使ってみて諦める可能性が高く、そしてさらにしらばく経ってからまたVS Codeに戻ってみようと思うことになるのが目に見えているからです。そうです、「VS Codeでも使ってみるか」と思ったの、これで3回目ぐらいです。

EmacsとWebStorm（というかJetBrains系）のいいとこどりというか、無理なくできる範囲で設定しました。

ようこそ画面非表示

GHQ

各ソースコードをGHQ管理にしているので入れてあります。いつも開くプロジェクトはctrl+rでいいけど、たまに開くプロジェクトの場合はGHQ必須です。

marketplace.visualstudio.com →https://marketplace.visualstudio.com/items?itemName=marchrock.vscode-ghq

Expand Selection

カーソル位置を基準に選択範囲を広げられる拡張、必須です。選択するのって大体変数とか文字列といった単位なので。

expand-region - Visual Studio Marketplace

Extension for Visual Studio Code - expand selection , It works similar to ExpandRegion for Emacs and “Structural Selection” (Control-W) in the JetBrains IDE's (i.e. IntelliJ IDEA).

Monokai GRS - Visual Studio Marketplace

ESLint

ESLintを入れて保存のたびauto fixさせるようにしました。

Monokai Theme

最初から入っているMonokaiテーマはRubyのインスタンス変数@hogehogeをハイライトしれくれませんでしたので、他のMonokaiを入れました。

Extension for Visual Studio Code - Dark theme based on color schema Monokai

Visual Studio Code でEmacsのリージョン選択できるExtensionを作ってみた - にわとりプログラマーの備忘録

マルチカーソル

VS Codeに最初からはいってますね。cmd+dでいけそうなのでひとまず使ってみます。

プロジェクトツリー

サイドバーにちょっとクセがありました。

Macだとenterキーでリネームになってしまいますが、リネームはめったにありませんのでそのまま開いてほしい。あとはエディターグループを新しく開くのも好きじゃなかったのでちょっと設定をいじりました。

enterにあたっていたrenameFileをはずし、ctrl+enterにもっていくことで、enterでファイルを開けるようになりました。

 1 {
 2 "key": "ctrl+enter",
 3 "command": "renameFile",
 4 "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
 5 },
 6 {
 7 "key": "enter",
 8 "command": "-renameFile",
 9 "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
10 },

画面分割

Emacsユーザーとしては画面をゴリゴリに分割したいという要望があります。そこを求めてしまうとEmacsからは出られなくなりますのである程度妥協します。

VS Codeではcmd+1、cmd+2などのキーでグループという列に移動できます。グループにはエディターのタブが含まれる感じ。今画面上にあるグループよりもひとつ上のグループへ移動しようとする（ショートカットキーを押す）と自動的にあたらしいグループが作られます。

例）グループ2まである場合、cmd+3でグループ3が開く。cmd+4は何も起こらない。

最近開いたファイルへの移動

最近開いたファイルへ移動する手段がほしい。Emacsでいうところのopen-recentみたいなやつ。これは最近開いたファイルというよりは、同時に編集しているファイルへ戻りたいという意図が強いです。

僕はWebStorm等のIDEに合わせてcmd+eにquickOpenを割り当てています。

Bookmark

ブックマークのトグル
次のブックマークへ移動
前へ移動

の3つにEmacs時代と同じキーバインドを割り当てました。

キーボードで選択

マウスやカーソルキーで範囲選択をするは大変です。Emacsのようにmark setして起点を設定したら、通常のカーソル移動（ctrl+nなど）で移動しながら選択範囲をいじれるほうが断然よいです。

なのでこれを入れました。キーバインドは多少調整してあります。

Visual Studio Code でEmacsのリージョン選択を行えるextensionを作ってみました。 https://github.com/t-yng/vscode-emacs-region 作り方については、こちらのEXTENSIONSのページを参考にしました。 [開発環境] OS : OS X El Capitan プロジェクトの雛形を作成雛形の生成にはYeomanとgenerator-code(Yoemanにおけるvscodeのextension生成ツール)を利用します。 Yeomanとはアプリケーション開発における、雛形の作成やビルドなどの作業をサポートしてくれる便利ツー…

yng.hatenablog.jp

ctrl deleteで文字削除

1 {
2 "key": "ctrl+backspace",
3 "command": "deleteWordPartLeft",
4 "when": "textInputFocus && !editorReadonly"
5 },

ctrl kで削除&コピー

VS Codeに最初からあるctrl+kは右側を削除するだけで、ペーストすることができません。そりゃこまるってことで↓をいれています。

Cut All Right - Visual Studio Marketplace

Extension for Visual Studio Code - Cut rest of line. Like `Delete All Right` but cut it and store to clipboard.

WakaTime - Visual Studio Marketplace

Wakatime

Extension for Visual Studio Code - Metrics, insights, and time tracking automatically generated from your programming activity.

Visual Studio Codeでエスケープキーの代りに^[を使用する設定 - Qiita

ctrl+gをエスケープに

Emacsのようにctrl+gでなんでもキャンセルしたいです。↓を参考にいろんなキャンセル系をctrl+gに割り当てました。

TouchBarつきのMacBookでは、エスケープキーが使いにくいので、Escapeキーの代りに ^[を割り当てます。Cmd-K Cmd-s からkeybindigs.jsonを開いて以下を追加。 [ { "key": "ctrl+[", "comma...

GitHub - Hammerspoon/hammerspoon: Staggeringly powerful macOS desktop automation with Lua

でもすべてには対応しきれていないので、Mac全体を統制しているhammerspoon側での対応をしたほうがいいんじゃないかと思っています。

Staggeringly powerful macOS desktop automation with Lua - Hammerspoon/hammerspoon

GitHub - castwide/solargraph: A Ruby language server.

solargraph

Ruby用のLanugage Serverのsolargraphというのも入れてみました。Railsを書くときにあると良さそうだったので。

A Ruby language server. Contribute to castwide/solargraph development by creating an account on GitHub.

seroku.jp →https://seroku.jp/wp/visual-studio-code-%E3%81%A7-ruby-on-rails-%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/

こちらもちょっと参考にしました。

おわり

JavaScriptを書くのにはやはりいいですね。WebStormより起動が速いし、ESLintとかはサクッと効いてくれるので。

一番よく書くRubyのサポートが若干弱い気もしますが、そもそもそんなものEmacsではなかったようなもんなので、まずまず使えています。

社内用アプリのReact Nativeを0.58にアップグレード

Thu, 07 Feb 2019 21:20:38 +0900

RNアプリを0.50.3から0.58.3に一気に上げました。

社内アプリのReact Nativeのバージョンを上げてる
— Hiromasa Ohno（ぴー） (@pi_cha_n) February 6, 2019

案外苦労しませんでしたが、ちょっとだけ困ったのでメモ。

TypeError: undefined is not a function (near ‘…addListener…’)

react-navigationが古すぎました。もともと1.0.0-beta2を使っていたんですが、最新バージョンはなんと3.x系。Navigation周りはさすがにアプリ全体への影響が大きく簡単には変えられないなと思い、一旦1.x系の最新までアップグレードしました。

そのときに出たのが、TypeError: undefined is not a function (near '...addListener...') のエラーです。

react-navigationのRedux連携の実装が変わっているらしく、react-navigation-redux-helpersというのを入れる必要がありました。

 1+import {
 2+ createReduxBoundAddListener,
 3+ createReactNavigationReduxMiddleware,
 4+} from 'react-navigation-redux-helpers';
 5+
 6 import RootNavigator from './RootNavigator';
 7
 8+const middleware = createReactNavigationReduxMiddleware(
 9+ "root",
10+ state => state.Nav,
11+);
12+const addListener = createReduxBoundAddListener("root");
13+
14 class Navigator extends Component {
15 render() {
16 return (
17 <RootNavigator
18 navigation={addNavigationHelpers({
19 dispatch: this.props.dispatch,
20 state: this.props.Nav,
21+ addListener
22 })}
23 />
24 );

中でaddListenerってのが必要になってるから渡さないといけないんですねー。詳細は正直よくわかってないし、最新バージョンではまた変わっていそう。

別アプリ作って試すしかないかなって感じです。

Error: Duplicate resources :app:mergeReleaseResources FAILED

Androidでビルドエラーが出ました。同名のアイコンが存在しててダメだよってエラーのようです。

過去のバージョンではアプリケーション側のディレクトリにnode_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.pngみたいな名前の画像ファイルが入っていました。新しくなったバージョンではライブラリ側から読み込まれるようなのでアプリ側のアイコンは不要です。

↓これ系のファイルを全部消せばビルドはOKとなりました。

android/app/src/main/res/drawable-hdpi/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png

deviseのskip confirmationの話

Thu, 31 Jan 2019 17:27:59 +0900

Railsのdeviseの話です。

deviseは使わない派、deviseは悪派な人も多いですが、deviseの標準的な範囲で使えそうならとりあえず使っちゃう派です。まあ、その辺の論争は置いといて。

（ユーザーを一括作成するなど）都合により認証メールを送らないでいるための方法と、認証メールとか関係なく認証済にしてしまう方法、それぞれ別の手段が提供されています。

コードをみれば一目瞭然ですが、こないだ開発中に「どっちだっけ？」となったので、メモっておこうかと思いました。

devise/lib/devise/models/confirmable.rb at main · heartcombo/devise

Flexible authentication solution for Rails with Warden. - heartcombo/devise

devise/confirmable.rb at main - heartcombo/devise

認証メールを送らない方法

こうです。

1user = User.new(email: email)
2user.skip_confirmation_notification!
3user.save

中身的にはこうなってて、

1def skip_confirmation_notification!
2 @skip_confirmation_notification = true
3end

フラグの状態でメールを制御します。↓このへん。

この方法だと認証メールは送られませんが、ユーザーは未認証のままです。あとから認証メールを送りたい場合はuser.send_confirmation_instructionsで送れます。

認証済にしてしまう方法

こうです。

1user = User.new(email: email)
2user.skip_confirmation!
3user.save

中身はこうなってます。

1def skip_confirmation!
2 self.confirmed_at = Time.now.utc
3end

confirmed_atに値をいれることで、認証済と判断されることになります。confirmedな場合には認証メールも送られません。

seedで初期データを作るときとか、管理者がユーザーを手動作成するようなケースではこっちを使うことが多い気がします。

メールアドレス変更時の再認証をスキップする方法

もう一つ似たメソッドがあって、skip_reconfirmation!というやつです。

1user.email = new_email
2user.skip_reconfirmation!
3user.save

deviseのreconfirmableが有効な場合、メールアドレスを変更すると新しいアドレスに対して再度認証メールが送られます。これをスキップして即座にメールアドレスを変更したい場合に使います。

管理画面からメールアドレスを変更するような場面で地味に必要になるやつです。

整理

3つの違いを表にするとこんな感じ。

メソッド	用途	認証状態
`skip_confirmation_notification!`	メールを送らない	未認証のまま
`skip_confirmation!`	認証済にする	認証済になる
`skip_reconfirmation!`	メアド変更時の再認証をスキップ	認証済のまま

Emacs26のdisplay-line-numbers-modeがlinum-modeよりちょっと速くて快適になりそう

Thu, 24 Jan 2019 06:24:42 +0900

先日Emacsを26系にアップしました↓↓

Emacsを24.5から26.1にアップデートした - PIYO Notes

長いこと古めのバージョンの24.5を使っていたようなのでEmacsのアップデートを試みました。もはや新機能とか把握していませんが、まあ、なんか良くなっているだろうという期待をこめて。こちらによると24.5は2015年4月のリリースだったようです。

GNU Emacs Release History

どんな変更があるのかなとNEWSを眺めていると、こんな記述が↓↓。

1** Emacs now supports optional display of line numbers in the buffer.
2This is similar to what 'linum-mode' provides, but much faster and
3doesn't usurp the display margin for the line numbers. Customize the
4buffer-local variable 'display-line-numbers' to activate this optional
5display. Alternatively, you can use the 'display-line-numbers-mode'
6minor mode or the global 'global-display-line-numbers-mode'. When
7using these modes, customize 'display-line-numbers-type' with the same
8value as you would use with 'display-line-numbers'.

平たく言うとlinum-modeより速い行番号表示ができるようになったよ、とのこと。

これまではlinum-modeってのを使えば行番号表示ができていたのですが、数千行（いや数百行でも？）ぐらいのファイルを開くと異様に重くなるのでした。そういうときは行番号表示をやめるとまともにスクロールできるので、時折切り替えながら使っていました。

Emacs 26.1ではdisplay-line-numbers-modeを有効にすることで新しい行番号表示を使うことができます。

僕は起動時にグローバルに有効にしたい派なので、initにglobal-display-line-numbers-modeを書いておくようにしました。

しばらくこれで様子見。

Emacsを24.5から26.1にアップデートした

Tue, 22 Jan 2019 22:03:02 +0900

長いこと古めのバージョンの24.5を使っていたようなのでEmacsのアップデートを試みました。もはや新機能とか把握していませんが、まあ、なんか良くなっているだろうという期待をこめて。

こちらによると24.5は2015年4月のリリースだったようです。

www.gnu.org

このページからMac版をダウンロードして使いました。バージョンは26.1-2です。

https://emacsformacosx.com/

起動時に以下の警告がでました。

1Warning (bytecomp): ‘isearch-word’ is an obsolete variable (as of 25.1); use ‘isearch-regexp-function’ instead. [6 times]

どうやらmigemo関連で警告がでているようなのでmigemoのパッケージをアップデートしました。その際こちらにあるような、Not Foundエラーにハマりました。

MELPAの package-install で発生する Not found エラーを回避する - Qiita

Not found エラー MELPAで公開されたパッケージを package install でインストールしている最中に、次のようなエラーが発生してインストールが止まってしまうことがある。 file-error "http://melpa.milkbox.net/pa...

Different String.startsWith behaviour on Android vs iOS · Issue #11370 · facebook/react-native

時間をおいたらできるようになったのでmigemoをアップデート。すると起動時の警告は解消し、今まで通り使えるようになりました。

また、最近動作がもっさりしているような気がしているMagitもアップデートしてみました。こちらはなんとなく速くなったような気がします。Emacs自体を上げたおかげか、パッケージのおかげかはわかりませんが快適になりました。

以前Emacs25.1にアップデートしようとした際に失敗したことがあって敬遠してましたが、こんなにうまくいならもっとアップデートしてもよさそう。

React NativeアプリでAndroidでstartsWith関数の実行結果が異なる（っぽい）のにハマった

Fri, 18 Jan 2019 14:05:41 +0900

React Nativeのアプリで、ある文字列が特定の文字列で始まる場合に何かするみたいな、↓こんなif文を書いていたんですが、Androidの実機で動かないケースに遭遇しました。

1if(text.startsWith('xxxx')) {
2 // do something
3}

正確にいうと、実機デバッグ中Remote Debuggerにつないでいるときは想定通りの動きをするものの、Remote Debugger無しで動かすとif文の中に入ってくれないというものでした。

最初これに気がつくまで苦労しました。デバッグしたら必ず動くからなんだこれ？、と。Remote DebuggerにつなぐとJSの実行環境がDebuggerに載っているものに変わるようですね。

タイトルに（っぽい）とつけたのは、実際に値を確認してはいないからです。デバッグできないとなると結果の確認も少々面倒でして。

これに気づいて調べてみるとissueがいくつか見つかりました。

Description I'm using the startsWith method on JavaScript strings to compare some values. Specifically the string contains emoji characters, but not at the beginning of the string. On iOS: 'Fish an...

string `startsWith` produces false negatives · Issue #19699 · facebook/react-native

Review the documentation: https://facebook.github.io/react-native Search for existing issues: https://github.com/facebook/react-native/issues Use the latest React Native version: https://github.com...

fastlane/boardingでTestFlightのベータ版の配布ページが一瞬で作れた - PIYO Notes

ざっくり読んだ感じ、JavaScriptCoreっていうJSのエンジン的なものが古いから一部挙動がおかしいけど、最新を使うように直そうとしているよ、ということです。

そして実際に修正コミットが2018年末にされているようなので近い内にリリースされるはずです。

RN本体のアップグレードはそれなりに大変なので、アップグレードするまではstartsWithは使わないように回避するとよさそうです。

↓のようにindexOfを使って回避しました。

1if(text.startsWith('xxxx')) {
2 // do something
3}
4
5↓
6
7if(text.indexOf('xxxx') === 0) {
8 // do something
9}

TestFlightのベータ版アプリに公開リンクからの参加が可能になった

Mon, 17 Dec 2018 14:46:42 +0900

iOSアプリのベータ版にURLから参加するための方法が公式にサポートされました！

今までもfastlaneで参加用ページを作ってそこからサブミットしてもらうことで半自動化できていたものの、サイト運用の手間がかかっていました。

社内用に作ったiPhoneアプリをメンバーに配るのにTestFlightのベータ配布を使いますが、いちいちメールアドレスを使うのが面倒です。Google Playにはオープンベータテストにしておくと参加用のURLから勝手に入ってもらうことができるのに、TestFlightはできないのかな、なんて調べていたら自分でホスティングすれば似たようなことを実現できることがわかりました。

www.sblack.online →https://www.sblack.online/

公式の方法だともちろん運用の手間は要らないし、iOSデバイスで直接リンクを踏んで参加できるため利用者側の手間も軽減されます。

App Store ConnectでTestFlightのページへ移動します。

テスターグループを選択すると、ページの真ん中あたりに「パブリックリンク」というブロックができています。

ここで「パブリックリンクを有効にする」というリンクをクリックするとURLが発行されます。

よくある限定公開URL系の仕組みなのでリンクを無効にすることもできるらしい。

このリンクをiOSデバイスで開くと↓のような画面になります。

まずTestFlightを入れ、その上で「テストを開始」からベータ版のインストールが可能です。

これまではいちいちユーザーのメールアドレスを教えてもらって入力していたことを考えると、かなり楽になりそうです。

メモリ使用量を抑えられるSlackクライアントSblack。複数チームにログインする方法もあります。

Tue, 11 Dec 2018 06:57:32 +0900

Twitterで見つけたSlackクライアントが良さそうだったので使い始めています。

Sblack を使い始めてみてるんだけどすごく良い。 Slack との違いがほとんどわからないけどメモリ使用量は90%近くダウン。https://t.co/s3ntKNvfAr
— Mitsuhiro Setoguchi (@setomits) December 5, 2018

Electronを使わない実装のためメモリ使用量も少なく抑えられるようです。

This is not an Electron app, so its size is 20 MB instead of 180 MB. It also launches faster than the official client.

いろんなElectron製のアプリを動かしていてメモリが常に足りないので、嬉しくてすぐに飛びつきました。

ダウンロードはここから。

実際にSlackの公式クライアントと両方起動してメモリ使用量を比較してみました。

まずはSlack

Helperプロセスなども合わせると500MB近くのメモリ使用があります。

続いてSblack

Sblackこちらは127MBほど。メモリはSlack公式クライアントアプリの約4分の1しか使っていません。

すごい！

肝心の使い勝手ですが、Slack本体のチャット部分はおそらくWebView的に埋め込んであるため、公式クライアントやWebブラウザ版とほぼ変わりません。ちゃんと通知も来るしメモリ食わないし、快適です。

複数チームへの参加方法

ただし、Sblackチームへの参加や切り替えを行うための一番左のバーがありません。そこだけ少々使い勝手が変わります。

一番左のバーがないのせいで複数のチーム（ワークスペース）への参加方法に戸惑いました。

そのための方法はメニューバーに隠されていました。隠したわけじゃないとは思うけど、気づきにくかった。

「Teams」メニューの中に「Sign in…」メニューがあります。これを押すとウィンドウがワークスペースのサインイン画面へ遷移してくれます。

これでプライベート用と仕事用のチームに問題なく参加することができました。

スプレッドシートからMarkdown形式のテーブルにしてくれるサイト

Sat, 08 Dec 2018 06:06:57 +0900

Markdownのテーブル形式を自分で組み立てるのは面倒なんで、これ使ってます。便利ですよ。

https://www.tablesgenerator.com/markdown_tables

Webサイト上のテーブルとかExcelとかGoogleのスプレッドシートとかで必要な範囲を選択してコピーして、このサイトのFileメニューの「paste table data」に貼り付けます。

すると、こんな感じになります。これ先日のビジャのときに貼った表ですね。

下の方にMarkdown形式のフォーマットが出てるのでそれをコピーしたらあとは好きに使ってください。ちょっと崩れてるけどどうせMarkdownがきれいにしてくれるし、気にしない。

Bootstrap4のspacing用のクラスみたいなのをReact Nativeでも使いたい

Sun, 02 Dec 2018 15:39:22 +0900

Bootstrap4のmarginとかpadding用のユーティリティクラスが手軽でつい使ってしまいます。

これね。mt-3みたいなやつ。

Spacing

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

getbootstrap.com

Webの場合メリットとデメリットがあるのはわかります。スタイル直書きと対して変わらないし意味を持たないのでもしかしたらデメリットが多いかも。

んで、似たようなアプローチをReact Nativeで使いたいなーとふと思いました。

React Nativeでのレイアウトは基本的にはstyleに直書きするか、（コンポーネント間で）共通で用意したスタイル用のオブジェクトを渡すして共通化ぐらいしかできません。

だとしたら後者の共通オブジェクトなアプローチでmarginとpaddingのユーティリティを実現できるんじゃないかと思った次第です。

すでに誰がやってそうなもんだけど、ちょっと考えてみます。

使い方のイメージ

元々こうだったコードを、

1render() {
2 return (
3 <View style={{ padding: 12, marginTop: 3, backgroundColor: 'white' }} />
4 )
5}

こうする感じです。

 1const styles = {
 2 // ...
 3 'p_4': { padding: 12 },
 4 // ...
 5 'mt_1': { marginTop: 3 },
 6 // ...
 7};
 8
 9render() {
10 return (
11 <View style={{ ...styles.p_4, ...styles.mt_1, backgroundColor: 'white' }} />
12 )
13}

stylesのところをちゃんとコードで生成してあげたら良い感じになるのではないかと思います。

ユーティリティ用オブジェクトを生成する

ループを回して作ってしまいます。

 1const styles = {};
 2const spacer = 3; // お好みで変える感じに
 3
 4[1, 2, 3, 4, 5, 6, 7, 8, 9].forEach((i) => {
 5 styles[`m_${i}`] = { margin: spacer * i };
 6 styles[`mt_${i}`] = { marginTop: spacer * i };
 7 styles[`mb_${i}`] = { marginBottom: spacer * i };
 8 styles[`ml_${i}`] = { marginLeft: spacer * i };
 9 styles[`mr_${i}`] = { marginRight: spacer * i };
10 styles[`mx_${i}`] = { marginHorizontal: spacer * i };
11 styles[`my_${i}`] = { marginVertical: spacer * i };
12
13 styles[`p_${i}`] = { padding: spacer * i };
14 styles[`pt_${i}`] = { paddingTop: spacer * i };
15 styles[`pb_${i}`] = { paddingBottom: spacer * i };
16 styles[`pl_${i}`] = { paddingLeft: spacer * i };
17 styles[`pr_${i}`] = { paddingRight: spacer * i };
18 styles[`px_${i}`] = { paddingHorizontal: spacer * i };
19 styles[`py_${i}`] = { paddingVertical: spacer * i };
20});

こうしてできたのが、これです。ちょっと長いですが、ちゃんとできていそうです。

使うときは指定に矛盾が出ないように気をつけて使う必要があるとは思いますが、矛盾が出てしまう場合はReact Nativeの仕様に従って決まるはず。paddingとpaddingTopだったらpaddingTopが優先されるとかだった気がします。違ったらすいません。

 1{
 2 "m_1":{
 3 "margin":3
 4 },
 5 "mt_1":{
 6 "marginTop":3
 7 },
 8 "mb_1":{
 9 "marginBottom":3
 10 },
 11 "ml_1":{
 12 "marginLeft":3
 13 },
 14 "mr_1":{
 15 "marginRight":3
 16 },
 17 "mx_1":{
 18 "marginHorizontal":3
 19 },
 20 "my_1":{
 21 "marginVertical":3
 22 },
 23 "p_1":{
 24 "padding":3
 25 },
 26 "pt_1":{
 27 "paddingTop":3
 28 },
 29 "pb_1":{
 30 "paddingBottom":3
 31 },
 32 "pl_1":{
 33 "paddingLeft":3
 34 },
 35 "pr_1":{
 36 "paddingRight":3
 37 },
 38 "px_1":{
 39 "paddingHorizontal":3
 40 },
 41 "py_1":{
 42 "paddingVertical":3
 43 },
 44 "m_2":{
 45 "margin":6
 46 },
 47 "mt_2":{
 48 "marginTop":6
 49 },
 50 "mb_2":{
 51 "marginBottom":6
 52 },
 53 "ml_2":{
 54 "marginLeft":6
 55 },
 56 "mr_2":{
 57 "marginRight":6
 58 },
 59 "mx_2":{
 60 "marginHorizontal":6
 61 },
 62 "my_2":{
 63 "marginVertical":6
 64 },
 65 "p_2":{
 66 "padding":6
 67 },
 68 "pt_2":{
 69 "paddingTop":6
 70 },
 71 "pb_2":{
 72 "paddingBottom":6
 73 },
 74 "pl_2":{
 75 "paddingLeft":6
 76 },
 77 "pr_2":{
 78 "paddingRight":6
 79 },
 80 "px_2":{
 81 "paddingHorizontal":6
 82 },
 83 "py_2":{
 84 "paddingVertical":6
 85 },
 86 "m_3":{
 87 "margin":9
 88 },
 89 "mt_3":{
 90 "marginTop":9
 91 },
 92 "mb_3":{
 93 "marginBottom":9
 94 },
 95 "ml_3":{
 96 "marginLeft":9
 97 },
 98 "mr_3":{
 99 "marginRight":9
100 },
101 "mx_3":{
102 "marginHorizontal":9
103 },
104 "my_3":{
105 "marginVertical":9
106 },
107 "p_3":{
108 "padding":9
109 },
110 "pt_3":{
111 "paddingTop":9
112 },
113 "pb_3":{
114 "paddingBottom":9
115 },
116 "pl_3":{
117 "paddingLeft":9
118 },
119 "pr_3":{
120 "paddingRight":9
121 },
122 "px_3":{
123 "paddingHorizontal":9
124 },
125 "py_3":{
126 "paddingVertical":9
127 },
128 "m_4":{
129 "margin":12
130 },
131 "mt_4":{
132 "marginTop":12
133 },
134 "mb_4":{
135 "marginBottom":12
136 },
137 "ml_4":{
138 "marginLeft":12
139 },
140 "mr_4":{
141 "marginRight":12
142 },
143 "mx_4":{
144 "marginHorizontal":12
145 },
146 "my_4":{
147 "marginVertical":12
148 },
149 "p_4":{
150 "padding":12
151 },
152 "pt_4":{
153 "paddingTop":12
154 },
155 "pb_4":{
156 "paddingBottom":12
157 },
158 "pl_4":{
159 "paddingLeft":12
160 },
161 "pr_4":{
162 "paddingRight":12
163 },
164 "px_4":{
165 "paddingHorizontal":12
166 },
167 "py_4":{
168 "paddingVertical":12
169 },
170 "m_5":{
171 "margin":15
172 },
173 "mt_5":{
174 "marginTop":15
175 },
176 "mb_5":{
177 "marginBottom":15
178 },
179 "ml_5":{
180 "marginLeft":15
181 },
182 "mr_5":{
183 "marginRight":15
184 },
185 "mx_5":{
186 "marginHorizontal":15
187 },
188 "my_5":{
189 "marginVertical":15
190 },
191 "p_5":{
192 "padding":15
193 },
194 "pt_5":{
195 "paddingTop":15
196 },
197 "pb_5":{
198 "paddingBottom":15
199 },
200 "pl_5":{
201 "paddingLeft":15
202 },
203 "pr_5":{
204 "paddingRight":15
205 },
206 "px_5":{
207 "paddingHorizontal":15
208 },
209 "py_5":{
210 "paddingVertical":15
211 },
212 "m_6":{
213 "margin":18
214 },
215 "mt_6":{
216 "marginTop":18
217 },
218 "mb_6":{
219 "marginBottom":18
220 },
221 "ml_6":{
222 "marginLeft":18
223 },
224 "mr_6":{
225 "marginRight":18
226 },
227 "mx_6":{
228 "marginHorizontal":18
229 },
230 "my_6":{
231 "marginVertical":18
232 },
233 "p_6":{
234 "padding":18
235 },
236 "pt_6":{
237 "paddingTop":18
238 },
239 "pb_6":{
240 "paddingBottom":18
241 },
242 "pl_6":{
243 "paddingLeft":18
244 },
245 "pr_6":{
246 "paddingRight":18
247 },
248 "px_6":{
249 "paddingHorizontal":18
250 },
251 "py_6":{
252 "paddingVertical":18
253 },
254 "m_7":{
255 "margin":21
256 },
257 "mt_7":{
258 "marginTop":21
259 },
260 "mb_7":{
261 "marginBottom":21
262 },
263 "ml_7":{
264 "marginLeft":21
265 },
266 "mr_7":{
267 "marginRight":21
268 },
269 "mx_7":{
270 "marginHorizontal":21
271 },
272 "my_7":{
273 "marginVertical":21
274 },
275 "p_7":{
276 "padding":21
277 },
278 "pt_7":{
279 "paddingTop":21
280 },
281 "pb_7":{
282 "paddingBottom":21
283 },
284 "pl_7":{
285 "paddingLeft":21
286 },
287 "pr_7":{
288 "paddingRight":21
289 },
290 "px_7":{
291 "paddingHorizontal":21
292 },
293 "py_7":{
294 "paddingVertical":21
295 },
296 "m_8":{
297 "margin":24
298 },
299 "mt_8":{
300 "marginTop":24
301 },
302 "mb_8":{
303 "marginBottom":24
304 },
305 "ml_8":{
306 "marginLeft":24
307 },
308 "mr_8":{
309 "marginRight":24
310 },
311 "mx_8":{
312 "marginHorizontal":24
313 },
314 "my_8":{
315 "marginVertical":24
316 },
317 "p_8":{
318 "padding":24
319 },
320 "pt_8":{
321 "paddingTop":24
322 },
323 "pb_8":{
324 "paddingBottom":24
325 },
326 "pl_8":{
327 "paddingLeft":24
328 },
329 "pr_8":{
330 "paddingRight":24
331 },
332 "px_8":{
333 "paddingHorizontal":24
334 },
335 "py_8":{
336 "paddingVertical":24
337 },
338 "m_9":{
339 "margin":27
340 },
341 "mt_9":{
342 "marginTop":27
343 },
344 "mb_9":{
345 "marginBottom":27
346 },
347 "ml_9":{
348 "marginLeft":27
349 },
350 "mr_9":{
351 "marginRight":27
352 },
353 "mx_9":{
354 "marginHorizontal":27
355 },
356 "my_9":{
357 "marginVertical":27
358 },
359 "p_9":{
360 "padding":27
361 },
362 "pt_9":{
363 "paddingTop":27
364 },
365 "pb_9":{
366 "paddingBottom":27
367 },
368 "pl_9":{
369 "paddingLeft":27
370 },
371 "pr_9":{
372 "paddingRight":27
373 },
374 "px_9":{
375 "paddingHorizontal":27
376 },
377 "py_9":{
378 "paddingVertical":27
379 }
380}

Railsで指定したID列順にorderするには

Tue, 27 Nov 2018 06:55:17 +0900

複数のIDの配列でwhereしたあと、そのIDの配列の順番の通りにorderしたいという場合がたまーにあります。2年に1回ぐらいあります。

実際に必要になったときの機能要件はうまく伝えられないんですが、こんな感じの意味です。

1ids = [3, 1, 5]
2items = Item.where(id: ids).order("3,1,5の順に並べたい...")

自力で頑張るとしたらSQLでCASE式でインデックスにマッピングさせるようにして、3のときは0、1のときは1、5のときは2のようにして、マッピング結果をORDERする感じになるかと思います。

それをgem化してくれてるのがこれ。

GitHub - panorama-ed/order_as_specified: Add arbitrary ordering to ActiveRecord queries.

Add arbitrary ordering to ActiveRecord queries. Contribute to panorama-ed/order_as_specified development by creating an account on GitHub.

React NativeでMarkdownを表示する方法をいくつか比較してみた - PIYO Notes

SQL組み立て部分を抜粋するとこんな感じ。CASE式でSQLを組み立てています。

1when_queries = conditions.map.with_index do |cond, index|
2 "WHEN #{cond} THEN #{index}"
3end
4case_query = "CASE #{when_queries.join(' ')} ELSE #{conditions.size} END"
5scope = order(Arel.sql("#{case_query} ASC"))

というわけで、order_as_specifiedを使えば最初の要件を満たせます。

最初の例は

1ids = [3, 1, 5]
2items = Item.where(id: ids).order_as_specified(id: ids)

と書けます。

もちろんIDだけじゃなくて、ステータスごとに並び替えるみたいなことにも使えます。

条件が増えると動的に組み立てられるSQL分のCASEの分岐が増えるので、順番に並べたいIDなどがあまりに多いときには使わないほうがよさそうでした。うろ覚えですが、数百件ぐらいでも遅くなったような。。

2年後ぐらいにRailsしてたらまた同じようなことを調べると思うので、自分のために残しておこう。

React NativeでのMarkdownライブラリまとめをアップデート

Sun, 25 Nov 2018 06:57:29 +0900

以前React NativeのMarkdown用ライブラリを比較しました。

GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemottyでもMarkdownのような記法を一部サポートしています。 WebでMarkdownを扱うにはMarkdown形式の文字列をサーバーサイドなりクライアントサイドでHTML化して表示するだけなのでとても簡単です。また、ただのHTMLなのでCSSにより見た目もかなり柔軟に変えることができます。

GitHub - pi-chan/ReactNativeMarkdownSample

そのときに見落としていて試してなかったライブラリがなかなか良さそうでしたので、こちらのサンプルアプリにいれてみました。

Contribute to pi-chan/ReactNativeMarkdownSample development by creating an account on GitHub.

GitHub - meliorence/react-native-render-html: iOS/Android pure javascript react-native component that renders your HTML into 100% native views

react-native-render-html

新しく使ってみたのはこのライブラリです。

iOS/Android pure javascript react-native component that renders your HTML into 100% native views - meliorence/react-native-render-html

https://github.com/pi-chan/ReactNativeMarkdownSample/commit/56ed99c4dd45f81d82aa6b0d0682867d3701d83d

サンプルアプリではこんな感じになりました。

なかなか良さそう。

react-native-htmlview

ちなみに、よく引き合いに出すreact-native-htmlviewはこんな感じ。

今回の差分です。

使い方部分だけ抜粋すると↓こんな感じでした。

 1import React, { Component } from 'react';
 2import { Dimensions, ScrollView, Linking } from 'react-native';
 3import HTML from 'react-native-render-html';
 4
 5const { width } = Dimensions.get('window');
 6
 7export default class RenderHtmlScreen extends Component {
 8 static navigationOptions = {
 9 title: 'react-native-render-html',
10 };
11
12 render() {
13 const html = this.props.navigation.getParam('html')
14 return (
15 <ScrollView style={{padding: 10}}>
16 <HTML
17 html={html}
18 imagesMaxWidth={width * 0.9}
19 onLinkPress={(evt, href) => { Linking.openURL(href) }}
20 />
21 </ScrollView>
22 );
23 }
24}

React NativeアプリのデバッグでParallelsのChromeが開いてしまう

Fri, 23 Nov 2018 06:27:28 +0900

React Nativeアプリの開発中のRemote DebugにはReact Native Debuggerというのを使います。しかし、うっかりそいつを起動せずにデバッグを始めるとChromeでデバッグ用のタブが開いてしまい少し面倒なことになります。

それが最近はParallels DesktopのWindowsに入れてあるChromeが起動するようになってしまいました。これが起こってしまうとParallelsの起動を待ってから止めるために時間がかかってしまうし、その間もCPUやメモリ消費がとんでもないことになって合計5分ほどロスしてしまいます。

調べてみると普通にissueがあるし、回避方法も載っていたのでその対策を実施しました。

Debug JS remotely opens Chrome in Parallels Desktop before Chrome.app on macOS · Issue #11480 · facebook/react-native

Description Enabling Debug JS Remotely on a macOS computer that has Parallels Desktop installed with Chrome on Windows as well as the macOS version of Chrome opens the Parallels Desktop Windows vir...

pager.rb: fix Helpers constant invocation · pry/pry@bd07d11

ParallelsのゲストOSの設定のオプション設定の中に、アプリケーションというメニューがあります。その中に「WindowsアプリケーションをMacと共有する」というチェックボックスがあります。

これを起動しておくとMac側からWindowsへのファイル連携が楽らしいですが、特に使っていませんのでオフにします。

こうするとParallelsのChromeは立ち上がらず、Mac側のChromeでタブが開くようになります。

Pryの出力でとかいうのが出て困った

Wed, 21 Nov 2018 11:59:20 +0900

RubyではPry愛用者なのですが、バージョンアップのタイミングか何かで画面に収まらない出力が出たときのPagerがおかしくなって（Pagerが変わった？）、使いづらくなってしまいました。

<page break> --- Press enter to continue ( q<enter> to break ) --- <page break>

該当箇所がバージョン0.12.1に含まれるこちらのコミットで変更されているようでした。

Since the top class is Pry::Pager and not Pry, the cref constant static lookup only look for constants under Pry::Pager (or at the top level). Since Helpers refers to Pry::Helpers, it won't be...

GitHub - mxcl/PromiseKit: Promises for Swift & ObjC.

手元のバージョンが0.12.0だったため、bundle update pryしてバージョンを0.12.2に変えたら直りました。

ちょうどバグを引いたみたいです。

よかったー。

ブログ画像にGoogle Photosを使ってるけど…

Mon, 19 Nov 2018 06:03:34 +0900

このブログに置いてる画像は全部Google Photosに置いてます。

画像を記事中に挿入する手順は、

スクショなどで画像を用意する
Google Photosの公開アルバムにアップロードする
画像へのリンクを取得
Dashのスニペットを使ってMarkdown記法で記事中に挿入

です。それなりに面倒です。

それに、たまに画像が見えなくなっちゃってることがあるらしいし、もっといい方法ないかなと思っております。

Hugoはスタティックサイトを生成するだけなのでpublic/imagesとかに置いて参照すれば使えますが、でもそれで面倒そうだなーと思ってます。ダブらないように名前をつけるのが面倒だし、じゃあ被らないようにとランダムにしてしまうと画像を紛失しそうです。

何かツールを作るといいのかも。そのツールに画像をドラッグアンドドロップすると適切なパスに画像を置いてくれて、かつ画像へのリンクをコピーした状態にしてくれてるみたいな。

あ、これいいな。書きながら思いつきました。

Hydraを使ってSwiftでPromiseする

Sun, 18 Nov 2018 06:49:45 +0900

これまでは問題なかったんですが、機能の追加でAPIリクエストを全部待ってから次の処理をしたくなりました。なのでPromise系のライブラリを導入して、きちんと待機することにしました。

Promise系のライブラリはいくつかあるようです。

代表格はスター数、10,000越えのPromiseKitか。

Promises for Swift & ObjC. Contribute to mxcl/PromiseKit development by creating an account on GitHub.

GitHub - malcommac/Hydra: ⚡️ Lightweight full-featured Promises, Async & Await Library in Swift

でもREADMEを読んでしっくり来たのはこっちだったので、Hydraというのを使いました。

⚡️ Lightweight full-featured Promises, Async & Await Library in Swift - malcommac/Hydra

GitHub - mattt/rack-http-logger: Log metrics from HTTP request parameters according to l2met conventions

まず既存コード

かなりメタ化しちゃってますが、既存コードはこんな感じでした。

 1func reload() {
 2 API.getData1() { data1 in
 3 if let data = data1 {
 4 Data.setData1(data)
 5 }
 6 }
 7
 8 API.getData2() { data2 in
 9 if let data = data2 {
10 Data.setData2(data)
11 }
12 }
13}

元々はこれで問題ありませんでした。ですが、全てのAPIが返ってきたあと次のページへ遷移するケースが発生しました。

きちんと全API呼び出しを待たないと、データが半端な状態でページ遷移をしてしまうことになります。Promiseの出番です。

Hydraを導入する

cocoapodsで導入しました。プロジェクトがSwift3系だったので、pod 'HydraAsync', '~> 1.0.2'して導入します。

API呼び出しを書き換える

元々のコードを次のように分離します。

 1import Hydra
 2
 3func reload() {
 4 let promise1 = getData1()
 5 let promise2 = getData2()
 6}
 7
 8func getData1() -> Promise<Void> {
 9 return Promise<Void>(in: .background, token: nil) { (resolve, reject, _) in
10 API.getData1() { data1 in
11 if let data = data1 {
12 Data.setData1(data)
13 resolve()
14 } else {
15 reject("error")
16 }
17 }
18 }
19}
20
21func getData2() -> Promise<Void> {
22 // 略...
23}

Promise<Void>の最初の引数はiOSのDispatchQueue関連に対応するenumです。多くは.backgroundになるんじゃないかな。

2番目はInvalidationTokenでキャンセルするときに使うっぽい。今回は要らないから使ってなくて、よくわかってない。今回はnilにしてます。

最後のBlockがPromiseの実装を書くところ。

READMEのCreate a Promiseを参考に、元々のAPI呼び出しを移植してresolveとrejectを入れました。

今回はこの箇所でのみPromiseを使いたかっただけなので、API呼び出し自体をPromiseを返す実装に変更してしまうのはやめました。他の箇所への影響を考えてのことです。

逆にいうとAPI呼び出ししてPromiseを返す関数を1個挟むだけで使えるようになるので、小さく試すには便利。

完了を待つ

これはドキュメントのallの項目のとおり。

Hydra#all

さっきの例だと、

1func reload() {
2 let promises = [getData1(), getData2()]
3 all(promises).then { _ in
4 self.doSomething()
5 }.catch { err in
6 }
7}

こうなります。すっきり書けました。

iOSでデバッグ実行できないときにプリントデバッグする方法

Sat, 17 Nov 2018 06:44:03 +0900

iOSアプリの開発において、デバッガーをアタッチできないときのデバッグは骨が折れます。その最たる例がPush通知から起動するときだと個人的には思います。

アプリが起動していない状況から起動するときに挙動を検証する際には、そもそもアプリが起動しておらずプロセスが存在しないためデバッガーをアタッチすることもできません。

そこでせめてもの抵抗でprintデバッグをしようと組み込みのprint関数でログを出してみるのですが、実機ログをみると色々なログがごちゃまぜになっていて必要なログだけに絞り込むのがなかなか難しいです。

この際作っちゃろかと一瞬思ったんですが、ちょっと調べたらすぐに見つかったんでそれを使いました。

ログを記録するクライアントライブラリと、それを受け取るサーバーをセットで使います。

自分のローカル環境だけ、しかも一時的に使えれば良いという前提で今日の話をします。

ログを受け取って標準出力に出すサーバー

rubyで書かれた、rack-http-loggerなるものを使えます。後述するiOS側のクライアントアプリと同じ人が書いてて、すぐ使えます。

Log metrics from HTTP request parameters according to l2met conventions - mattt/rack-http-logger

GitHub - mattt/Antenna: Extensible Remote Logging for iOS

% git clone https://github.com/mattt/rack-http-logger
% cd rack-http-logger/example
% bundle install
% thin start

これでlocalhost:3000にサーバーが立ち上がります。

ログを記録するためのクライアントライブラリ

Antennaというライブラリを使います。cocoapodsで導入可能。

Extensible Remote Logging for iOS. Contribute to mattt/Antenna development by creating an account on GitHub.

https://acrobat.adobe.com/jp/ja/acrobat/pdf-reader.html

すごく古いですがちゃんと使えます。

Podfileにpod "Antenna"と書いてpod installします。

で、AppDelegate.swiftに初期化処理を書いておきます。

1func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
2 // さきほどのサーバーを指定
3 Antenna.sharedLogger()?.addChannel(with: URL(string: "http://localhost:3000")!, method: "LOG")
4
5 // 略
6}

初期化後は必要な箇所でメッセージを渡して呼び出せばOK。

1Antenna.sharedLogger()?.log("記録したいメッセージ")

さっきthin startしたコンソールに次のようなログが出ているかと思います。

source=rack-http-logger locale=ja_US message=記録したいメッセージ uuid=xxxxxxxxxxx

実際こんな感じで流れてきます。

これらを使えばデバッガーをつなぐことができなくても、変数をある程度確認したり、想定通りのコードを通るかどうかを確認したりできるわけです。

だいぶ古いツール郡なので新しいのがありそうだと思うのと、これだけシンプルな使い方しかしないならもっと簡単に作れてもいいんじゃないかと思ったりしています。

プレビュー.appでPDFに文字を書き込んだら文字が枠からはみ出て困った

Fri, 16 Nov 2018 06:19:50 +0900

会社が用意してくれた年末調整用のPDFをダウンロードしてMacプレビュー.appで文字を入れようとしたら、狭い入力エリアだと文字がはみ出てしまいPDFとして成り立ってない感じになっちゃいました。

Adobe Acrobat Reader DCだとうまくいくよ、という情報を同僚から得たのでやってみると、、

確かに大丈夫！しかも入力可能な欄に色がついていて見やすい！

もともとPDFがAcrobatとかで作られたんですかね。

Adobe Acrobat Reader DCはここ↓から入れられました。

SwiftでJSのsetTimeoutみたいなことをする

Thu, 15 Nov 2018 06:07:08 +0900

iOSで仕方なく少し待ってから処理を実行するてのを時々やりたくなるんですが、毎度書き方を忘れるので、自分用にメソッドを定義して使っています。

どこかグローバルなところに定義しとくとアプリ全体で使えるので、AppDelegate.swiftの一番下あたりに定義を書いておきます。

1func delay(_ delay: Double, closure: @escaping ()->()) {
2 DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
3 closure()
4 }
5}

で使うときはこんな感じ。

1delay(1.0) {
2 // do something
3 self.performSegue(...) みたいな
4}

最悪SDKのAPIが変わったとしてもdelay内部だけ書き換えればいいので楽。

Apnoticを利用中のRailsプロジェクトでHTTP2::Error::ProtocolError

Wed, 14 Nov 2018 06:55:02 +0900

久しぶりにメンテすることになったプロジェクトでiOSのPush通知を送ろうしたらHTTP2::Error::ProtocolErrorっていうざっくりしたエラーがでてしまい困りました。

サーバーはRails、Push通知はApnoticというgemを使って送信しています。

Apnoticのissueを調べてみるとずいぶん前に報告されているissueがあり、それに該当しそうでした。

Rails app crashing when using integer value for header · Issue #42 · ostinelli/apnotic

Hi! I had notifiaction.apns_collapse_id = order.id and app was crashing with HTTP2::Error::ProtocolError (HTTP2::Error::ProtocolError) and no backtrace. Sometimes exception was rescued with message...

Dash.appへのスニペット登録例を紹介 - PIYO Notes

依存ライブラリのバージョンアップで直るとのことだったのでApnotic自体のバージョンをあげてしまい、不具合を回避できました。

今回のアップデートで1.3.0 → 1.4.1となりました。

1.3.0、↑のissueより新しいから直っていてもよさそうなもんですが、なんだったんでしょうねー。という感じ。

Dash.appのスニペットでクリップボードの文字列に特定文字列があると正しく貼り付けられない

Tue, 13 Nov 2018 06:21:21 +0900

Dash.appのスニペットをよく使うという話をこないだ書きました。

ドキュメントツールのDashですが、スニペット機能もありますよね。Dashが出た当初はむしろスニペット機能のために使っていました。普段からスニペットを便利に使ってるので活用例を紹介してみようかと。スニペット展開キーワードのPrefix スニペットの省略表記としては普段の入力に差し支えないPrefixがあったほうが良いです。僕は ; 始まりのキーワードを登録しています。

React NativeでMarkdownを表示する方法をいくつか比較してみた - PIYO Notes

この中で紹介している、クリップボード文字列を含めて展開するスニペットの一部がGooglePhotoの画像のURLよっては動かない場合がありストレスに思っていたので調べてみました。

こんな現象がおきました

;asinというスニペットの例で紹介します。

;asinはamazonへのリンクをはるためのスニペットで、このようにHugoのショートコードに展開されます。XXXXXのところはコピー済の文字列です。

{ {< amazon asin="XXXXXXXX" >}}
(↑本来はスペース要らないですが、ショートコードに解釈されちゃうので空けてます。以下同じです。)

（本来ASINとして正しい値ではないですが、）abcdeという文字列をコピーした状態で;asinとタイプします。

すると、次のように展開されます。

{ {< amazon asin="abcde" >}}

これが想定通りの動き。

次に、abcde__fgh__ijkという文字列をコピーして;asinとタイプすると、次のようになります。

こんな感じのウィンドウが出てきて、そのまま決定すると次のようになってしまいます。

{ {< amazon asin="abcdefghijk" >}}

アンダーススコアの部分がなくなってしまいました。

このとき出るウィンドウはDash.appのプレースホルダーを使ったスニペットをトリガーしたときに現れるウィンドウと同じです。

Dash.appのプレースホルダー

名前: __name__
メールアドレス: __email__
もう一回名前: __name__

みたいなスニペットがあったときに、アンダースコア2つで囲んだ部分を変数としておいて、スニペット展開じに入力できる仕組みです。このとき同じ変数には同じ値を入れることができます。

実際に↑のスニペットを展開して名前部分を変更すると二箇所同時にプレビューされていくのがわかります。

さきほどのabcde__fgh__ijkという文字列の場合、アンダースコア2つ囲みの文字列がプレースホルダー変数として解釈されてまったのが原因だったようです。

回避策

今回はアンダースコア2つで囲まれた部分が問題となりました。

幸いDashには設定箇所があるので、自分の用途では発生しにくい文字列をプレースホルダーとして判別するための条件としておけば回避可能です。

Google PhotosのURLには__はあっても、____（アンダースコア4つ）に囲まれている文字列はほぼ含まれないので、そのように変えておきました。

React NativeでHTMLを表示するHTMLViewに対しての理解が進んだ

Sat, 10 Nov 2018 06:58:05 +0900

以前こちらの記事でMarkdownをHTML化して表示するための方法をいくつか紹介しました。

GitHub - pi-chan/ReactNativeMarkdownSample

その中で開発中のアプリで使っているHTMLViewはいけてないですね、という話を書きました。

が、色々調べているうちに、ちょっと使い方が間違っていたのではということに気がついたのでアップデートしておきます。

valueの渡しかた

HTMLViewはvalueプロパティを受け取ります。なのでこれまではMarkdownから生成されたHTMLをそのまま渡していました。

1<HTMLView value={html} />

公式READMEのサンプルコードをみてもこうなっています。

 1render() {
 2 const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;
 3
 4 return (
 5 <HTMLView
 6 value={htmlContent}
 7 stylesheet={styles}
 8 />
 9 );
10}

でもこれだと妙に行間が広かったりとか画像が見えなかったりとかして、質が悪い感じがしていました。うまくスタイルも効かせることができずに困っていました。

あるときIssueか何かを見ていてコード例が載っていたんですが、それを真似てHTMLをhtmlタグとbodyタグで囲んでみたら妙に広い行間や画像が見えない件が解決しました。

1<HTMLView value={`<html><body>${html}</body></html>`} />

コードを見た感じではhtmlタグやbodyタグを扱っているようには見えなかったので、なぜ？という気がしますが、変更後のほうが良さそうに見えるのでこちらを使うように修正したいと考えています。

こちらのサンプルにおけるbefore afterの画像を載せておきます。

Contribute to pi-chan/ReactNativeMarkdownSample development by creating an account on GitHub.

Find out what websites are BuiltWith

before

After

残念ながら入れ子の<ul>はうまくいきません。中のコードを見ても考慮されていないので対応するにはライブラリ本体に手を入れる必要があるかと。

renderNodeで各DOMをカスタマイズ

先程の例のAfterを見ると画像の横幅がはみ出ています。これを直すためにrenderNode関数を渡して、表示するコンポーネントをカスタマイズできるようです。

renderNodeに関してはREADMEに載ってるので完全に僕がサボってたわけですが、便利ですね。renderNode必須かもな、という気がしています。

先程の例のような画像はみだしの場合は、横幅を限定するようなstyleをあてたImageコンポーネントを使ってやれば解決します。

もともとこうだったのを

1<HTMLView
2 value={`<html><body>${html}</body></html>`}
3 />

こっちにします。

1<HTMLView
2 value={`<html><body>${html}</body></html>`}
3 renderNode={this.renderNode.bind(this)}
4 />

this.renderNodeの実装は例えばこんな感じです。

 1const { width } = Dimensions.get('window');
 2
 3renderNode(node, index, siblings, parent, _) {
 4 if (node.name === 'img') {
 5 const { src } = node.attribs;
 6 return (
 7 <Image
 8 key={index}
 9 style={{ width: width * 0.9, height: 300 }}
10 source={{ uri: src }}
11 resizeMode="contain"
12 />
13 );
14 }
15}

imgタグの場合には、幅をデバイスの90%に、高さを適当な値に固定したImageコンポーネントを表示してねというのを書いておきます。

そしたらこうなります。横幅がちゃんと画面に収まりました。

おわり

<ul>が惜しいですが、いい感じになってきました。

実際のプロジェクトでは同じような設定で使うことが多い気がするので、renderNodeなどを共通してやってくれるコンポーネントを1つ挟むことで利用するのが良さそうです。

Webサイトに使われている技術を調べられるサービス

Thu, 08 Nov 2018 06:28:54 +0900

Built Withってやつが面白かったので紹介。

BuiltWith

builtwith.com

調べたいWebサイトのURLを入れるとそのサイトに使われている技術を一覧にしてくれます。

ということで、僕のブログを解析してみました。

→結果ページ

HTMLやレスポンスヘッダーを解析して調べているんだと思いますが、結構色々わかりますね。

Google Analyticsが使われているとか、Bootstrapが入っているだとか。さらにはHugoで生成されたページだってことまでわかります。

Chrome拡張機能を入れておくと気になったページですぐに調べられます。調べて遊んでみると楽しいかも。

Dash.appへのスニペット登録例を紹介

Wed, 07 Nov 2018 06:22:52 +0900

ドキュメントツールのDashですが、スニペット機能もありますよね。Dashが出た当初はむしろスニペット機能のために使っていました。

普段からスニペットを便利に使ってるので活用例を紹介してみようかと。

スニペット展開キーワードのPrefix

スニペットの省略表記としては普段の入力に差し支えないPrefixがあったほうが良いです。僕は;始まりのキーワードを登録しています。

メールアドレス

メインのgmailのアドレスと会社のアドレスをそれぞれ登録しています。

たとえば;mlと打つとメインのメールアドレスに変わるようにしています（mailのイメージ）。

Hugo（ブログ）用のショートコード

amazonのリンクを置くときや、別ページへのリンクカードを挿入するときなどのためにショートコード用のスニペットを用意しています。

例えば、amazonへの商品リンクを表示するために、Hugoへの入力として以下のようなテキストを入れておくようにしています。

{ {< amazon asin="XXXXXXXX" >}}
(↑本来はスペース要らないですが、ショートコードに解釈されちゃうので空けてます。以下同じです。)

いちいち入力するのが面倒なので、AmazonのページからASINをコピーしておいた上で;asinと入力するとコピーしておいた内容をasin=""の部分に展開した状態のテキストを挿入できるようにしています。

スニペットの定義は↓。

{ {< amazon asin="@clipboard" >}}

別ページのリンクカードは↓のような感じで、これも同じくコピー中の内容を展開したものを挿入してくれます。

{ {< screenshot url="サイトのURL" >}}

Rubyプログラムのデバッグ

RubyのプログラムのデバッグにはPryを使う派です。

binding.pryと打つことが多いので、;pryとするとbinding.pryに展開されるようにしています。

debuggerは何故か手打ちしちゃうんだよな。

チェックボックス✅を入力する

ただのテキストのリストにチェックボックスの絵文字を挿入してDoneの感じを出すことが個人的には多いです。

いちいち変換するのが大変なので、;chで絵文字が出るようにしています。

前にも似たようなの書いてたｗｗ

なんと4年半ぐらい前にも似たようなの書いてた。忘れてた。

Dashのスニペットに入れておくと便利なやつ教えて - PIYO Notes

Dashのスニペットに入れておくと便利なやつ教えて

モバイルアプリ用の全アイコンサイズを1枚の画像から書き出せるサイト - PIYO Notes

Webサイト用のアイコンをまとめて生成するサイト

Tue, 06 Nov 2018 06:07:07 +0900

アプリ用アイコンを生成するサイトは前に紹介しました。

モバイルアプリのアイコンを全部用意するの面倒ですよね。毎度必要なサイズが変わるし。僕は大きめの正方形画像を用意して、それを元に一括で縮小して生成してくれるサイトを使っています。ちゃんと調べていないので他にもあるのかもしれないですけど、僕はここを使ってます。

Favicon & App Icon Generator

Web用のアイコンを一括生成する

Webでも似たようなサイトを使ってまとめてガッと作っちゃうことができます。

色々ありそうですが僕はこれを使うかな。最初に見つけたので。

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

www.favicon-generator.org

ファイルをアップロードする

ベースとなるアイコンを選択し、少し設定をいじって「Create Favicon」を押せばOK。

しばらくすると完了ページへ遷移します。

一番下のチェックが入ってると公開ギャラリーに含まれちゃうみたいなので外すのが無難です。

ファイルをダウンロード&タグ設置

完了ページにあるダウンロードリンクを押すと全ファイルをダウンロードできます。

ダウンロードされるファイルは↓の通り。

% tree .
.
├── android-icon-144x144.png
├── android-icon-192x192.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── apple-icon-precomposed.png
├── apple-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── favicon.ico
├── manifest.json
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x310.png
└── ms-icon-70x70.png

実際にはfaviconだけあれば良いケースが多い気もしてますが、が、iOSでホーム画面に追加するときにはapple-icon-*が使われるので僕は自サイトには一応入れています。

またこのページには、HTMLのコードが載っています。これは<head>内に挿入するためのコードで、パスさえ気をつければほぼそのまま使えます。

このタグを思い出して書くのが面倒だからこのサイトを使っていると言っても過言ではないです。

real-world-railsでOSSのRailsアプリケーションを探す

Mon, 05 Nov 2018 06:53:34 +0900

real-world-railsっていうリポジトリにOSSのRailsアプリケーションがまとめられています。

GitHub - eliotsykes/real-world-rails: Real World Rails applications and their open source codebases for developers to learn from

Real World Rails applications and their open source codebases for developers to learn from - eliotsykes/real-world-rails

GitHub - vsouza/awesome-ios: A curated list of awesome iOS ecosystem, including Objective-C and Swift Projects

リンク集じゃなくて全部サブモジュールになってて一気にクローンできちゃいます。やる必要ないけど。

mastodonやdev.toなんかも入っています。

惜しいのは何がどんなアプリケーションなのかわからないことですね。

実装の参考などに多少は役にたつかも。

awesome-vueでOSSのVueアプリケーションを探す

Sun, 04 Nov 2018 06:45:44 +0900

ライブラリ探しにawesome-xxxxみたいなリポジトリを参考にすること多いんですが、まとまってるのってライブラリだけじゃないんですねー。

色々見てたら、awesome-iosにはスタンフォード大学の授業（だと思われる）iTunes Uのリンクがあったりとか、

A curated list of awesome iOS ecosystem, including Objective-C and Swift Projects - vsouza/awesome-ios

GitHub - jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!

awesome-react-nativeにはWeb記事のまとめがあったりします。

Awesome React Native components, news, tools, and learning material! - jondot/awesome-react-native

GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

Vueに至っては公式で用意されていて、記事や本などのがまとめられています。

🎉 A curated list of awesome things related to Vue.js - vuejs/awesome-vue

https://github.com/vuejs/awesome-vue#projects-using-vuejs

その中の「Projects Using Vue.js」のところを見ると、実際にVueを使ってるOSSプロジェクトがまとまってます。

これ、実装の参考になること間違いなしでは。

自分でも使いつつ、中身も覗けるといいよねーと思ったりします。

実際どこまでコード見るかというとなんとも言えないけど…

外部ディスプレイとMacBookを縦にならべることで首への負担の軽減をはかる

Sat, 03 Nov 2018 06:39:48 +0900

首こりからくる頭痛がひどいので自宅の仕事環境を色々変えてみようと試した記録です。

写真を撮りたかったんですが、ごちゃっとしている配線を写すのもアレだったのでiPadで絵をかきました。

元々は横ならびでした

デスクの上にディスプレイ2枚を配置し、MacBookは閉じた状態（いわゆるクラムシェルモード）にしておきます。

自分は2枚のディスプレイのちょうど真ん中あたりにおり、常に右か左のどちらかを向いている状態です。

この右か左のどちらかを向いている姿勢が首に負担をかけているのではないかと思ったわけです。

縦ならびにした

今は小さいほうのディスプレイを撤廃して、外部ディスプレイ1枚とMacBook Proを上下に並ばせる形で使用しています。

これだと左右を向く必要はなくなり、上下の動きが中心になります。

目線をちょうど外部ディスプレイの上端と合うぐらいにしているので、見上げる動作はありません。人間見下ろすより見上げるほうが首への負担が大きい気がします。見下ろす姿勢も、ずっとしているとつらくなるので主に正面に置いた外部ディスプレイを中心に使っています。

ちなみに、普通に外部ディスプレイを置くとMacBookのディスプレイ部分の裏側に隠れてしまう領域ができてしまい不便です。

そこはアナログハックで回避。外部ディスプレイの下にiPadの化粧箱を置いて高さを稼ぎました。

首こりは解消したのか！？

左右のときよりもいいのか悪いのか、結局はよくわかっていません。

副作用として、24インチのディスプレイは4Kディスプレイじゃなかったので少し見づらかったのが、27インチの4KディスプレイとMacBook Proの画面を使うようになって全部きれいに見えるようになりました。

トップページの表示がIEで壊れていたので直しました

Fri, 02 Nov 2018 06:21:55 +0900

IEでのトップ画面の表示がこのザマでした。各記事のカードみたいなのが潰れちゃってます。

Google Analyticsによると5%程度 IEからの閲覧があるようです。

まあ直接個別記事へ来ることがほとんどでしょうからトップページは見てないかもしれませんが、気持ち悪いので直すことにしました。

潰れている箇所のスタイルにflex: 1;なる指定があったので、まあほぼこれだろうとあたりをつけました。

IE11はflexboxに対応しているものの、挙動がおかしいことで有名です。先日も仕事のプロジェクトで遭遇して対応したことがあるのでなんとなくわかっていました。

ちなみにそのとき参考にしたのはこちらのQiita記事です。

flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita

flexbox使ってますか？バグつらいですね。必死に組んだレイアウトがIE11で崩れる様を見て、膝から崩れ落ちたことは何度もあります。 Solved by Flexboxの作者でもある、philipwaltonさんのflexbugsという素晴らしいflexboxのバグまと...

Hugoで脚注（footnote）を使用する方法 - PIYO Notes

今回はこのページのこの項目に類似するものだったと思われます（多分）。

アイテム潰れる問題（Safari）

1flex: 1;
2
3↓
4
5flex: 1 auto;

とすることで修正できました。

Hugoの脚注の戻るリンクのテキストを変更する

Thu, 01 Nov 2018 06:56:13 +0900

脚注を使う方法を書いたものの、

脚注はHugoで使えないと勝手に思っていましたが、ちゃんと使えました。 1 たまに本題からそれたことを補足で書きたくなるから、そういうときに使いたかったんでした。 Hugoの脚注の仕組み 2 こういう文章を書くと、あいうえお[^a]かきくけこ[^b][^b]: か行だよ[^a]: あ行だよ次のようにレンダリングされます。

The complete list of Hugo configuration settings.

脚注に飛んでまた戻るときのリンクのテキストが[return]となっていて嫌な感じだったので直す方法を調べました。

Markdownを処理するBlackfriday側のオプションなのかと思っていましたが、HugoではHugoのオプションとしてconfig.tomlに書くことがわかりました。

このドキュメントのfootnoteReturnLinkContentsの項目がそれにあたります。

All settings

gohugo.io

config.tomlのトップレベルに書くと有効になります。

僕は矢印を使ってみました。

1footnoteReturnLinkContents = "↩"

Hugoで脚注（footnote）を使用する方法

Wed, 31 Oct 2018 06:33:29 +0900

脚注はHugoで使えないと勝手に思っていましたが、ちゃんと使えました。¹

たまに本題からそれたことを補足で書きたくなるから、そういうときに使いたかったんでした。

Hugoの脚注の仕組み²

こういう文章を書くと、

あいうえお[^a]
かきくけこ[^b]
[^b]: か行だよ
[^a]: あ行だよ

次のようにレンダリングされます。

脚注を対応付けるラベルは数字の連番である必要はなく、脚注の指定箇所と説明の箇所で対応したラベルがあればOKのようです。

また、脚注の説明を書く場所と順番は特に重要ではなく、脚注指定箇所が文中に登場した順で本文末尾に挿入されるようです。

こう書いても同じ結果になります。

あいうえお[^a]
[^a]: あ行だよ
かきくけこ[^b]
[^b]: か行だよ

個人的には末尾にまとめて書いておいたほうが編集しやすくて良さそう。

脚注、こういうやつ。 ↩︎
Markdown全般がそうなのか、Hugo（Blackfriday）だけがそうなのかよくわかってないですが。 ↩︎

CodeSandboxっていうオンラインのJS環境がかなり強力だった

Tue, 30 Oct 2018 06:40:21 +0900

VeeValidateを紹介するときに、CodePenというサービスを使ってサンプルコードを紹介しました。

Vue.jsでのフォームバリデーションにVeeValidateを使ってみる - PIYO Notes

ちょこちょこVue.jsを使ってるんですが、まだ手に馴染みません。まだまだ馴染まない理由の1つにフォームがあります。 Railsをメインに使う生活をしているので、 form_for がないとフォームが書けません。というか、 simple_form gemばかり使っているのでさらになまっていて、たとえば bootstrap のフォームがどんな構造なのかを忘れているので、すごく手間がかかってしまいます。

CodeSandbox: Instant Cloud Development Environments

他にもJSFiddleやJSBinなど類似のサービスがいくつかあるのは知ってしましたが、Vueのサンプルを書くときにPreprocessorを選択したり、ライブラリをCDNから検索して簡単に追加したりといい感じだったのでCodePenを使ったんですよね。

CodeSandbox

で、ここから本題なんですが、VeeValidateのExampleが用意されていたCodeSandboxというオンラインエディターサービスが非常に強力そうでした。

CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.

codesandbox.io

JSFiddleやCodePenがPlayGroundなら、CodeSandboxはJavaScriptの実行環境付のIDEという雰囲気。画面はこんな感じです。

（ちなみにこれはvueのExampleをForkした状態です。）

左側にプロジェクトツリーがあって、真ん中にエディターがあって、右側にはプレビューというか実行中のサイトをプレビューするための画面があります。

プロジェクトツリー

「File Editor」と呼ばれているみたいです。

ここではファイルの追加、移動、削除ができたり、依存ライブラリを追加したりできます。

依存関係は「Add Dependency」ボタンから、インクリメンタルに検索して追加できます。すごい。よくできてる。

設定ファイル類

package.jsonとか.babelrcとかを確認したりいじったりできるようです。

エディター部

普通のエディターですがvueファイルまで扱えます。

入力補完もある程度効く模様。え、すごくない？

ブラウザ部分

index.htmlを開いて実行結果を見ることができます。リロードが効くのでコードを編集するとリアルタイムに更新されていくし、コードが間違っていればエラーを出してくれます。

また、実行環境のURLhttps://81oy51q9o8.codesandbox.io/は外部からも使えないこともないです。永続的に使える感じではなさそうに見えます。どうなのかな。ブラウザ変えて確認してみるみたいなときに便利かもしれません。

81oy51q9o8.codesandbox.io →https://81oy51q9o8.codesandbox.io/

埋め込み

埋め込んでみるとこんな感じになります。

その他

その他にもコンソールが下からにゅっとでてきたりとか、GitHubと連携できたりとか、すごいです。

もしかしてCodePenとかと比べるのが間違ってて、Cloud9とかと比べたほうがいいのではないかもしれない。

Vue.jsでのフォームバリデーションにVeeValidateを使ってみる

Sun, 28 Oct 2018 06:48:32 +0900

ちょこちょこVue.jsを使ってるんですが、まだ手に馴染みません。まだまだ馴染まない理由の1つにフォームがあります。

Railsをメインに使う生活をしているので、form_forがないとフォームが書けません。というか、simple_form gemばかり使っているのでさらになまっていて、たとえばbootstrapのフォームがどんな構造なのかを忘れているので、すごく手間がかかってしまいます。

さて、フォームを組み立てたら次はValidationしたくなります。昔ながらなRailsアプリケーションではフォームの内容をいったんサーバーに送って、サーバーサイドでバリデーションを書けます。

せっかくVue.js使うならクライアントサイドでもそれなりにやってしまったほうが良いですよね（ですよね？）。

VeeValidateというVue.js用のバリデーションライブラリを見つけたので試しました。

GitHub - logaretm/vee-validate: ✅ Painless Vue forms

✅ Painless Vue forms. Contribute to logaretm/vee-validate development by creating an account on GitHub.

baianat.github.io →https://baianat.github.io/vee-validate/guide/rules.html

VeeValidate用サンプルアプリ

問い合わせフォームっぽいものを作りました。

メールアドレス
タイトル
本文

を入れてもらうフォームで、全項目必須、メールはフォーマットまで確認するということにしました。

HTML

 1<div id="app">
 2 <form action="" @submit.prevent="validate">
 3 <div class="form-group">
 4 <label for="">メールアドレス</label>
 5 <input name="email" type="text" class="form-control" v-validate="'required|email'" />
 6 <span class="text-danger">{{ errors.first('email') }}</span>
 7 </div>
 8 <div class="form-group">
 9 <label for="">タイトル</label>
10 <input name="title" type="text" class="form-control" v-validate="'required'" />
11 <span class="text-danger">{{ errors.first('title') }}</span>
12 </div>
13 <div class="form-group">
14 <label for="">本文</label>
15 <textarea rows="5" class="form-control" name="body" v-validate="'required'">
16 </textarea>
17 <span class="text-danger">{{ errors.first('body') }}</span>
18 </div>
19 <button type="submit" class="btn btn-primary">送信</button>
20 </form>
21</div>

見た目は↓↓な感じね。

JavaScript

JavaScriptはあまり書くことがありません。

VeeValidate自体の登録
Vueインスタンスの生成
バリデーション処理

うまくいったときだけalertが表示されます。実際のアプリケーションではサーバーにPOSTするなど必要な処理を実行することになります。

 1Vue.use(VeeValidate);
 2
 3new Vue({
 4 el: '#app',
 5 methods: {
 6 validate() {
 7 this.$validator.validateAll()
 8 .then((result) => {
 9 if (result) {
10 alert('valid!');
11 }
12 });
13 }
14 }
15});

VeeValidateの使い方

VeeValidateで重要なのことはこの2行を見れば大体わかると言えそうです。

<input name="email" type="text" class="form-control" v-validate="'required|email'" />
<span class="text-danger">{{ errors.first('email') }}</span>

1行目のname=とv-validate=、2行目のerrors.first('email')が重要です。

name

nameかdata-vv-nameがないと警告が出ます。

"[vee-validate] A field is missing a 'name' or 'data-vv-name' attribute"

後述するエラー情報などに使われるからだと考えられます。

v-validate

こちらはバリデーション条件を指定する属性で、文字列やオブジェクトを渡すことができるようです。

必須項目には'required'、必須かつメールアドレスのフォーマットチェックには'required|email'のように複数の条件を結合して使えそうです。

ルールの一覧はこちらのドキュメントに。

かなり豊富なので大抵のことは簡単に指定できそう。

さきほどの例では、'required'と'required|email'を使っています。

エラー表示

errors.first('email')には、name="email"なinputにバリデーションエラーがある場合に、エラーメッセージが入っています。

1<span class="text-danger">{{ errors.first('email') }}</span>

として表示するようにしておくと、エラーがあるときだけメッセージが表示されます。

エラーメッセージの日本語化やフォームの見た目調整など気になるところはありますが、ひとまずこれでバリデーションできたと言えそうなところまで来ました。

コード全体

今回のコード全体です。

See the Pen vee-validate by hiromasa (@pi-chan) on CodePen.

GitHubのsuggestion機能でプルリクエストのレビュー中にコードを提案できるらしい

Sat, 27 Oct 2018 06:07:05 +0900

というのをTwitterで見かけたので試してみました。

プルリクエストのレビュー欄で案内が出るので見たことがある人も多いかもしれません。

検証のため、本当に雑なプルリクエストを作って試しました。コードに意味はないので気にしないでください。

suggestionを試す by pi-chan · Pull Request #1 · pi-chan/MobxTodoApp

puma & puma-dev で利用中の.devを.testなどに変更する - Qiita

suggestion機能の使い方

suggestion機能は、プルリクエストのレビューをしていて、「ここのコード、こっちの書き方のほうがいいよとか、こっちの書き方じゃないとまずいよ」というときに、コードの差分をまるっと書いてあげるとそのまま取り込める、みたいな機能です。

suggestionを作る

プルリクエストのコメント欄のここ（↓）にボタンがあります。

これを押すと、

```suggestion
// code
```

みたいなテキストがコメント欄に挿入されます。ここに、どのように元のコードから変えたほうがいいのか、みたいなことを書きます。

たとえば画像の例ではletをconstに変えようという指摘をしています。

```suggestion
let dummy = 'dummy text';
```

最初↑のように挿入されたものを↓に書き換えてコメントを登録します。

```suggestion
const dummy = 'dummy text';
```

すると差分つきのコメントになります。Resolve conversationボタンやApply suggestionsボタンもありますね。

suggestionを適用しない場合

議論した結果やっぱりこの差分使わない、となった場合はコメント左下にあるResolve conversationを押せばOK。suggestionは畳まれるのでそのあとあまり邪魔にはなりません。

差分そのままじゃなくて自分でもうちょっと直すというときもResolveしそう。

suggestionを適用する場合

差分をまるっと取り込みたい場合はApply sugggestionsします。コミットメッセージをつけてコミットができます。

コミットすると、プルリクエストの元ブランチに新しいコミットとして追加されます。

という感じでした。

これ結構使えそうだー。

macOS MojaveでDockに最近使ったアプリがでるようになったのを消したい

Fri, 26 Oct 2018 06:12:26 +0900

macOSをMojaveにアップデートしたらDockに最近使ったアプリがでて少々邪魔。

こんな風に出るやつ。

システム環境設定のDockの設定を開いてみたら消せたので消しました。

GoogleのOAuthの設定のリダイレクトURIに.testドメインが使えなくて困る

Thu, 25 Oct 2018 06:24:56 +0900

個人用にGoogleのOAuthで認証できるRailsアプリを作っているんですが、開発時に用いるリダイレクトURIに開発サーバーの.testドメインが使えなくて困っています。

結論から言うと解決策はわかっていません。なので、ただの愚痴です。

もともとは、Railsアプリケーションのためにpuma-devを使って.devドメインで、http://my-app.devとかで開発したサイトを確認していました。ところが、.devドメインはGoogleが所有していて、Chromeでは.devドメインにHSTSが効くようになってしまっています。

なのでpuma-dev勢はみんな「puma-devでは.testドメインを使おう」という対応をしたわけです。HSTS以外にもGoogleが勝手になにかする可能性がないとも言えないしね。

やってくれたな。GoogleChromeよ。 HSTS(HTTP Strict Transport Security) HTTP Strict Transport Security (エイチティーティーピー・ストリクト・トランスポート・セキュリティ、略称 HSTS)とは...

GitHub - charliekassel/vuejs-datepicker: A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

普段の開発は.testドメインを使うだけで大丈夫でしたが、久しぶりにGoogleのOAuthを使っているアプリを動かそうと思ったときに困りました。

Google側に登録しているOAuthアプリケーションの設定では、リダイレクトURIにmy-app.devのURLを登録していました。ところがローカルのサーバーは.testドメインで動いています。

なので、my-app.testとして登録しようとしたら、エラーになりやがる。

Googleの言葉を借りれば、.testは「パブリックトップレベルドメイン」ではないようで、登録できないわけです。

これで詰み、とはならないですが少々不便です。仕方ないのでlocalhost:3000のURLを登録してrails sして開発しています。面倒です。

RubyでネストしたHashのキーをフルパス？にする方法

Wed, 24 Oct 2018 06:47:53 +0900

RubyでYAMLファイルを読むとネストしたHashにできます。

1a:
2 b:
3 c1: hogehoge
4 c2: fugafuga

であればこうなります。

 1require 'yaml'
 2hash = YAML.load_file('さっきのyml')
 3
 4# hashは↓と同じものになる
 5{
 6 a: {
 7 b: {
 8 c1: 'hogehoge',
 9 c2: 'fugafuga',
10 }
11 }
12}

ところでRailsの多言語対応のための仕組みI18nではYAMLを使いますよね。で、I18n.l('activerecord.errors.messages.record_invalid')などとして、キーを渡すと翻訳が返ってきます。

このキーの部分をドットでsplitしてYAMLを読み込んだHashを辿れば目的の翻訳にたどり着けるわけですが、その逆の全てのキーを結合してフルパスみたいにしたHashが欲しくなったのでどうやってやるのかなーと調べました。

（そもそもなんて呼んだらいいのかわからないので、便宜的にフルパスとでも呼んでおきます。）

つまり、↓のようなYAMLファイルがあったら（rails-i18nのja.ymlを拝借しています）、

1ja:
2 activerecord:
3 errors:
4 messages:
5 record_invalid: "バリデーションに失敗しました: %{errors}"
6 restrict_dependent_destroy:
7 has_one: "%{record}が存在しているので削除できません"
8 has_many: "%{record}が存在しているので削除できません"

↓こうなってほしいのです。

1{
2 "ja.activerecord.errors.messages.record_invalid" => "バリデーションに失敗しました: %{errors}",
3 "ja.activerecord.errors.messages.restrict_dependent_destroy.has_one" => "%{record}が存在しているので削除できません",
4 "ja.activerecord.errors.messages.restrict_dependent_destroy.has_many" => "%{record}が存在しているので削除できません",
5}

調べてみてさっとできそうな方法がわからなかったので、再起的に書いてみることにしました。

 1module HashKeyJoiner
 2 module_function
 3
 4 def join(hash, divider = '.')
 5 h = {}
 6 each_path(hash.dup, '', divider) do |path, value|
 7 h[path] = value
 8 end
 9 h
10 end
11
12 def each_path(object, path, divider = '.', &block)
13 if object.is_a?(Hash)
14 object.each do |key, value|
15 div = path.empty? ? '' : divider
16 next_path = [path, key].join(div)
17 each_path value, next_path, divider, &block
18 end
19 else
20 yield path, object
21 end
22 end
23end

Hashを拡張するのもよいのですが、専用のモジュールにして呼ぶだけにしておきました。

Hashを辿りながら、次の子要素がHashであれば再帰処理、終端の文字列であれば新しいHashに値を追加をしています。途中経過のpathを結合していきながらたどっているので、キーのフルパスで新しいHashを作れます。

↓のように呼び出すと、

1yaml = YAML.load_file('./ja.yml')
2puts HashKeyJoiner.join(yaml)

↓のようにHash化されます。

1{
2 "ja.activerecord.errors.messages.record_invalid"=>"バリデーションに失敗しました: %{errors}",
3 "ja.activerecord.errors.messages.restrict_dependent_destroy.has_one"=>"%{record}が存在しているので削除できません",
4 "ja.activerecord.errors.messages.restrict_dependent_destroy.has_many"=>"%{record}が存在しているので削除できません",
5 ...
6}

使いみちはあまりなさそうですが、ひとまず僕の目的は達成。

Vue Componentのstyleを上書きするには

Tue, 23 Oct 2018 06:58:45 +0900

今日もvuejs-datepickerに絡めての話。

datepickerをインライン表示したら幅が固定になっていて困りました。

こうじゃなくて、

こっちにしたい。

コンポーネントのstyleを見ると幅300pxと固定になっています。これを幅100%にしたいの上書きします。

普通にグローバルなCSSに書いちゃう

このカレンダーの幅を指定しているのが、.vdp-datepicker__calendarクラスです。scopedスタイルでは書かれていないのでグローバルなスタイルとして書いてしまえば上書きできそうです。

なので、↓のようにしちゃえば万事解決です。

1.vdp-datepicker__calendar {
2 width: 100% !important;
3}

一番シンプル。

だけど、複数箇所でカレンダーを使いたくて、それぞれ異なったスタイルにしたい場合はこれでは解決できません。

scopedとは別にstyleを書く

Vueコンポーネントのファイルに<style></style>を複数持ってしまうこともできます。片方はscoped、もう片方はグローバルという感じ。

 1<style scoped>
 2/* こっちはコンポーネント用のスタイル */
 3.style-for-this-component {
 4}
 5</style>
 6
 7<style>
 8.vdp-datepicker__calendar {
 9 width: 100% !important;
10}
11</style>

これだとグローバルなCSSに書くのと変わりません。書くファイルが違うという程度。

部分的に適用したいという用途がある場合には問題となります。

scopedなstyleに書く

vuejs-datepickerのコンポーネントのルート要素は.vdp-datepickerです。

なので、自前のVueコンポーネント内でにdatepickerを置いた場合には、

1<div data-v-356757fe="" data-v-73d4f3b9=""> <!-- 自前コンポーネント -->
2 <div data-v-356757fe="" class="vdp-datepicker"> <!-- datepicker -->
3 ...
4 <div class="vdp-datepicker__calendar" style="position: static;"> <!-- styleをあてたい -->
5 </div>
6 ...
7 </div>
8</div>

といった構造になります。

もちろん↓のようにscopedなstyleを書くと、

1<style scoped>
2.vdp-datepicker__calendar {
3 width: 100% !important;
4}
5</style>

生成されるのは次のようなcssなので、styleが適用されません。

1.vdp-datepicker__calendar[data-v-356757fe] {
2 width: 100% !important
3}

そこでvue-loaderのディープセレクタという機能を使います。

スコープ付き CSS · vue-loader

vue-loader-v14.vuejs.org

scoped スタイルのセレクタを “deep” にしたい、つまり子コンポーネントに及ぼしたい場合は、»> コンビネータを使用することができます:

ということで、コードは次のようになります。

1<style scoped>
2.vdp-datepicker >>> .vdp-datepicker__calendar {
3 width: 100% !important
4}
5</style>

が、↓のようにコンパイルされます。

1.vdp-datepicker[data-v-356757fe] .vdp-datepicker__calendar {
2 width: 100% !important
3}

Vueのデータ属性が親にしか付与されないため、子コンポーネントのスタイルをオーバーライドできるというわけです。

Vue Componentインスタンスの関数を呼び出す方法

Mon, 22 Oct 2018 06:13:36 +0900

Vue Componentの関数、具体的にはvuejs-datepickerのsetDateを呼び出すのってどうするの？というのでちょっと迷ったのでメモ。

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations - charliekassel/vuejs-datepicker

Vue.js - The Progressive JavaScript Framework

このdatepickerをインライン表示で使おうとしてるんですが、Todayボタンがなさそうなのが不便なので自分でボタンを置いて作ろうとしました。

なんですが、設定する方法がわからず。

最初v-model="date"とかやっておけば勝手に反映されるかなと思ったんですが違いましてね。

なんとなくコードを読んだことでdatepicker自体にsetDateなる関数があることはわかっていたので、それを呼べばいいんだろうと思ったものの、じゃあどうやってアクセスするの？と。

結論からいうと、ref属性で大丈夫でした。ドキュメントにも書いてあった。

特別な問題に対処する — Vue.js

jp.vuejs.org

なので、Todayボタンを実現するためのコードはこんな感じになりました。

 1<template>
 2 <div>
 3 <datepicker v-model="date" :inline="true" :language="ja" ref="picker"></datepicker>
 4 <a class="btn btn-primary" @click="todayClick">
 5 今日
 6 </a>
 7 </div>
 8</template>
 9
10<script>
11 import Datepicker from 'vuejs-datepicker';
12 import {ja} from 'vuejs-datepicker/dist/locale'
13
14 export default {
15 data: () => {
16 return {
17 date: new Date(),
18 ja
19 }
20 },
21 components: {
22 Datepicker,
23 },
24 methods: {
25 todayClick() {
26 this.$refs.picker.setDate(new Date());
27 },
28 },
29 }
30</script>

High Sierra以降のmacOSではBoot CampのWindowsからMacを指定して再起動できない

Sun, 21 Oct 2018 06:59:39 +0900

先日Boot Campを使ってWindowsも入れているMacをSierraからMojaveまでアップグレードしました。

そしてWindowsを使ってからBootCampのメニューから「OS Xで再起動」を実行すると、**「OS X のブートボリュームが見つかりませんでした」**とのメッセージが！

MacのアップデートでBoot Campがおかしくなったか？と焦りました。

しかし、きちんとAppleのサポートドキュメントがありました。

MacをmacOSまたはWindowsで再起動する - Apple サポート (日本)

Boot Campを使ってIntel搭載のMacにMicrosoft Windowsをインストールした後、MacをmacOSまたはWindowsのどちらで起動するかを選択できます。

support.apple.com

High Sierraから導入されたAPFSによってそれまでと同じ方法が使えなくなってしまったようです。

起動方法は↓です。

Mac を再起動して、すぐに「option」キーを押し、そのまま押し続けます。
Startup Manager のウインドウが表示されたら「option」キーを放します。
macOS または Windows の起動ディスクを選択してから、矢印ボタンをクリックするか「return」キーを押します。

今まではWindowsを終わりつつ勝手にMacで起動できたのが、Windowsを止めたあとoptionsキーを押しっぱなしにしてStartup Managerを待つという手間ができた分面倒になりました。

まあ、壊れたわけじゃなくてよかったですけども。

Macのスクロールバー表示設定を「スクロール時に表示」に変えたらすっきりした

Thu, 18 Oct 2018 06:48:17 +0900

Macでは普段トラックパッドを接続して使っているます。その関係で各種ウィンドウには常にスクロールバーが表示されています。

それが普通だと思っていました。

ところが最近iTerm2のプロンプトがずれる問題が多発。スクロールバーのせいじゃないか？いやむしろターミナルにスクロールバーが出てる事自体やぼったいのではないか？と思うに至りました。

そういう流れでスクロールバー表示の設定を見直してみたら、見慣れない「スクロール時に表示」の設定が。これ、元々ありましたっけ？ググってみると少なくとも5年前から設定があるので僕が知らなかっただけですね。

デフォルトでは**「マウスまたはトラックパッドに基づいて自動的に表示」**されています。

MacBook本体のトラックパッドのみの場合には、スクロールバーは常には表示されずスクロール時のみふわっと表示されます。おそらくUSBマウス接続時にはスクロールバーを常に表示する設定なっているのでしょう。もしかしたらApple製品ではないポインティングデバイスの場合にスクロールバーが現れるのかもしれません。

USBマウスでも常に表示される必要はない！と思い、設定を変更しました。ここを**「スクロール時に表示」**です。

やはりターミナルはスクロールバーのような野暮ったいのは出てないほうがよいです。

↑がこう↓なりました。

webpackerのwebpack-dev-serverが動くポートを環境変数を使って変更する

Sun, 14 Oct 2018 06:33:04 +0900

webpackerを使ったRailsプロジェクトでは多くの場合webpack-dev-serverを同時に動かしておくことが多いと思われます。

ところがそのwebpack-dev-server、配信側もアプリ側もポート番号が3035に固定されているように見えます。

これでは複数のRailsアプリケーションを動かしたいときに、ポートが衝突してしまって1つしかwebpack-dev-serverを起動できない事態になってしまいます。

環境変数によってポートを変更する方法

まずは結論から。

rails serverとwebpack-dev-serverのコマンドの両方に↓の環境変数を追加すればOKです（たとえばポートを3036に変えるとしましょう）

WEBPACKER_DEV_SERVER_PORT=3036
WEBPACKER_DEV_SERVER_PUBLIC=localhost:3036

（ただ動くようにするためには、webpack-dev-server側の…_PUBLICの環境変数は不要です。ですが、webpack-dev-serverのログには…_PUBLICのURLが表示されており、それはそれで気持ち悪いので両方にセットするのが無難です）

環境変数がどこで有効になるのか

webpack-dev-server

webpack-dev-serverでは設定ファイルのyamlを読み込んだあと、ポートなどの値を取りに行きます。そのとき、環境変数側に値があれば環境変数を優先するというロジックになっていました。

https://github.com/rails/webpacker/blob/master/lib/webpacker/dev_server.rb#L62-L64

JS側

Rails起動時にconfig/webpack/development.jsが読まれます。このとき、内部ではここのコードが呼び出されており、さらにその先で環境変数がある場合は優先するような記述があります。

https://github.com/rails/webpacker/blob/master/package/dev_server.js#L13-L14

おわり

環境変数が長ったらしいこともあり、これらの環境変数をコマンドに毎回付与するのはあまり実用的じゃありません。ですが、当面は1回目だけ頑張って入力して、それ以降はコマンド履歴から探すというのが楽そうです。環境変数で指定するだけであればプロジェクトメンバー全員で統一する必要もありませんしね。

以下ただの感想です。

これらの環境変数についてはあまりドキュメントに書かれておらず、結局コードを読んでいくはめになりました。環境変数名がわかってからリポジトリ内を調べてみると、一部ドキュメントがありましたのでリンクしておきます。

webpacker/docs/cloud9.md at 227661b546701e107213aa9b6f83451bc89cf7d5 · rails/webpacker

Use Webpack to manage app-like JavaScript modules in Rails - rails/webpacker

MenuMeters for OS X El Capitan 10.11 and later

Cloud9だとこう使うよ、というドキュメントにポートなどを個別にしていするためのやり方が載っていました。そっちかよという気持ちです。

Macのメニューバーにリソースモニターを表示する

Sat, 13 Oct 2018 06:05:37 +0900

MacのメニューバーでCPUやメモリなどのリソース状況を把握するためのツールがあるようなので入れてみることにしました（thanks to 同僚の@ruzia）。

気がついたら遅くなっているなんてことがたまにあるので、CPUとメモリの状況を簡単に知るたら良いと考えての導入です。

こちらからダウンロードしてインストールできます。

member.ipmu.jp

昔のWebを感じさせるサイトではありますが、きちんとメンテナンスされておりmacOS Mojaveでも動くことが確認されています。

また、ソースコードがGitHubにあるのが1つの安心材料にはなりそうです。

GitHub - yujitach/MenuMeters: my fork of MenuMeters by http://www.ragingmenace.com/software/menumeters/

my fork of MenuMeters by http://www.ragingmenace.com/software/menumeters/ - yujitach/MenuMeters

Hugoブログのシンタックスハイライトに行番号をつける - PIYO Notes

インストール方法

配布サイトの「Setting up」のあたりにダウンロードリンクがあるのでそこからダウンロードします。というか、Setting upの説明を見れば導入できますね。

zipがダウンロードされるので展開すると、MenuMeters.prefPaneというファイルが現れます。

これを開いて（ダブルクリックして）、Macの設定画面にMenuMetersをインストールします。

インストールの際、次のような確認のポップアップが現れます。

好みの選択肢を選んでインストールを完了しましょう。

設定画面

MenuMetersの設定画面はこんな感じです。

見た目の種類を変えたり色を微調整したりと、それなりに調整可能なオプションがあって好みの設定にできます。

ちなみに僕はCPUとメモリだけをモニターしています。

メニューバーの表示はこのようになりました。

highlightjs-line-numbers.jsの結果に変な出力 "{1}" が混じる

Fri, 12 Oct 2018 06:35:34 +0900

このブログではソースコードのシンタックスハイライトにhighlight.jsを使っており、行番号の表示にはhighlightjs-line-numbers.jsを使用しています。

このブログ、ソースコードを載せることが多いです。載せたコードについて書く時、◯行目とかいいたくなったので行番号を表示したいなと思いました。でも、Hugoってどうやってソースコード出してるんだろう？ということで調べてみると、元々は Pygments 、現在はGo実装の Chroma というのを使っているようです。

PHP Code Block extra line containing '{1}' · Issue #42 · yauhenipakala/highlightjs-line-numbers.js

あるとき、行番号の処理の結果として{1}のような不思議な文字列が紛れ込むことに気が付きました。たとえば↓のようなものです。

本来はただの空行なのに変なのが混じっています。

内容のせいかなと色々試行錯誤しても駄目だったので、さきほど本格的に調べてみることにしました。

そこでようやく気がついたのが、highlight.js本体ではなくて、highlightjs-line-numbers.jsのほうだったということ。本体側だと思いこんでいました。

そこでissueをあたってみると、まさにこれというissueがありました。単なる不具合だったようで、すでにマージされ、リリースまでされていました。

When using php as language and an html element contains a class attribute the result contains an extra line containing only: {1} To Reproduce Minimal bug example: <link ...

GitHub - textlint-rule/textlint-rule-prh: textlint rule for prh.

2週間ほど前に対応されており、ちょうどいいタイミングで調べたなーという感じです。

参照しているファイルを変更することで対応できました。

1<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

↓

1<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.4.0/highlightjs-line-numbers.min.js"></script>

textlintでテキスト校正くんのように表記揺れの指摘を行うには

Thu, 11 Oct 2018 06:11:35 +0900

ひとつ前の記事ではtextlintの結果をEmacs上で確認できるようにしました。次はテキスト校正くんが持っている、用語の表記や漢字の開き方に関する指摘の機能の部分を導入します。

textlint-rule-prhの導入

下準備としてtextlint-rule-prh導入します。 textlint-rule-prhはprhという日本語の自動校正ツールをtextlintから使うための仕組みです。

textlint rule for prh. Contribute to textlint-rule/textlint-rule-prh development by creating an account on GitHub.

GitHub - prh/prh: proofreading helper

proofreading helper. Contribute to prh/prh development by creating an account on GitHub.

GitHub - ics-creative/textlint-rule-preset-icsmedia: ics.media で利用されているテキストリントのルールです

prh自体が自動校正ツールとしての側面があるものの、おそらく汎用的に使える作りにはなっていません。 textlintのルールにすることで汎用的になっているのだと思われます。

前の記事の例ではtextlintをグローバルにインストールしていますので、textlint-rule-prhもグローバルに入れてしまいます。

% npm install -g textlint-rule-prh

textlint-rule-preset-icsmediaの導入

続いてテキスト校正くんの内部で使われているtextlint-rule-preset-icsmediaを導入します。

ics.media で利用されているテキストリントのルールです. Contribute to ics-creative/textlint-rule-preset-icsmedia development by creating an account on GitHub.

https://github.com/ics-creative/textlint-rule-preset-icsmedia/tree/master/dict

こちらもグローバルに。

% npm install -g textlint-rule-preset-icsmedia

そして今入れた2つを使うように.textlintrcを更新します。"prh: "としている箇所がそれです。

1{
2 "rules": {
3 "preset-ja-technical-writing": true,
4 "prh": {
5 "rulePaths": ["/usr/local/lib/node_modules/textlint-rule-preset-icsmedia/dict/prh.yml"]
6 }
7 },
8}

prhにはルールを記述したファイルが置かれたパスを書きます。

具体的ルールは↓のURLを見ていただくとわかります。このプリセットでは複数ファイル分のルールが有効になっています。

たとえばファイルprh_web_technology.ymlには次のような記述があり、GitHubとすべき箇所の表記揺れに指摘をいれてくれるようになります。

1rules:
2 - expected: GitHub
3 patterns:
4 - Github
5 - github
6 - Git Hub
7 - git hub

応用できそう

prhのルール記述は割と簡単なので、オリジナルのルールの追加も容易そうです。自分が間違えやすいタイポや書き間違いがある方はルールとして追加しておくと良さそうです。

textlintの結果をEmacs上で確認できるようにした

Wed, 10 Oct 2018 06:07:31 +0900

昨日テキスト校正くんが便利だという記事を書いたばかりではありますが、Visual Studio CodeではなくEmacsで書けるのが望ましいです。

いずれはテキスト校正くんと同様のチェックをかけたいものの、まずは以前textlint導入記事で導入したルールを使って判定するところまで持っていきます。

Emacs上での結果表示にはflycheckという有名な拡張を使用します。

textlint再導入

textlintは.textlintrcファイルにより、プロジェクトごとに独自のルールによって文章校正が可能です。とはいったものの、僕にとってそれはオーバースペックです。個別のルールまでは不要のため、グローバルにtextlintを導入しました。

先日の記事でも導入した、textlint-rule-preset-ja-technical-writingを利用することにします。

文書を自動チェックするtextlintを日本語の技術ブログにも使おう - PIYO Notes

日本語にtextlintをかけると便利、という話をチラっと聞いたのでブログに応用すべく導入してみました。まず、textlint自体がこちら。 https://github.com/textlint/textlint そして、日本語技術文書用のルールプリセットがこちらです。 https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing ブログに応用するという観点で考えると、Hugoのルートディレクトリがよさそうです。

textlint for emacs flycheck

今回はグローバルにインストールしますので、-gオプションをつけてインストールします。

% npm install -g textlint
% npm install -g textlint-rule-preset-ja-technical-writing

また、設定ファイルはホームディレクトリに設置します。

% cat ~/.textlintrc
{
"rules": {
"preset-ja-technical-writing": true
}
}

これでtextlintの導入は完了ですね。

flycheckの設定

Emacsユーザーでflycheckを使っている方は多いと思われますので、flycheck自体のインストールは割愛します。

こちらのGistを参考に、markdown-modeでtextlintを使う設定を↓のように書きました。

textlint for emacs flycheck. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

 1(flycheck-define-checker textlint
 2 "A linter for Markdown."
 3 :command ("textlint" "--format" "unix" source)
 4 :error-patterns
 5 ((warning line-start (file-name) ":" line ":" column ": "
 6 (id (one-or-more (not (any " "))))
 7 (message (one-or-more not-newline)
 8 (zero-or-more "\n" (any " ") (one-or-more not-newline)))
 9 line-end))
10 :modes (text-mode markdown-mode gfm-mode))
11
12(add-hook 'markdown-mode-hook
13 '(lambda ()
14 (setq flycheck-checker 'textlint)
15 (flycheck-mode 1)))

この設定を評価後にMarkdown形式のファイルを開くとチェック結果がきちんと対象箇所に波線で表示されるようになりました。

校正くんが提供してくれる漢字を開くルールや技術用語に関するルールなどはおいおい取り込んでみたいと考えています。

Visual Studio Code拡張の「テキスト校正くん」で日本語文書を校正する

Tue, 09 Oct 2018 06:34:56 +0900

先日「エンジニアのための、いますぐ使える文章校正テクニック」という記事がバズっていました。僕はちゃんとしなきゃーと思いながら読んでおりました。

エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA

ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。

ics.media

記事中に紹介されていた「テキスト校正くん」なるVisual Studio Code用の拡張が良さそうに見えたので早速導入してみました。

テキスト校正くんの導入方法

まずVisual Studio Code（以下Code）を入手する必要があります。こちらのページから各環境ごとのパッケージやインストーラーをダウンロードします。

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

僕はCodeインストール済ではあったものの普段使いはしていませんでした。なので設定ファイルなどをすべて削除し、Code自体をアンインストールしてから再度インストールしました。

続いてCode内、拡張機能の画面からテキスト校正くんを入れます。これだけでOKでした。

ちなみにテキスト校正くんのページはこちらです。

テキスト校正くん - Visual Studio Marketplace

Extension for Visual Studio Code - VS CodeでテキストファイルやMarkdownファイルの日本語の文章をチェックする拡張機能

文書を自動チェックするtextlintを日本語の技術ブログにも使おう - PIYO Notes

実際に使ってみた

テキスト校正くんの指摘対象となる単語や文を適当にいれてみました。雰囲気はこのような感じ。

リアルタイムに波線が引かれ、エラー表示のショートカットやマウスオーバーにより内容を確認できます。

ところで僕は先日textlintを使ってみようといった内容の記事を書いています。そのときはコマンドラインから確認するのみで、このようにエディター上で確認できるようにはしていませんでした。

itunes.apple.com →https://itunes.apple.com/us/app/gerty-ebook-reader-for-epub-journal-notes-photos-and-maps/id901817060?mt=8

コマンドラインで都度実行ですと、そもそも実行するのを忘れがちですし、指摘箇所を探すのも手間がかかります。手軽さと継続性に難ありです。

テキスト校正くんのようにエディター上で確認できれば、すぐさま修正しようという気になるがとても良いです。

Codeを常用していないのが唯一残念なところです。テキスト校正くんは内部ではtextlintを使用しているはずなので工夫すれば僕が常用するEmacsでも使えるかもしれません。

Kindleの連続スクロールが最高！電子書籍の縦スクロールがかなりオススメです

Mon, 08 Oct 2018 06:43:36 +0900

電子書籍はなんとなく読みにくくて、ネット記事なら読みやすいという感覚を持ったことがある人はいるでしょうか。僕は数年前にそのように思ったことがあって、1つの仮説に辿りつきました。

それはページのめくり方（スクロール方向）です。

ページめくり型の電子書籍は明示的にページ送りをしなければいけません。そもそもその動き自体、読む流れに対して抵抗があります。

その上、ページをめくってしまうため少し前の内容をなんとなく参照するということができません。もう一度読み直したいときは前のページに戻って、また次のページに戻らねばなりません。

それに対してネットの記事は縦に長いことが多いのですが、スマートフォンでは自然に読めます。目の動きに合わせて画面も同じ方向にスクロールしていけばいいので読む動きと実際のデバイスの操作との間に抵抗がありません。

少し前の内容を確認したい場合、その部分は画面内にあることが多く、軽く目を動かすだけで参照できるでしょう。

この仮説を証明するために縦スクロール型の電子書籍リーダーはないものか、と当時目を皿のようにしてWebやアプリストアを探し回った記憶があります。

そのときに見つけたこちらのアプリ「Gerty」はepubのようなフォーマットを縦クスロールで読むことができる貴重なアプリでした。

実際にこのアプリを使って読んでみて、仮説は正しいのだなと実感ができました。やはり縦スクロールのほうがスムーズに読めました。

そんな中、KindleのiOS版アプリが縦スクロール（アプリ内では連続スクロールと表記）に対応していることを知りました。たまたま気がついたのがきっかけでしたが、更新履歴をふり返ってみると2018年の4月か5月ごろには対応されていたようです。

全然知らん間にiOSのKindleで縦スクロールできるようになってるーーー！！！最高じゃん
— Hiromasa Ohno（ぴー） (@pi_cha_n) October 5, 2018

設定方法は、Kindleアプリの文字サイズなどを変更するボタンの中に。

連続スクロールのスイッチをONにすればOK。対応している形式（一部の横書き形式）の場合は縦スクロールになってくれるはずです。

オススメですのでぜひお試しを。

RubyMineでタブを分割したペイン間で移動するプラグインを発見してめちゃくちゃ捗る

Sun, 07 Oct 2018 06:05:51 +0900

RubyMineのところはJetBrainsの各種エディターと読み替えてもらって大丈夫です。

私、メインで使っているEmacsでたくさんペイン分割をする習性がありまして、RubyMine等々でも最大2x2ぐらいには分割して使っています。RubyMineではこれらの分割した部分のことをSplitterというらしいです。

Splitter分割やSplitter間のフォーカス移動、Splitter間のファイルタブ移動などの操作はどうにかしてマウスを使わずに行いたいものです。Splitterの分割やSplitter間のフォーカス移動はRubyMineにメニューがあるため、設定からキーボードショートカットを設定すればOKです。

それぞれ↓のようなメニューに対応しています。

Split Horizontally（上下に分割）
Split Vertically（左右に分割）
Goto Next Splitter（次のSplitterにフォーカスを移動）
Goto Previous Splitter（前のSplitterにフォーカスを移動）

ですが、タブをSplitter間で移動する方法が用意されていません。タブを移動というのは、たとえば左右に分割していたときに、左側Splitterで開いているファイルを右側に移すというようなものです。

僕はこれを頻繁に行います。複数ファイル見比べながらやりたいですし。

で、調べてみるとどうやら3rd-partyのプラグインとしては存在しているらしいことがわかりましたので、導入してみました。

まずは設定メニューからプラグインへ行き、「Browse Repositories」を選びます。

そしてここで「Next Splitter」などと検索をすると、「Tab to Next Splitter」なるプラグインが現れます。これをインストールしてRubyMineを再起動しましょう。途中3rd-partyのプラグインを入れていいかい？みたいな確認が入るのでそれを許可してあげましょう。

これにより、「Tab to Next Splitter」というコマンド（？）が現れるので好みのショートカットを設定して完成です。

これができなくてしばらく我慢してましたが、調べてみるもんですね。

Xcode 10へアップデート後にビルドできなくなったReact Nativeアプリへの対応

Sat, 06 Oct 2018 06:34:16 +0900

Xcodeが10にアップデートされたあと、React Nativeの既存プロジェクトのビルドが通らなくなりました。

たとえば↓のようなエラーがでました。

Build input file cannot be found: 'xxxx/node_modules/react-native/Libraries/WebSocket/libfishhook.a'

そのときは、こちらのissueにあるようにリンクするファイルの再登録で直りました。

Xcode 10 libfishhook.a cannot be found · Issue #19569 · facebook/react-native

Environment OS: macOS 10.14 Node: 10.0.0 Yarn: Not Found npm: 5.6.0 Watchman: 4.9.0 Xcode: Xcode 10.0 beta (10L176w) Android Studio: 3.1 AI-173.4720617 Packages: (wanted => installed) react: 16.3.1...

How to make it works with webpacker? · Issue #237 · railsware/js-routes

(issun内の投稿より)

他にも似たようなリンクエラーに1、2個遭遇したのですが、どれもリンクするライブラリの再登録で直りました。

Xcode後にReact Nativeのプロジェクトがビルドできない場合は、リンクファイルの再登録をしてみると良いかもしれません。

Railsのjs-routesをWebpackerでも使うには

Fri, 05 Oct 2018 06:28:27 +0900

Railsのjs-routesgemはクライアントサイドでURLヘルパーを使えるようにできるgemで、大変便利です。

Gemfileにgem "js-routes"を書いてインストールしたうえで、asset pipelineのapplication.jsあたりでrequire js-routesとしておきます。すると、Rails側で使えるuser_path(@user.id)みたいなヘルパーメソッドがJSでも使えるようになって、↓なふうに使えます。

1Routes.user_path(1)

ハードコーディングしなくてよくなるのでなかなか便利です。

ところでこの導入手順ではJSがSprocketsに乗っています。つまりWebpackerのみを使っているプロジェクトではこの方法での導入ができません。

Webpackerで使うには

js-routesgemにはRubyのクラスJsRoutesというのがいます。これがgenerateメソッドとgenerate!メソッドを持っています。

まずはわかりやすい方のgenerate!から。こちらはuser_pathなどの定義を書いたJavaScriptのコードをファイルに書き出すというものです。

generateは、というとJavaScriptのコードを文字列として返すメソッドです。Webpackerではこちらを使うと良いです。

というのはStack Overflowからの受け売りなのですが、実際に試してみました。

Rails 5.2 introduce Webpacker gem which can help you to avoid using Sprockets. Is there any way to make JS-Routes usable with Webpacker?

gemが持ってるJSをwebpackerで読み込むには - PIYO Notes

まずはjs-routesgemを普通にインストールします。

続いてerb-loaderを有効にしておきます。erbを使う方法についてはこちら↓の記事でも書いています。

手持ちのレガシー目なRails案件をいい加減Webpackerに直す活動を始めていまして、まずは仕事以外のプロジェクトからやってます。 JS用のgemだったりrails-assetsあたりはyarn化の時点でだいたい撲滅できていいですね。

https://www.yodobashi.com/product/100000001001083930/

Routes用のファイルを用意

Webpackerのエントリポイントのファイルがapp/javascripts/packs/application.jsだったとして、1つ上の階層にjs-routes.js.erbつまり（app/javascripts/js-routes.js.erb)というファイルを作ります。

中身はerbでgenerateの結果がそのままJSになるように書いておきます。

1<%= JsRoutes.generate %>

Ruby側のJsRoutesがJavaScriptコードを書き出してくれるので、それをそのままこのjs-routes.js.erbの内容としておくわけです。

Webpackerでimport

あとはメインのファイル（app/javascripts/packs/application.js）にて、このファイルをインポートします。

1import Routes from '../js-routes.js.erb'
2// 必要に応じてグローバルに
3window.Routes = Routes

Webpackerでも使えるようになりました。

RubyMineのJavaScriptをECMAScript6に変更

Thu, 04 Oct 2018 06:28:09 +0900

Railsの個人プロジェクトにWebpackerとVueを入れてVueに移行していくぞーと思っています。EmacsっだとVueがつらそうなので眠っていたRubyMineを使ってみようと起動したのですが、JSのimport構文に警告がでていました。

import declarations are not supported by current javascript version

RubyMineが実行するわけではないので直接は問題ないのですが、いちいちこれが出るのも鬱陶しいのできちんと対応します。

ソースコードから変更するには、警告箇所の電球マークを押すと出てくる提案メニューから「Change JavaScript language version to ECMAScript 6」を選択します。

しばらくすると構文解析が終わって波線が消えると思います。

設定メニューから変える場合は「Languages & Frameworks」の「JavaScript」から「JavaScript language version」を「ECMAScript 6」を選択して保存すればOK。

VESAの変換アダプターでVESA200の壁掛け金具にVESA300のテレビを設置

Tue, 02 Oct 2018 06:52:36 +0900

半年ほど前の話ですが、テレビを買い換えました。そのとき使っていた壁掛け金具を新しいテレビでも使えるように色々とがんばったのでそれを記録しておこうと思います。

もともとのテレビは2010年頃に買ったTOSHIBAの37インチのテレビで壁掛けの金具にはこれを使っていました。

首を左右に振れるのが気に入って使っていました。キッチン側からなんとなくサッカーやテニスを眺めるのに便利でした。

耐荷重は20kgということで、当時のテレビが17kgぐらいで問題なく使えていました。というのが2年ほど前。

テレビが古くなったので買い換えるとなったのが半年前なわけですが、買い替えにはLGの55インチのちょっと大きめのテレビにしました。重さは約16kgで壁掛け金具の耐荷重的にもOKでした。

ところがこの新しいテレビ、壁掛け金具を取り付けるためのネジ穴の位置が旧テレビと異なりました。

調べてみると、昔のテレビはVESA200x200という20cm幅、新しいテレビはVESA300x300という30cm幅。大きくなったので当然かもしれませんが、従来の金具が使えないとなると困ります。

当初、サイズ変換のアダプターなんて山程あるだろと高をくくっていたのですが、これがまあ見つかりません。見つかっても100x100と200x200を変換とかね。

そんななかやっと見つけたのが、これ。値段も約3000円とお手頃。金具より高くなっては意味がありませんので。

https://www.yodobashi.com/product/100000001001083930/

それで心配なのはこのアダプターがちゃんと取り付けられるかということなんですが、実際に実施した人が見つからず、商品ページのこの言葉（↓）を信じて購入しました。

VESA300×300、VASA400x300対応
MFシリーズなどのVESA200×200互換の取付プレートを持つ金具をVESA300×300、 又はVASA400x300の取付け穴のテレビに対応させるアダプターです。

これ、取り付けた写真をみれば一目瞭然なんですが、元の金具とアダプターを繋げるためのネジが一緒に入っていました。

そのかわり、元々金具とテレビを直接止めていた銀色のネジはアダプターとテレビを固定するために使われます。

ですがこのアダプターすんなり装着できたわけではありません。↓の写真、わかるでしょうか？

アダプターの左下の箇所です。この位置に電源コードを挿すための端子が出ています。実はこのラインに沿って下側だけ切断しています。こうしないと電源コードに干渉してしまい取り付けられないのでした。。これはさすがに買ってからでないと気が付きませんでした。

このアダプターは厚さ3mmぐらいはある金属の板のなので自宅にあるものでは刃がたちませんで、ホームセンターに持っていって道具を借りて切断しました。グラインダーとかいう金属も切れるような道具で切るのですが、もう火花がすごくて腰が引けてしょうがありませんでした。

結局あまりに僕がビビるので店員のおじさんが「特別ですよ」と言って切ってくれました。すみません。助かりました。

こうして無事テレビをテレビ金具に取り付けることができました。

macOSの上書き再インストールでカーネルパニックから脱却

Mon, 01 Oct 2018 06:39:06 +0900

ここ一ヶ月ほど夜間などの長時間のスリープ中にMacBookがカーネルパニックによって強制終了、朝には再起動された状態になっているという現象が頻発していました。

再起動されちゃうと途中だった仕事用の環境をいちいち整えないといけないのでとても効率が悪くて困っていました。

カーネルパニックに関するログは/Library/Logs/DiagnosticReportsにある末尾が.panicで終わるファイルなのですが、読んでみても根本的なことはわかりません。

Appleのサポートに相談しようとWebで手続きを進めるも、「お客様の製品は無償テクニカルサポートの対象ではないようです」と表示されてしまい相談できず。

そこでまずはググってみつけた記事で解決するかもしれないと紹介されていた方法をいくつか試しました。

NVRAMリセット
SMCコントローラリセット
ディスクのFirstAid

やはり改善しないので次にログを元に会社の同僚に相談したところ、UPSB(MacBookPro13,3): thunderbolt power on failed とあるから周辺機器が悪いんじゃない？とか昔外部ディスプレイをつないでいたら同じことが起こったという話を入手しました。

確かに、普段から外部ディスプレイを2枚接続して、MacBookは閉じた状態（クラムシェルモード）で使用しています。

最近この使い方に変えたわけではないので直接の原因ではなさそうだとは思いつつ、Mac側の何かと相性が悪くなってしまったというのは考えられます。ディスプレイを外した状態にして一晩スリープ状態でおいてみました。そして、問題なくスリープから復帰できました。

ディスプレイの影響かもとわかったとしても、ディスプレイを毎晩外してスリープさせるという運用は実用的ではありません。

サポートへ

さすがに困ったのでお金がかかってもいいからAppleの有償サポートに電話をしてみました。

症状を話すと提案として返ってきたのが以下の2点でした。

macOSを上書きインストールして様子見
だめならOSを初期化

ソフトなのかハードなのか問題を切り分けられるように対処していきましょうとのことでした。

1つ目を実施して直ればOSがなんらかの理由で壊れていたということ、2つ目を実施して直った場合は使っているソフトウェアのせい、それでもだめならハードのせいという具合。

1つめのmacOSの上書きインストールは既存のデータやソフトウェアなどは消えずそのまま使えるということです（※）。

※厳密にはSIPを無効化してインストールするようなソフトはまた使えない状態になります。

macOSの再インストール方法はリカバリーモード（復元モード？）で起動しなおしてから、macOSを再インストールするという方法です。

「macOSを再インストール」から進んでいって、適切なインストール場所を選びます。通常はMacintosh HDのはずです。ダウンロードやインストールに1時間程度かかります。

インストールが終わって起動してみると確かにこれまでと同じように使えることがわかりました。仕事ができなくなる状態にはなってなくて一安心です。

一晩スリープさせて問題が起こるかどうか様子みるため、ディスプレイに繋いだ状態でスリープさせました。そして今朝様子をみてみたらちゃんとスリープから復帰してくれました。

ありがとうAppleサポート。そういえば有償サポートだったけど料金はどうやって請求されるんだろうか。。。そんな話はひとつもなかったぞ。

LeetCodeでプログラミングの練習問題にチャレンジ

Sat, 29 Sep 2018 06:43:43 +0900

最近LeetCodeというサービスを発見したのでときたま遊んでいます。

leetcode.com →https://leetcode.com/

最近はフレームワークやSDKの作法にならってアプリケーションを書くことが多いので素のプログラミングというかアルゴリズムを意識して書くことが少なく、衰えた筋肉を鍛えているような感じがして気持ちがいいです。

無料でも一部使えるのでとりあえず登録して問題一覧を見てみますと、

Problems - LeetCode

こんなふうに出ています。

一旦MediumやHardを飛ばしつつやっていますが、Easyでもなまった体には簡単じゃないという。。。

僕が見た限りだとそれぞれの問題は、ある入力を受け取って正しい結果を返す関数を書くという形式になっています。

例えば第一問目は、

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

という問題で、↓のような例まで紹介されています。

Given nums = [2, 7, 11, 15], target = 9,
Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

そういえば、英語です。が、この程度なら問題なく読みたいところ。

LeetCodeにはエディタと判定機能がついているので、LeetCode上でコードを書いて試しに動かしたり、正式に回答として登録したりできます。

試しに動かすときに使われるテストケースと正式な回答として判定するときのテストケースはやはり回答時のほうが厳しくて、項目数が多かったりエッジケースだったりとより難しい入力値が与えられます。

僕も第一問を素直に実装して解けたと思ったらタイムアウトで不正解になってしまいました。

衰えたプログラミング筋の筋トレだと思ってちょっとずつやっていこうかなと思います。

Nokogiri was built against LibXML version 2.9.4, but has dynamically loaded 2.9.7

Fri, 28 Sep 2018 06:54:12 +0900

brew upgradeしたあとあたりから、Rails起動時にタイトルの警告が出はじめて気持ち悪いので対応します。

Nokogiriビルド時とはlibxmlのバージョンが食い違っているよ、と出ているのでbrew upgrade時に勝手にlibxmlのバージョンがあがったのでしょう。

対応方法とはしては（おそらく）2通りあって、

libxmlのバージョンを下げる
Nokogiriを入れ直す

のどちらかだと思われます。

せっかくバージョンがあがったlibxmlを下げるのはもったいないのでNokogiri入れ直しで対応します。

今回のケースではNokogiriに新しいバージョンがあることがわかったので、単にbundle updateで対応しました。

% bundle update nokogiri
...
Using nokogiri 1.8.4 (was 1.8.3)
...

これで警告がなくなりましたー。

Chrome拡張「Proxy SwitchyOmega」でサイトごとにプロキシサーバーを切り替える

Wed, 26 Sep 2018 06:11:41 +0900

テスト環境などで特定のIPからのリクエストしか受け付けないようにしている場合に、ブラウザからの接続をプロキシサーバー経由にすることがあると思います。

システム設定でプロキシを切り替えることができますが、すべてのリクエストをプロキシサーバー経由にするのは抵抗があります。そこで特定のサイトでだけ特定のプロキシサーバーを使うようにできるChromeエクステンションを使います。

Proxy SwitchyOmega - Chrome ウェブストア

Manage and switch between multiple proxies quickly & easily.

chrome.google.com

使い方

プロキシサーバー設定と切り替えルール設定を行えばOKです。

まずはプロキシサーバーの設定から。プロキシサーバーのURLとport、そして鍵マークのアイコンから認証情報を入力しておきます。

続いて切り替えルールを設定します。

特定のURLのときだけ特定のProfile（先程作ったプロキシサーバーの設定）を使うというふうに割リ当てます。

最後にブラウザの拡張機能の欄から「Auto Switch」が選択されていることが確認できけばOK。表示するサイトごとに勝手に切り替えてくれるようになります。

chrome拡張のAutofillで市のゴミ受付フォームの入力を省く

Tue, 25 Sep 2018 06:14:02 +0900

いや、別に市のフォームに限らないんですがｗ

浜松市の連絡ゴミフォームに毎度毎度住所とか名前を入れるのが面倒なのでいよいよフォーム自動入力系の拡張機能であるAutofillを導入しました。

こういうのを毎回入れるの、面倒なんですよね。1年に1回使うかどうかだから余計に使うときに面倒くさいという。

そういうわけで、Autofillを入れます。

Lightning Autofill - Chrome ウェブストア

chrome.google.com

これを入れると稲妻みたいなアイコンが拡張機能のところに入ります。

目的のフォームがある画面で稲妻アイコンを押すと↓のような案内が現れます。

この状態でフォームを入力したあと、プロファイルを分けたい場合は選んで、「Generate Autofill Rules」を押すと情報が登録されます。

これでフォームと内容が紐づくので、同じページに再度訪れたときには自動入力が完了しているはずです。

確認したければ、autofillのオプション画面で確認可能です。

注意点としてはhiddenフォームすら自動入力してしまうらしい（ソース見つからず）ということがあるみたいで、その仕組みを使って情報を盗もうとするケースがありえるらしいので、重要な情報はautofill対象外にしておくのが良いと思います。パスワードとかカード番号とか。

モバイルアプリ用の全アイコンサイズを1枚の画像から書き出せるサイト

Mon, 24 Sep 2018 06:36:16 +0900

モバイルアプリのアイコンを全部用意するの面倒ですよね。毎度必要なサイズが変わるし。

僕は大きめの正方形画像を用意して、それを元に一括で縮小して生成してくれるサイトを使っています。ちゃんと調べていないので他にもあるのかもしれないですけど、僕はここを使ってます。

Developer Tool - App Icon Resizer

MakeAppIcon is an app icon resizer that helps developers and project managers generate the app icons required by App Store & Google Play Store.

makeappicon.com

1536x1536の画像を渡すと、メールで処理結果を送ってくれます。

結果画像には↓が入ってます。長いです。

% tree
.
├── android
│   ├── mipmap-hdpi
│   │   └── ic_launcher.png
│   ├── mipmap-ldpi
│   │   └── ic_launcher.png
│   ├── mipmap-mdpi
│   │   └── ic_launcher.png
│   ├── mipmap-xhdpi
│   │   └── ic_launcher.png
│   ├── mipmap-xxhdpi
│   │   └── ic_launcher.png
│   ├── mipmap-xxxhdpi
│   │   └── ic_launcher.png
│   └── playstore-icon.png
├── imessenger
│   ├── icon-messages-app-27x20@1x.png
│   ├── icon-messages-app-27x20@2x.png
│   ├── icon-messages-app-27x20@3x.png
│   ├── icon-messages-app-iPadAir-67x50@2x.png
│   ├── icon-messages-app-iPadAir-74x55@2x.png
│   ├── icon-messages-app-iPhone-60x45@1x.png
│   ├── icon-messages-app-iPhone-60x45@2x.png
│   ├── icon-messages-app-iPhone-60x45@3x.png
│   ├── icon-messages-app-store-1024x768.png
│   ├── icon-messages-transcript-32x24@1x.png
│   ├── icon-messages-transcript-32x24@2x.png
│   └── icon-messages-transcript-32x24@3x.png
└── ios
├── AppIcon.appiconset
│   ├── Contents.json
│   ├── Icon-App-20x20@1x.png
│   ├── Icon-App-20x20@2x.png
│   ├── Icon-App-20x20@3x.png
│   ├── Icon-App-29x29@1x.png
│   ├── Icon-App-29x29@2x.png
│   ├── Icon-App-29x29@3x.png
│   ├── Icon-App-40x40@1x.png
│   ├── Icon-App-40x40@2x.png
│   ├── Icon-App-40x40@3x.png
│   ├── Icon-App-57x57@1x.png
│   ├── Icon-App-57x57@2x.png
│   ├── Icon-App-60x60@1x.png
│   ├── Icon-App-60x60@2x.png
│   ├── Icon-App-60x60@3x.png
│   ├── Icon-App-72x72@1x.png
│   ├── Icon-App-72x72@2x.png
│   ├── Icon-App-76x76@1x.png
│   ├── Icon-App-76x76@2x.png
│   ├── Icon-App-76x76@3x.png
│   ├── Icon-App-83.5x83.5@2x.png
│   ├── Icon-Small-50x50@1x.png
│   ├── Icon-Small-50x50@2x.png
│   └── ItunesArtwork@2x.png
├── README.md
├── iTunesArtwork@1x.png
├── iTunesArtwork@2x.png
└── iTunesArtwork@3x.png

たとえばiOSの場合はこの中にあるAppIcon.appiconsetをXcodeにドラッグ&ドロップするとAppIcon-1というアセットとして登録できます。

元あったAppIconを削除してAppIcon-1をAppIconとしてリネームすれば（もしくはプロジェクト設定でAppIconsSourceの参照を変更すれば）、アプリのアイコンとして設定完了となります。

警告マークがでてますが、割り当てられていない画像が含まれているというだけなので、それらを削除すれば警告はなくなります。

一括生成してくれる上に設定も一括で終わるので大変重宝しています。

Vue コンポーネントのデータを初期値にリセットしたいとき

Sat, 22 Sep 2018 06:53:56 +0900

どうやって書くのがいいのかなーと迷いました。

例として適切ではないですが、例えば↓のようなコンポーネントがあったとして、なにかのタイミングですべてのデータをリセットしたいとします。

 1export default {
 2 name: "App",
 3 data() {
 4 return {
 5 title: 'Hello World',
 6 message: 'your todo app',
 7 todos: []
 8 }
 9 },
10}

何も考えずに書くと、

1this.title = 'Hello World'
2this.message = 'your todo app'
3this.todos = []

みたいになりますが、項目が増えたときに破綻するのは目に見えています。

そこでこちらの$dataを使います。

jp.vuejs.org →https://jp.vuejs.org/v2/api/#vm-data

この$dataにデータオブジェクトが入っているので、まとめて値をセットするときには$dataへのアサインで代用できます。

 1// 外に関数を1つつくっておく
 2function initialState() {
 3 return {
 4 title: 'Hello World',
 5 message: 'your todo app',
 6 todos: []
 7 }
 8}
 9
10export default {
11 name: "App",
12 data() {
13 // 初期値として関数呼び出しの結果を返す
14 return initialState()
15 },
16 methods: {
17 reset: function() {
18 // リセット時は`$data`にアサイン
19 Object.assign(this.$data, initialState());
20 },
21 }
22}

これで一応動いてくれました。

もっといい方法があるとか、これだとだめな理由があるとかの場合はお知らせしてもらえると嬉しいです。

追記

↑の方法では、途中で新しいプロパティをthis.data追加した場合にそのプロパティが残ったままになってしまいます。

1this.data.memo = 'hogehoge'

その場合、一度すべてのプロパティを一度削除してから上記のassignのコードを実行するのが無難です。

1export default {
2 methods: {
3 reset: function() {
4 Object.keys(this.$data).forEach(key => delete this.$data[key])
5 Object.assign(this.$data, initialState());
6 },
7 }
8}

Electronアプリでvue-devtoolを使えるようにする

Fri, 21 Sep 2018 06:28:29 +0900

ElectronアプリでVueを使うようにしたらコンソールにこんなのが出ていました。

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

vue-devtoolを入れると便利だよ、ということらしいので調べてみました。

Vueを使ったWebサイトの場合はブラウザ側にvue-devtoolを入れることでDeveloperToolを拡張できるんですが、Electronでは勝手が異なります。

devtoolに関するドキュメントがあったので読んでみました。

DevTools Extension | Electron

Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.

electronjs.org

ここで紹介されているやり方を整理すると

chromeに対象のdevtoolを入れて
その拡張のextension IDを調べて
ファイルシステム上で場所を特定して
Electronのready後にBrowserWindow.addDevToolsExtensionする

ということでした。

めんどくさいなーと思ってよくよく読んでいたらelectron-devtools-installerというのを使ってもいいよという記述がありましたので、こちらを試してみました。

GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron

An easy way to ensure Chrome DevTools extensions into Electron - MarshallOfSound/electron-devtools-installer

Create application menus and context menus.

まず対象のElectronのプロジェクトでこのパッケージを導入します。

npm i -S electron-devtools-installer

つぎにmainプロセスにて以下のコードを追記します。

 1const { default: installExtension, VUEJS_DEVTOOLS } = require("electron-devtools-installer");
 2
 3function createWindow() {
 4 // いろいろ略
 5
 6 // ready後のコールバック内で呼ぶ
 7 installExtension(VUEJS_DEVTOOLS)
 8 .then(name => console.log(name))
 9 .catch(err => console.log(err));
10}
11
12app.on("ready", createWindow)

これでアプリを起動し直すとDeveloperToolにVueタブが出てきてくれます。

よかった。入りました。

他のDevtool系も同様の方法で入れられるようなので覚えとくと便利そうです。

ElectronのDeveloper Toolでコピーやペーストを有効にする

Thu, 20 Sep 2018 06:34:45 +0900

ElectronってDeveloper Toolでのコピペがそのままじゃできないんですね。

メニューにコピーペーストなど、必要な「編集」機能は実施しておかないといけないみたいです。

よくある「編集メニュー」にある機能というと、

コピー
ペースト
カット
アンドゥ
リドゥ

あたりでしょうか。Developer Toolの用途だけでもあったほうがよさそうなのでこれを実装してみます。

普通に実装してみる

メニューのテンプレートに編集メニューとサブメニューを実装します。

labelとかacceleratorを指定するやり方ですね。

 1const template = [
 2 {
 3 label: "Electron",
 4 submenu: [
 5 ]
 6 },
 7 {
 8 label: "編集",
 9 submenu: [
10 { label: "コピー", accelerator: "CmdOrCtrl+C", selector: "copy:" },
11 { label: "ペースト", accelerator: "CmdOrCtrl+V", selector: "paste:" },
12 ]
13 }
14];
15const menu = Menu.buildFromTemplate(template);
16Menu.setApplicationMenu(menu);

もっと楽に書く

ドキュメントを見たらroleというのを使えることがわかりました。

Menu | Electron

electronjs.org

例えば

 1const template = [
 2 {
 3 label: 'Edit',
 4 submenu: [
 5 {role: 'undo'},
 6 {role: 'redo'},
 7 {type: 'separator'},
 8 {role: 'cut'},
 9 {role: 'copy'},
10 {role: 'paste'},
11 {role: 'pasteandmatchstyle'},
12 {role: 'delete'},
13 {role: 'selectall'}
14 ]
15 }
16]
17const menu = Menu.buildFromTemplate(template);
18Menu.setApplicationMenu(menu);

とすると、こんなメニューになります。

Developer Toolでエラーメッセージを一部コピーするとか、コードを貼り付けて確認するとかは絶対すると思うので、開発効率のためにも編集メニューは必要そうですね〜

ElectronアプリをVue化する

Wed, 19 Sep 2018 06:59:27 +0900

jQueryでベタっと書いていたElectronアプリがあるのですが、Electronに多少慣れたこともあってアプリ側のコードをきれいにしたくなりました。Vue.jsを使いたい（正確に言うとVueはまだ触ったことがないので使ってみたい）ので、その下準備としてひとまずVueコンポーネント1個だけの形に持っていきましたので、その過程を残しておこうと思います。

依存ライブラリや設定を追加

まずは関連するパッケージを追加しました。

# vue 本体
$ npm install -S vue
# vue 関連
$ npm install -D vue-loader vue-style-loader vue-template-loader vue-template-compiler
# ついでにcss 関連
$ npm install -D css-loader sass-loader

vue用のloaderを書いたり、警告が出ないように一部追記があります。警告の件は後述します。

 1diff --git a/webpack.config.js b/webpack.config.js
 2index 9d3856c..0976ca8 100644
 3--- a/webpack.config.js
 4+++ b/webpack.config.js
 5@@ -18,12 +18,15 @@ module.exports = {
 6 },
 7 resolve: {
 8+ alias: {
 9+ 'vue$': 'vue/dist/vue.esm.js'
10+ },
11 modules: [
12 path.resolve(__dirname, "src"),
13 "node_modules",
14 ],
15 },
16
17 module: {
18@@ -49,7 +52,12 @@ module.exports = {
19 {
20 test: /\.node$/,
21 use: 'node-loader'
22+ },
23+ {
24+ test: /\.vue$/,
25+ use: 'vue-loader'
26 }
27 ]
28 },
29 };

Vueコンポーネント化

HTMLとレンダラー用のJSをVueコンポートネントにまとめました。

HTML

まず、元々index.htmlに書いてあった内容をVueコンポーネントのtemplateに移動します。

Before の一部

1<body>
2 <div class="container">
3 <色々>
4 </div>
5</body>

After

index.htmlの一部

1<body>
2 <div id="app"></div>
3</body>

App.vue

<template>
<div id="app">
<div class="container">
</div>
</div>
</template>

JS

Before

index.js

1$(document).ready(function() {
2 $("#button").click(() => {
3 // 色々やる
4 });
5});

After

index.js

1import Vue from "vue";
2import App from "./App.vue";
3
4new Vue({
5 el: "#app",
6 components: { App },
7 template: "<app></app>"
8});

App.vue

 1<script>
 2import "色々"
 3export default {
 4 name: "App",
 5 data() {
 6 return {
 7 ...
 8 };
 9 },
10 methods: {
11 button: function() {
12 }
13 }
14}
15<script>

コンパイラ警告の件

webpack.config.jsの↓のオプションについて。

1 resolve: {
2 // これ
3 alias: {
4 'vue$': 'vue/dist/vue.esm.js'
5 },
6 },

今回はコンパイラが必要な形式↓でコードを書いています。

new Vue({
el: "#app",
components: { App },
template: "<app></app>"
});

すると、このような警告が表示されます。実行時のコンパイラが含まれないよという意味合いの警告ですね。

1You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

今プロジェクトではwebpackでvue-loaderを使用して事前にコンパイルしていますので本来はコンパイラは不要です。

ランタイム-コンパイラとランタイム限定の違い — Vue.js

vue-loader や vueify を利用する場合、 *.vue ファイルに中のテンプレートはビルド時に JavaScript に事前コンパイルされます。最終成果物の中にコンパイラは本当に必要なく、したがってランタイム限定ビルドを利用することが出来ます。

そこで先ほどの設定を追加することでこの警告を回避できるというわけです。

RubyでGmail風プロフィール画像を生成するinitial_avatarでユーザーを識別しやすくする

Tue, 18 Sep 2018 06:19:08 +0900

ユーザーにアバター画像（プロフィール画像）を登録してもらうサービスの場合、画像未登録のユーザー用にデフォルトの画像を用意することがあると思います。

グレー背景のシルエットとか、Googleのイニシャル（漢字なら最初の一文字）、Twitterのたまごとか、Slackの模様とか、いろいろなパターンがありますね。

そんななか、Googleのイニシャルの画像と同じような画像を一行で使えるようにするgemを同僚が作ったということで、ここで代わりに紹介したいと思います。

GitHub - aki77/initial_avatar: Create Gmail like text avatars for profile pictures using SVG.

Create Gmail like text avatars for profile pictures using SVG. - aki77/initial_avatar

Syntactically Awesome Style Sheets

Rubyのgemなのでgem install initial_avatarまたはGemfileへのgem 'initial_avatar'の追記で導入できます。

実際の用途としてはRailsなどのWebフレームワークで使用することが多いと思いますが、シンプルに紹介するためにRubyのコンソールのみで動かしてみました。

基本となるのは、以下のInitialAvatar.avatar_data_uriです。これによりSVGの情報がBase64エンコードされたData URIとして返ってきます。

1require 'base64'
2require 'initial_avatar'
3
4InitialAvatar.avatar_data_uri('あ', size: 100, font_size: 70)
5=> "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHBvaW50ZXItZXZlbnRzPSJub25lIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICMyZWNjNzE7IHdpZHRoOiAxMDBweDsgaGVpZ2h0OiAxMDBweDsiPgo8dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB5PSI1MCUiIHg9IjUwJSIgZHk9IjAuMzVlbSIgcG9pbnRlci1ldmVudHM9ImF1dG8iIGZpbGw9IiNmZmZmZmYiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2FOZXVlLUxpZ2h0LEhlbHZldGljYSBOZXVlIExpZ2h0LEhlbHZldGljYSBOZXVlLEhlbHZldGljYSwgQXJpYWwsTHVjaWRhIEdyYW5kZSwgc2Fucy1zZXJpZiIgc3R5bGU9ImZvbnQtd2VpZ2h0OiA0MDA7IGZvbnQtc2l6ZTogNzBweDsiPuOBgjwvdGV4dD4KPC9zdmc+Cg=="

このData URIを<img>タグのsrcに渡すとこんな風になります。

ちゃんと出ていますね。

色々試してみる

オプションなしだとデフォルト値に

1InitialAvatar.avatar_data_uri('あ')

2文字以上

ちなみに、3文字以上にするとさすがにはみ出ます。

1InitialAvatar.avatar_data_uri('AB', size: 100, font_size: 60)

漢字 + サイズを大きく

1InitialAvatar.avatar_data_uri('水', size: 200, font_size: 150)

設定

色の候補とかサイズのデフォルト値などは予めしていしておくことが可能です。

 1# 何も指定しなければデフォルト値が使われる
 2
 3InitialAvatar.configure do |config|
 4 config.colors = %w[
 5 #1abc9c #16a085 #f1c40f #f39c12 #2ecc71 #27ae60 #e67e22 #d35400 #3498db
 6 #2980b9 #e74c3c #c0392b #9b59b6 #8e44ad #bdc3c7 #34495e #2c3e50 #95a5a6
 7 #7f8c8d #ec87bf #d870ad #f69785 #9ba37e #b49255 #b49255 #a94136
 8 ]
 9 config.text_color = '#ffffff'
10 config.size = 100
11 config.font_weight = 400
12 config.font_family = 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif'
13 config.seed = 0
14end

デフォルト画像として使う

例えばRailsでよく使われるCarrierWaveではアップロード済のファイルがない場合にデフォルト値として使うURLを指定する方法があります。

そのデフォルト用のURLでこのInitialAvatar.avatar_data_uriの結果を返せば、ユーザーごとの頭文字を使ったアバターを初期設定値にできます。

固定の画像だと多くの人が同じアバター画像になってしまうなどして見分けがつきにくくなってしまいますが、色付き頭文字になるだけでかなり見やすくなってオススメです。

scssじゃなくてsassのほうの文法を調べたいときに使っている方法

Mon, 17 Sep 2018 06:08:32 +0900

SassはCSSの拡張言語です。

Sassにはscss形式とsass形式があって（形式って言うのかどうかわからないけど呼んじゃう）、scss形式で紹介されていることのほうが多いように思います。ですが、個人的にはsass形式のほうが記述量が少なくて好きです。

Sassのガイドページにはscssとsassとでそれぞれサンプルコードが用意されているので対比することが可能です。

Sass: Sass Basics

sass-lang.com

ところが、実践的な情報は使っている人が多いscss形式で見つかることが多く、そんなときにsassでどうやって書いたらいいのかわからないという状況になりがちです。公式ドキュメントを読んでもベーシックな箇所以外はscssでのみサンプルが書かれています。

そこでよくやるのは、scssとsassを変換できるツールまたはサイトを使って、scssで見つけた情報をsassに変換してしまうというやり方です。

Webが手軽なので僕はこの辺を使っています↓↓

https://scss2sass.herokuapp.com/

たとえば公式ガイドのMixinのサンプルを↑のサイトに入力してconvertしてみると

1@mixin transform($property) {
2 -webkit-transform: $property;
3 -ms-transform: $property;
4 transform: $property;
5}
6
7.box { @include transform(rotate(30deg)); }

↓↓ きちんと変換され、公式ガイドのsassバージョンとほぼ同じに変換されます。

1=transform($property)
2 -webkit-transform: $property
3 -ms-transform: $property
4 transform: $property
5
6.box
7 +transform(rotate(30deg))

@mixinが=に変わるのとか大体忘れてしまうので、scssから導出できると大変便利です。

Railsにてファイルのインポート処理をActiveJob化する

Sun, 16 Sep 2018 06:19:42 +0900

元々はFormオブジェクトでインポートするだけだったんですが、ファイルサイズが大きすぎてHerokuのタイムアウトを食らうケースが現れたのでバックグラウンドに回しました。

その際、ファイルActiveJobに渡す方法を考えなければなりません。ファイルのオブジェクトの形では当然渡せないし、かと言ってローカルにファイルを置いてそのPathを渡す形にしたとしても、dynoが複数ある場合には参照できなくなってしまいます。

正攻法はどこか外部のストレージに一時的に配置すること、となります。今回対象だったアプリケーションではファイルのアップロード先としてS3を利用していましたので、ファイルインポート機能としてもS3を利用するのが良さそうです。

Formオブジェクト→モデルへ

もともとFormオブジェクトとしてControllerとViewだけで利用していたクラスをやめて、ActiveRecordにしてDBに保存させることにしました。

変更前のコード

概要程度に書くとこんな感じ。

 1# Formオブジェクト
 2class Importer
 3 include ActiveModel::Model
 4 attr_accessor :file
 5
 6 validates :file, presence: true
 7
 8 def import
 9 ActiveRecord::Base.transaction do
10 open(file.path, 'r:cp932:utf-8', undef: :replace) do |f|
11 # インポート処理
12 end
13 end
14 end
15end
16
17# Controller
18def create
19 @importer = Importer.new(file: params[:importer][:file])
20 if @importer.valid?
21 @importer.import
22 redirect_to root_path
23 else
24 render :new
25 end
26end

変更後のコード

 1class Importer < ApplicationRecord
 2 validates :file, presence: true
 3
 4 # carrier_waveでS3へ
 5 mount_uploader :file, ImportFileUploader
 6
 7 def import
 8 transaction do
 9 # 実はこれでは動かない（後述）
10 open(file.path, 'r:cp932:utf-8', undef: :replace) do |f|
11 # インポート処理
12 end
13 end
14 end
15end
16
17# Controller
18def create
19 @importer = Importer.new(file: params[:importer][:file])
20 if @importer.save
21 @importer.delay.import # delayed_jobで処理
22 redirect_to root_path, notice: '受け付けたよ'
23 else
24 render :new
25 end
26end

バックグラウンド処理としてはdelayed_jobを使っている想定です。Jobを作ってperform_laterでも良いですね。

インポート処理でハマる

さっきさらっと流したのですが、open(file.path, ...)のところを変えないと動きません。そもそもfileはS3上のものを指す想定なので、file.pathだけわかってもファイルを特定できません。そのためS3から読み出すようなコードに変える必要があります。

例えばopenは受け取る引数がローカルのパスなのかURLなのかで内部の挙動が異なります。URLの場合はopenに渡しているundef: :replaceのオプションを受け付けられないため、やはり実装を変えざるをえませんでした。

一方で、CarrierWaveのよくある実装だと、ローカルではファイルとしてアップロードさせ、本番環境ではS3を使うみたなパターンが頻出かと思います。

ローカルに置いてあるファイルとURL指定とではopenへの渡し方が異なるため、developmentかそうでないかでファイルの読み方を変える必要がでてきました。

（もちろん開発時からS3を使えるようにするのも手ですが、利便性のためできれば残しておきたかったのです）

また厄介なことにインポート用のファイルの文字コードがcp932であるため、何も考えずにopenしてreadしようとするとエンコーディング周りのエラーとなります。

頑張ってreadしようとして少々ハマり過ぎたため、URLにあるファイルを一時的にTempfileとして保存し、ローカルファイルとすることでローカルと本番との差異をできるだけ減らすという作戦にでました。

 1def file_path
 2 if Rails.env.production?
 3 @temp_file = Tempfile.new
 4 @temp_file.binmode
 5 open(file.url) do |file|
 6 @temp_file.write(file.read)
 7 end
 8 @temp_file.rewind
 9 @temp_file.path
10 else
11 file.path
12 end
13end
14
15def import
16 transaction do
17 # 実はこれでは動かない（後述）
18 open(file_path, 'r:cp932:utf-8', undef: :replace) do |f|
19 # インポート処理
20 end
21 end
22end

importの部分はファイルパスのみの変更とし、パスを得るところに分岐を入れました。open(url)は一定サイズを超えるとStringIOが戻ってくるのですが、この際Tempfileにしたほうがコードがシンプルになるかなと考えTempfileを利用しています。

こちらが大変参考になりました。

Ruby open-uri の open の戻り値 - Qiita

Ruby open-uri の open の戻り値 Ruby open-uri ライブラリの open メソッド open メソッドは引数に URL を取り、通常呼び出し or ブロック呼び出しのいずれかのスタイルを取ります。 require 'open-uri' f...

Electronでの画像処理にsharpを使いました - PIYO Notes

後処理

インポート処理の最後にTempfileの削除と自身の削除を実施します。インポート履歴を残したい場合は別ですが、一時的に使うのであれば削除しちゃっても問題ないかなと思っています。

1def import
2 transaction do
3 open(...)
4 end
5ensure
6 @tempfile.close if @tempfile
7 destroy
8end

おわり

重たいインポート処理をバックグラウンドにするときに一例として紹介しました。

今回Tempfileを用いていますが、きれいに処理できるならTempfileを使わないで、readしたものをそのまま使ったほうがよさそう。

WindowsでElectronでsharpを使うのにそこそこハマった

Sat, 15 Sep 2018 06:58:34 +0900

ElectronでSharpを使って画像を処理したという話を書きましたが、

Electronを触り始めました。フォルダ選択をして、フォルダ内の画像を一括処理するアプリケーションを作りました。一括処理の中には画像のリサイズやトリミングも含まれます。画像加工部分にはsharpというライブラリを使いました。ネイティブコードを使うため速いとのことです（そのせいかビルド時にハマリましたが、それはまた後日）。

Use with Webpack 2 · Issue #794 · lovell/sharp

これをWindowsに持っていこうとしてそこそこハマりました。記憶を辿りつつ書いてみようと思います。

Nativeモジュール

アプリケーション側でnpm installすると、sharpが依存するNativeのモジュールがインストールされると書いてあったような気がするんですが、そうはいきませんでした。

$ ./node_modules/sharp
$ npm install

として、手動でインストールする必要がありました。

webpack.config.js

Webpackでビルドするとファイルが見つからない、というようなエラーが出て動かせなかったのでWebpackにexternalsの設定を追加しました。

1externals: {
2 sharp: 'commonjs sharp'
3},

関連Issueはこれなんですが、ちょっとちょっと根拠がよくわかってないんだよなー。

Hey, I raised this issue on StackOverflow but have had no responses, so I thought I would go straight to the horse's mouth :) I am trying to create an app in Electron which uses React, Webpack 2, S...

GitHub - nodists/nodist: Natural node.js and npm version manager for windows.

Macでは気にする必要なかったのが謎です。進まなくなっちゃうのもやなので一旦は動いたから良しとしています。

他

あと何かあったかな。思い出したら追記します。

WindowsのNode.jsの管理にNodistを使う

Fri, 14 Sep 2018 06:45:50 +0900

調べたところWindowsではNodist一択のように見えたのでNodistを導入しました。

Natural node.js and npm version manager for windows. - nodists/nodist

Chocolatey - The package manager for Windows

[LOOKING FOR A MAINTAINER :) ]とあるので、今後のメンテナンスはちょっと怪しいかもですね。

READMEを見てみるとインストーラー経由、もしくはChocolateyを使うと書いてありまして、Chocolateyって何？と疑問に思うに至りました。

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

調べてみた感じWindowsのパッケージマネージャということで、homebrewみたいなもんだと思っておけばいいのかなと思いました。

Chocolaty導入

まずはChocolateyを導入しました。手順は↓。

Installation

いくつか方法があるようですが、僕は管理者として実行したPowerShellに以下を貼り付けて実行しました。

1Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

chocoコマンドをインストールできました。

$ choco
Chocolatey v0.10.11
Please run 'choco -?' or 'choco <command> -?' for help menu.

Nodist導入

$ choco install nodist
Chocolatey v0.10.11
Chocolatey detected you are not running from an elevated command shell
(cmd/powershell).
You may experience errors - many functions/packages
require admin rights. Only advanced users should run choco w/out an
elevated shell. When you open the command shell, you should ensure
that you do so with "Run as Administrator" selected. If you are
attempting to use Chocolatey in a non-administrator setting, you
must select a different location other than the default install
location. See
https://chocolatey.org/install#non-administrative-install for details.
Do you want to continue?([Y]es/[N]o):

(↑Hugoの処理のせいか想定外の{1}がなぜか入ってしまいます…)

これでYを押して進めても管理者権限がないのでインストールを完了できませんでした。なのでConEmuを起動するときに右クリックメニューから「管理者として実行」し、再度同じコマンドを実行したらインストールが完了しました。

Nodeのインストール

先程管理者として実行していたConEmuを閉じ、ユーザー権限でConEmuを開いておきます。

この状態でnodistを実行すると↓となります。あれ、すでに7系が入っていますね…。Nodistと一緒に入るのかもしれないです。

$ nodist
(x64)
> 7.2.1 (global: v7.2.1)

ではここに8系のバージョンを追加してみます。

$ nodist + 8

+というのがサブコマンドらしく、バージョンも一緒に指定するとインストールされます。

$ nodist + 8
8.11.4
$ nodist
(x64)
> 7.2.1 (global: v7.2.1)
8.11.4

8.11.4が入りました。

最後にglobalとして使うバージョンを切り替えます。

$ nodist global 8
8
Default global pacakge update dsuccessful.
$ nodist
(x64)
7.2.1
> 8.11.4 (global: 8)

ConEmuとGit bashでWindowsのターミナル環境を簡易に整える

Thu, 13 Sep 2018 06:19:31 +0900

普段はMacユーザーの僕ですが、Windows上でターミナルを使って作業する必要が出て、Windowsのセットアップをせまられました。

本当にメインで使うのであればしっかりセットアップしたいところですが、今回にように片手間で環境を用意するのにいい方法は無いものかと、片手間に調べてみたところ、ConEmuというのが良さげというのを見つけて導入してみました。

そもそもターミナルで何をやりたいかと言えば、今回絶対にやりたかったのはNodeの実行です。Git for Windowsを入れると一緒に入るGit Bashあたりで十分かなと最初思っていたんですが、やはりcmdベースではコピペ周りを筆頭にいろいろと使いにくいです。そこでConEmuを組み合わせるというのを↓で知りました。

おすすめのCUI環境～GitBashとConEmu～ - Qiita

ConEmu - Handy Windows Terminal

このQiitaそのまま見てもらえば良いかもという気もしつつ、導入までを整理しておきます。

まずはこちらかConEmuをダウンロードします。

ConEmu-Maximus5 is a full-featured local terminal for Windows devs, admins and users. Get better console window with tabs, splits, Quake style, copy+paste, DosBox and PuTTY integration, and much more.

conemu.github.io

僕はPortable版にしました。ConEmuを入れて起動すると最初に起動時のshellを選べ、とあります。最初はコマンドプロンプととかPowerShellぐらいしか選べません。

続いてこちらからGitを手に入れてインストールしてみます。

Git for Windows

We bring the awesome Git VCS to Windows

gitforwindows.org

途中いろいろなオプションを聞かれるので、お好みで設定しておきます。

再度ConEmuを起動すると、shellの選択肢の中にGit bashが現れますのでこちらを選択。

Git bashが起動して使えるようになりました。

これではまだNodeは使えませんが、それはまた今度セットアップしていきたいと思います。

Windowsでキーボードレイアウトを変更する

Wed, 12 Sep 2018 06:43:20 +0900

僕はMacではUSキーボードを使っています。

MacのParallelsに入れていたゲストWindowsで、キーボードがあるときから日本語レイアウトとして認識されるようになってしまい困っていました。

本気で調べたら対応方法がわかったので残しておきます。

Electronでの画像処理にsharpを使いました

Tue, 11 Sep 2018 06:59:55 +0900

Electronを触り始めました。

フォルダ選択をして、フォルダ内の画像を一括処理するアプリケーションを作りました。一括処理の中には画像のリサイズやトリミングも含まれます。

画像加工部分にはsharpというライブラリを使いました。ネイティブコードを使うため速いとのことです（そのせいかビルド時にハマリましたが、それはまた後日）。

GitHub - lovell/sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library. - lovell/sharp

Electronでフォルダ内のファイル一覧を取得して処理する - PIYO Notes

2018/09/10 時点でStar数9000越えですごいですね。

昨日の記事でファイルパスを取得できたところから進めてみようと思います。

Electronを触り始めました。ファイルを指定する Electronではブラウザよりも柔軟なファイル選択が可能です。フォルダ選択が可能なため、今回は対象のファイルを一括で指定するためにフォルダ選択を用いました。 Electronのレンダラープロセス側のJSで、ボタンを押したらフォルダ選択ダイアログを表示して処理するみたいな部分をまず書いてみます。

GitHub - sindresorhus/awesome-nodejs: :zap: Delightful Node.js packages and resources [BECAUSE OF TOO MUCH SPAM AND LOW-QUALITY SUBMISSIONS, SUBMISSIONS ARE PAUSED UNTIL SEPTEMBER]

超基本的な使い方としては、ファイルパスを指定して、必要な処理をはさんで、ファイルに書き出すという流れでしょうか。

1import sharp from 'sharp';
2
3sharp(filePath)
4 .resize(400, 300)
5 .xxxx() // ←いろいろな加工ができる
6 .yyyy()
7 .toFile(outputPath, (err, info) => {
8 });

自分で使いそうかな？ってをリストするだけでもこれぐらい↓あるし、

resize
crop
rotate
extract
flip
blur
extend
background
greyscale

他にもいろいろあります。

これらを組み合わせて使います。

例えば、300x300の画像の下100を切り取って300x200にしたいときは次のように書けます。

1sharp(filePath)
2 .resize(300, 200)
3 .crop("north")
4 .toFile(...)

300x300の画像に上下左右に100の余白（黒）を入れたいとき、

1sharp(filePath)
2 .background({ r: 0, g: 0, b: 0, alpha: 1 })
3 .extend({ left: 100, top: 100, right: 100, bottom: 100 })
4 .toFile(...)

のように組み合わせて使えるわけです。

例えばの用途ですが、画像を決まったサイズに収まるように加工するみたいな処理を一括でかけられそうで良さそうです。

同じような処理はコマンドラインで簡単にできそうですが、Electronなのでビルドして配布すればコマンドなど知らなくてもできるってのがやはりいいですね。

ちょっとした便利機能でも人によってはかなり便利にできそう。

他に検討した画像ライブラリ

ここからいくつか試そうと思いましたが、lwipは最近メンテされていないこと、人気がありそうなjimpはPure JSでパフォーマンスに難があるかも、ということで一番Starの多いsharpにしました。

:zap: Delightful Node.js packages and resources [BECAUSE OF TOO MUCH SPAM AND LOW-QUALITY SUBMISSIONS, SUBMISSIONS ARE PAUSED UNTIL SEPTEMBER] - sindresorhus/awesome-nodejs

electronjs.org →https://electronjs.org/docs/tutorial/first-app

Electronでフォルダ内のファイル一覧を取得して処理する

Mon, 10 Sep 2018 06:46:18 +0900

Electronを触り始めました。

ファイルを指定する

Electronではブラウザよりも柔軟なファイル選択が可能です。フォルダ選択が可能なため、今回は対象のファイルを一括で指定するためにフォルダ選択を用いました。

Electronのレンダラープロセス側のJSで、ボタンを押したらフォルダ選択ダイアログを表示して処理するみたいな部分をまず書いてみます。

 1// index.js
 2import { remote } from "electron";
 3const Dialog = remote.dialog;
 4
 5$(document).ready(function() {
 6 $("#folder-select").click(() => {
 7 Dialog.showOpenDialog(
 8 null,
 9 {
10 properties: ["openDirectory"],
11 title: "フォルダ選択",
12 defaultPath: "."
13 },
14 (folderNames) => {
15 const folder = folderNames[0];
16 console.log(folder);
17 }
18 );
19 });
20});

画面側をざくっとjQueryで作ったのでアレですが、このコードによって対応したボタンを押したらダイアログが開いてくれて、フォルダパスを取得可能です。

フォルダ内のファイルへアクセス

フォルダのパスがわかったなら中にあるファイルの一覧を取得します。

例えば画像ファイルに限定すると仮定して、MIME-Typeがimage/から始まるものだけを対象に処理をします。

 1import fs from 'fs;
 2import path from 'path';
 3import mime from 'mime-types'
 4
 5fs.readdir(folder, (err, dir) => {
 6 for (let file of dir) {
 7 const ext = path.extname(file);
 8 const type = mime.lookup(ext);
 9 if (type && /^image\//.test(type)) {
10 // do something
11 }
12 }
13});

パスでファイルにアクセスできるの、めっちゃ便利ですねー。ブラウザだとセキュリティ的な理由でこうはいかないし。

Electron完全に理解したわー（棒）となるまでに学んだこと

Sat, 08 Sep 2018 06:25:11 +0900

ここ3年ぐらいElectronでなんかデスクトップアプリ作りたい！と思って、でもなんとなくJSの環境周りが変わっていくので敬遠してました。

今回機会があって触り始めたら、難しく考えなくていいことがわかったんで、完全に理解したわーという気持ちになりました。

Electron完全に理解したわー（棒）
— Hiromasa Ohno（ぴー） (@pi_cha_n) September 5, 2018

まあ、実際にはメインプロセスとレンダラープロセスでどう処理を分けるべきなのかとか、データの永続化ってどうするの？とかいろいろ知らないことは当然あります。が、それはまあおいおい学んで行こうと思います。

Webページと何も変わらないよという理解

僕がそもそもJS環境を整えることにそんなに慣れていないので、一番最初はElectronだけを入れました。いずれwebpackerだとかbabelだとか、あとで使いたくなりそうなものがたくさんありますが、最初はそちらに手を出さないほうが良いと思います。というか、僕は一気にやろうとしてハマリました。

ミニマムで始めるにはこちらの公式ドキュメントが適切です。

最低2つのファイルがあればElectronのアプリを動かすことができます。

一つはメインプロセスを動かすためのJSのコードで、Windowを作ったりメニュー操作を定義したりとネイティブ側のためのコードだと思っとくとよさげです。

 1const {app, BrowserWindow} = require('electron')
 2
 3function createWindow () {
 4 // Create the browser window.
 5 win = new BrowserWindow({width: 800, height: 600})
 6
 7 // and load the index.html of the app.
 8 win.loadFile('index.html')
 9}
10
11app.on('ready', createWindow)

↑を見るとウィンドウを作ってHTMLを指定しているだけですね。

そしてもう一つはHTMLファイルで、これは作ったWindowの中にレンダリングするHTMLファイルです。ちなみに、最低限の話にするために↓のHTMLは公式ドキュメントから内容を削っています。

 1<!DOCTYPE html>
 2<html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Hello World!</title>
 6 </head>
 7 <body>
 8 <h1>Hello World!</h1>
 9 </body>
10</html>

これでウィンドウもできたし、内容も定義できることがわかりました。

UIをつくる

こっから先はUIを作っていくわけです。まずはメインプロセスのことは忘れて普通のWebサイトだとして、JSのコードをロードしてみます。

1<body>
2 <script src="./app.js"></script>
3</body>

1// app.js
2var val = 1 + 2;
3console.log(val);

コードとしてはなんの意味もないですが、これでアプリをリロードするとデベロッパーコンソールにちゃんとログが出るはずです。

あとは通常のWebサイトと全く同じ作り方をすることができますので、例えばWeb APIを利用したGUIクライアントアプリみたなものであれば、本当にWeb開発と全く変わらないですね。HTMLにcssやjsをロードして、ボタンを押したらほにょほにょみたいなことができるわけです。

bootstrapを入れたり、Reactを入れたり、なんら変わりがありません。なんとなく敬遠してたのよくなかったなーと思ったものの、今いろいろ試せるのでめちゃくちゃ楽しいです。

Railsで全文検索のSolrを使うのがやっぱり簡単だった

Thu, 06 Sep 2018 06:53:54 +0900

Herokuで動いているRailaアプリに全文検索を導入しようとしてElasticsearchを検討したけどローカルですら導入につまづいてしまい、昔ちょっと触ったことがあるSolrにしたら余裕で導入できました。という話です。慣れの問題かも？

（いやーElasticsearchむずかしかったと思うんだわ…）

ローカル

% brew install solr

でおk。

Herokuへの導入

heroku addons:create websolr:staging-20 -a yourappname

でおk。グレード？は必要に応じて。最安では20ドルです。

Railsへの導入

sunspot gemが大変便利です。

GitHub - sunspot/sunspot: Solr-powered search for Ruby objects

Solr-powered search for Ruby objects. Contribute to sunspot/sunspot development by creating an account on GitHub.

GitHub - pi-chan/must_be_ordered

gemの追加とbundle installして、

1gem 'sunspot_rails'
2gem 'sunspot_solr'

generateして、

% rails generate sunspot_rails:install

あ、ついでにローカルはSolrもスタートさせておきましょう。終わったら落としたいのでrake sunspot:solr:runでフォアグラウンドで動かしておきます。

bundle exec rake sunspot:solr:run

モデルの設定

検索対象にしたいモデルに設定用のコードを書きます。どのカラムをどんなデータタイプとして検索対象にするかを指定できます。子レコードの内容も親の検索内容とすることも簡単です。

Rubyのコードで書けるのでとても柔軟です。

1# ユーザーの全員検索とかないかもしれないけど
2class User < ActiveRecord::Base
3 searchable do
4 text :name, :email
5 end
6end

 1class Diary < ActiveRecord::Base
 2 belongs_to :user
 3
 4 searchable do
 5 text :content
 6 text :user_name do
 7 user.name
 8 end
 9 end
10end

みたいな感じですね。

検索方法

1Diary.search { fulltext 'こんにちは' }

searchにブロックを渡して検索します。重み付けなどありますが、シンプルにやるならfulltextに検索ワードを渡すだけでOKです。

Solrへの登録

インデックシングと呼ぶのかな？データの登録をしないと検索しても何も返ってきません。

初回の登録はモデルごとにreindexするか、sunspotのrakeタスクでまとめて登録しちゃいましょう。

1User.reindex
2Diary.reindex

みたいにrails consoleから実行したり、

% bundle exec rake sunspot:reindex

として、全体を対象にすればOKです。

また、日々データが登録・更新されるような場合にはそのタイミングでデータを再度インデックスする必要がありますので、after_saveなどのコールバックとdelayed_jobなどのジョブを活用して都度インデックスしてあげましょう。

1class User < ActiveRecord::Base
2 after_save :update_index
3
4 def update_index
5 Sunspot.index(self)
6 end
7end

すでにデータが存在する本番環境へのデプロイの場合には、デプロイ後にインデックス登録のrakeタスクを走らせたほうがいいでしょう。じゃないと何も検索にかかりません。ただし、データ量が多い場合は時間がそれなりにかかりますので利用者の少ない時間帯がよいかと。

データ量にもよりますが、再インデックスのrakeタスクは夜間バッチで勝手に動くようにしておいてもよいと思います。

Railsでorder忘れを防止するためのgemを作りました

Mon, 03 Sep 2018 06:53:05 +0900

order、つけ忘れがちですよね。環境が変わると思ってた順番に出なかったりします。

更に厄介なのは、つけ忘れてもなんとなく正しい順番で動いているときで、何かのタイミングで思った順ではなくなってしまうことがあります。というかありました。

多分僕の場合はDBのマイナーアップグレードの影響のように見えました。詳細は追っていないですが、確かに一部でOrder指定が漏れていたので順番が変わってしまったのです。

そういう事態に開発中に気がつけるようにするため、must_be_orderedというgemを作りました。勤めてる会社の社内ハッカソンが8/31にあったので、ちょうどいいネタとばかりにこれを作りました。

gemはこちらにございます。

Contribute to pi-chan/must_be_ordered development by creating an account on GitHub.

FREE Logo Maker - Create Your Own Logo in Minutes

現時点での使い方を紹介します（インターフェースはそのうち変わっている気がする）。

Rails、というかActiveRecordで使うのでGemfileにこのgemを追加します。

1# Gemfile
2gem 'must_be_ordered'

んで、bundle installします。

そしたら今度はconfig/initializers/以下に1個ファイルを作って↓のように書きます。

1# config/initializers/must_be_ordered.rb
2
3MustBeOrdered.enabled = !Rails.env.production?
4
5# ↓はお好みでON/OFF
6MustBeOrdered.raise = true
7MustBeOrdered.must_be_ordered_logger = true
8MustBeOrdered.rails_logger = true

あとは使いたいクラスの先頭でDSLっぽくmust_be_orderedを呼び出せばOK。

1class Item < ApplicationRecord
2 must_be_ordered
3end

全モデルを監視したいなら、ApplicationRecordにつけると良さそうです。

これでorderのない状態でRelationでクエリが実行されるとエラーなりログなりが出る状態になりました。

試しに既存プロジェクトで上記のような設定を有効にしてrails consoleで試してみました。

対象クラスはUserです。まずはOrder無し。こちらはエラーとなります。

1[10] pry(main)> User.where("id > ?", 10)
2MustBeOrdered order not applied User:
3bin/rails:4:in `require'
4bin/rails:4:in `<main>'

続いてOrder有り。エラーは飛びませんね。

1[11] pry(main)> User.where("id > ?", 10).order("id")
2 User Load (10.7ms) SELECT "users".* FROM "users" WHERE (id > 10) ORDER BY id
3[12] pry(main)>

エラーではアグレッシブすぎるというのであればログだけにして使うと良いです。

仕事のプロジェクトにも入れるぞー。

話題のHatchfulでロゴを作ったので配置してみました

Sun, 02 Sep 2018 06:07:50 +0900

最近話題になったShopifyのロゴ生成ツール「Hatchful」でロゴを作り、置いてみました。ヘッダーロゴ置いてみたかったんですよね。

Hatchful

Design high-resolution logos with Shopify’s free logo maker, the only logo generator your business needs. Customizable modern templates, no experience needed.

hatchful.shopify.com

紹介記事

無料でわずか数クリックでハイクオリティなロゴが作成できるツール「hatchful」

ロゴに使用するフォントやアイコンを自分好みにカスタムし、自分だけのオリジナルロゴが作り出せる無料ツールが「hatchful」です。わずか数クリックでオリジナルロゴが作成でき、デザイン初心者でも気軽にハイクオリティなものが作れるとのことなので、実際に使ってみました。

gigazine.net

結構遊べて楽しいです。

条件を保存しておけないのがちょっと残念。いろいろ試してやっぱりさっきのにしたいな、と思っても設定が多すぎてほぼ再現できないのが難点です。

置いて見た感想ですが、ちょっと線が細くて印象薄いかも。しばらくしたらまた変えます。

RailsのTimeHelpers#travel_toを開発時のデータ生成に使ってみる

Sat, 01 Sep 2018 06:28:27 +0900

RailsというかActiveSupportのTimeHelpersにはtravel_toみたいな、現在時刻を偽装？するメソッドがあります。主にテストで使うもので、例えば1ヶ月後に何かが無効になるのをテストするときなんかに使われたりします。

そのtravel_toを開発用に使ってみました。

週次で集計するような時系列データのグラフを表示するような機能を作るにあたり、開発環境だとまともにデータがないためにグラフをまともに作れなかったためです。

rails runnerで起動するスクリプトとして以下のように書きました。

 1exit unless Rails.env.development?
 2
 3require 'active_support/testing/time_helpers'
 4include ActiveSupport::Testing::TimeHelpers
 5
 6ApplicationRecord.transaction do
 7 initial = Time.zone.local(2018, 9, 1, 12, 0)
 8
 9 (1..52).each do |i|
10 time = initial + i.week
11 puts "generating data for #{time}"
12
13 # ここで時刻を移動
14 travel_to time do
15 MyModel.generate_data!
16 end
17 end
18end

まず、本番などで動かないように環境をdevelopment?にのみ限定します。続いて必要なファイルのrequireやincludeなどをします。

あとは適当にループを回しながら、1週間後、2週間後、、と時刻をずらしていき、その時点で生成したデータものとしてデータがDBに登録されていきます。

これにより1年後までのデータを作れました。

created_atなどのカラムにも、ちゃんとtravel_toした時点の時刻が入っています。

Android PでReact Nativeアプリの逆方向のリストのスクロールが引っかかる感じになった

Fri, 31 Aug 2018 06:02:19 +0900

自社でも使っているツールのReact Native製のアプリを使っている同僚から、Androidを上げたらスクロールがおかしいよという連絡があったので調査をしました。

問題が起こるのは、逆方向のリストを表示している箇所です。逆方向のリストとは画面一番したが要素の先頭で、上にスクロールしていくと追加読み込みが起こるという、チャットのような画面のことです。

元々これを実現するためにListViewをベースにして逆向きリストを実現できるこちらのライブラリを使っていました。

GitHub - expo/react-native-invertible-scroll-view: An invertible ScrollView for React Native

An invertible ScrollView for React Native. Contribute to expo/react-native-invertible-scroll-view development by creating an account on GitHub.

Inverted FlatList doesn't work on Android P · Issue #19434 · facebook/react-native

最初の調査の段階ではもしかしてこれが古いせいなのかな？と疑いました。

ところで、1年ちょい前ぐらいからReact NativeにはFlatListという新しいコンポーネントが用意されており、ListViewよりもFlatListを使うほうが良いです。FlatListにはリストを逆向きにするためのinvertedというプロパティも用意されているため逆向きリストも簡単に実現できます。

ということを知っていたのでライブラリを使わずにFlatListに変更すれば直るかも、なんて簡単に考えていました。

結果、FlatListへの置き換えは簡単に済んだのですが、スクロールの挙動は全く直りませんでした。invertedオプションを無くすと（＝上から下に要素が並ぶようにすると）、スクロールの問題がありませんでしたので、何かのバグかな？と思い、React Nativeのissueにあたることにしました。

早速こんなんが見つかりまして、

[ Yes ] I have reviewed the documentation [ Yes ] I have searched existing issues [ Yes ] I am using the latest React Native version When using FlatList with inverted={true} the scrolling doesn't w...

stackoverflow.com →https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty

どうやら今回と同じ問題について話しているようだぞ、というのがわかりました。ネイティブ側の実装をいじって回避できるという話もあるようですが、定かではないしあまりやりたくない感じだなーというところまでわかりました。

Android側の実装が変わったのに対してReact Native側が対応しきれていないという風に見えるので、ちょっと対応待ちかなと思います。

Xcodeのビルド成功・失敗時に効果音や読み上げを鳴らす

Thu, 30 Aug 2018 06:31:02 +0900

こんなツイートを見かけたので設定してみました。

Xcode、ビルド完了時に音が鳴るようにしとくとついつい Twitter に夢中になって何してたかわからなくなるのを減らせる
— Kosuke Ogawa (@koogawa) August 22, 2018

Xcodeの設定（Preferences）を開き、左から3番目のBehaviorsタブへ。上にBuildという分類があるので、その中からSucceedssやFailsを選びます。

Play sound

これにチェックをいれると成功時や失敗時に効果音を鳴らせます。自前でサウンドファイルを選べるので景気のいい効果音なんかを設定しておくと気持ちがノリそう。

Speak announcement using

指定した人の声で音声読み上げてくれるようになります。最初から指定してされているKyokoさんだと、日本語の棒読みで「ビルドサクシーデッド」などと言ってくれます。

効果音にせよ音声にせよ、気づけるようにしておくとよさそうですね。

Android Pのエミュレータを作るときにAPI 28としか出てなくて困惑

Wed, 29 Aug 2018 06:22:10 +0900

普段Androidユーザーではないんですが、React Nativeでアプリを作っているため開発環境は用意しています。

今回Android P（バージョン9）でうまく動かないという報告を受けて環境を作ろうとしたら、Android StudioというかSDK Managerというか、どこにもPieとかPとかそういう記述がなかったので不慣れな僕としては困惑しました。

まず、SDK Managerを見たら、Android 8.1の上にAndroid API 28というのがありまして、ひとまずこれを入れました。

それで次にAVD Managerでデバイスを作ろうと思ったんですが、一覧にはOreoの上にはAPI 28としかありません。ひとまずこれでエミュレータ環境を作ってみました。

そしたら出来上がったのがこれ。

Android null

でも起動してシステム情報を見てみたらちゃんとAndroid versionは9となっていました。

困惑しましたが、一応大丈夫そうですね…？

Safariでファイル選択があるフォームでファイルを選ばずにXHRリクエストすると固まる

Mon, 27 Aug 2018 06:59:03 +0900

MacとiOSのSafariでのファイル選択有りのフォームの送信がうまくいかないケースがありました。

Submitボタンを押したときにChromeのNetworkに何も現れないのでしばらくはまりましたが、そのものズバリのバグがSafariにあることがわかりました。

ファイルinputが空の状態のときはajaxの送信前に該当のinputをdisabledにしておき、送信データが作られたあとはdisabledを外して元に戻しておくとやると回避できる、というコードが紹介されていました。

こちらのQiita記事のコードのほうがdata-safari-temp-disabledみたいにinputを限定するような工夫があるので良さそうに思い、こちらのコードで回避するに至りました。

iOS 11.3 SafariとmacOS Safari 11.1の空をAjaxで送信できない問題への対応 - Qiita

「特定のiOS端末だけ投稿時に400 Bad Requestが返ってくる」・・・突然のバグ報告をもらい、同僚の @elim さんと一緒に四苦八苦しながら調査した結果、最新のSafariのバグであることを突き止めた話です。 SafariのXHRバグの概要 iOS 11.3と...

rest-clientで簡易にAPIクライアントを書く - PIYO Notes

rest-clientで書いたAPIクライアントでプロキシが使えないケースがあったのでFaradayで書き換える

Sun, 26 Aug 2018 06:14:47 +0900

rest-clientでAPIクライアントを書くって記事を書いたんですが、プロキシサーバーの設定によっては正しく接続できないケースがあったのでクライアント自体をFaradayで書き換えることをやりました。

接続できないケースというのは、プロキシサーバーのパスワードに特殊な文字（僕の場合は^+$など）が入っている場合で、エラー内容は残してないですが文字列処理か何かでエラーとなった記憶があります。特殊文字がエスケープできないか、とか色々試したんですが、確かダメだった気が、、ちょっと曖昧です。

rest-client版

以下、rest-clientについて書いたときの記事から転載。

オープンではないサービスのAPIを使うとき、APIクライアントが無いってことが多いです。なのでアプリケーションから使いたいAPIだけを叩くような簡易なAPIクライアントを自分で書きます。そのときはrest-clientあたりを使ってベタっと書いてしまうことがほとんどです。

Macアプリをショートカットで起動できるようにするSnap - PIYO Notes

 1class ApiClient
 2 ENDPOINT = 'https://api.example.com/items.json'.freeze
 3
 4 class << self
 5 def items(search)
 6 url = ENDPOINT
 7 params = {s: search}
 8 get(url, params)
 9 return [] if data.nil?
10
11 data['items'].map do |item|
12 ItemResponse.new(item)
13 end
14 end
15
16 def item
17 # ...
18 end
19
20 private
21
22 def get(url, params)
23 res = RestClient.get(url, params: params)
24 return nil if res.code != 200
25
26 JSON.parse(res.body)
27 end
28 end
29end
30
31# こんな感じで使う
32ApiClient.items('けんさく') => [...]

Faraday版

 1class ApiClient
 2 # ENDPOINTはホストまでになる
 3 ENDPOINT = 'https://api.example.com/'.freeze
 4
 5 class << self
 6 def items(search)
 7 params = {s: search}
 8
 9 # ENDPOINTは固定なのでpath渡し変えておく
10 get('items.json', params)
11
12 # 以下同じ
13 return [] if data.nil?
14
15 data['items'].map do |item|
16 ItemResponse.new(item)
17 end
18 end
19
20 private
21
22 def get(path, params)
23 conn = Faraday.new(ENDPOINT,
24 proxy: {
25 uri: 'proxy_url'
26 user: 'proxy_account',
27 password: 'proxy_password^+$'
28 })
29 res = conn.get(path, params)
30 return nil if res.status != 200
31 JSON.parse(res.body)
32 end
33 end
34end
35
36# 使い方は一緒
37ApiClient.items('けんさく') => [...]

Faraday版の場合はプロキシのアカウントを個別に指定できるので特殊文字が含まれていても問題がありませんでした。

Mac画面収録をAutomatorでアプリ化してショートカットで起動する

Sat, 25 Aug 2018 06:53:53 +0900

兼ねてからQuickTimeを使った画面収録までの手数が面倒だなーと思っていたのでAppleScriptで自動化する方法を調べました。

これにより

QuickTimer Playerの起動
画面収録を選択
録画開始のボタンを押す

ところまでを自動でやってくれるため、あとは録画する画面をクリックするか、録画したい範囲をドラッグするかだけで録画を始められるようになります。めちゃ便利。

方法

Automatorを使います。Automatorくん、久々に登場するなあ。

Automatorはアプリケーションフォルダにあります。Spotlightなどから検索してもOK。起動したらアプリケーションを選んで開始します。

んで、AppleScriptを選んで右側にドラッグして追加します。

その中身はこう。

tell application "QuickTime Player" to activate
tell application "System Events"
activate
tell process "QuickTime Player"
click menu item "新規画面収録" of menu "ファイル" of menu bar 1
end tell
end tell
tell application "QuickTime Player"
activate
tell application "System Events" to key code 49
end tell

QuickTime Playerを開いてメニューから新規画面収録を選ぶ、という動作をしています。Automatorから実行してみるとちゃんと録画待ち状態になるはずです。

こんな感じで。

アクセシビリティ

さて、これをAutomatorで保存するとxxxxx.appみたいなものが保存できますが、appをこのまま実行するとアクセシビリティの都合でエラーが出るはずです。

そこでシステム設定のアクセシビリティで、今回書き出したアプリを許可しましょう。この画面です。

左下の鍵マークを開けてから先ほど保存した.appのファイルをリストにドラッグドロップします。元々リストに存在する場合はチェックを入れればOK。

これでアプリとして動いてくれるようになります。

あとはショートカットの設定ですが、僕はアプリの起動にSnapという常駐型のアプリを使っていますので、このアプリも同じように追加すればOK。すぐに録画できますね。

Snapについてはこちら

よく使うアプリはAlfredみたいなランチャーから起動するのが面倒なのでSnapという常駐アプリを使ってショートカットから起動できるようにしています。 https://itunes.apple.com/jp/app/snap/id418073146?mt=12 例えばGoogle Chromeに「ctrl + shift + cmd + c」キーを割り当てていて、ブラウザを起動したいときやフォアグラウンドに持ってきたいときのこのキーを押します。また、フォアグラウンドにいるアプリのショートカットを押すとバックグラウンドに回ってくれます。

seed_dumpを使ってRailsのテストデータの読み込みを高速化した - PIYO Notes

UIImageの明るさをCIFilterで調整するSwiftコード

Fri, 24 Aug 2018 06:53:05 +0900

CIFilterを使う
CIColorControls
inputBrightnessに値を設定
値は−1.0〜1.0

 1import CoreImage
 2
 3extention UIImage {
 4 func adjustBrightness(brightness: Double) -> UIImage? {
 5 let ciImage = CIImage(cgImage: self.cgImage!)
 6
 7 let filter = CIFilter(name: "CIColorControls")
 8 filter?.setValue(ciImage, forKey: kCIInputImageKey)
 9 filter?.setValue(brightness, forKey: "inputBrightness")
10
11 guard let newCIImage = filter?.outputImage else {
12 return nil
13 }
14
15 let context = CIContext(options: nil)
16 guard let cgImage = context.createCGImage(newCIImage, from: newCIImage.extent) else {
17 return nil
18 }
19 return UIImage(cgImage: cgImage, scale: 1.0, orientation: .up)
20 }
21}

こんな感じで使える。

1let image = UIImage(...)
2let newImage = image.adjustBrightness(brightness: 0.5)

CircleCIでRSpecの結果htmlをアーティファクトにおいて見られるようにする

Thu, 23 Aug 2018 06:34:10 +0900

rspecに--format html --out FILEみたいなオプションをつけるとHTMLで結果を出力できます。

とある事情でCircle CIのアーティファクトに置く必要が出たので、試してみました。

Circle CIのV2です。

 1working_directory: /tmp/working-directory
 2
 3- run:
 4 name: Run rspec
 5 command: |
 6 bundle exec rspec --format html --out /tmp/working-directory/rspec.html
 7
 8- store_artifacts:
 9 path: /tmp/working-directory/rspec.html
10 destination: rspec.html

色々と略してますが、要はワークングディレクトリに結果を書き出して、その結果をstore_artifactsで配置するという感じです。

ところがこれをやってしまうと肝心のCIの画面への出力がなくなってしまうため、でどのテストが失敗したのかがわからなくなってしまいました。

そこで更に--formatオプションを追加し標準出力にも出すようにすることでCIの画面上からも確認できるようにしました。

bundle exec rspec --format p --format html --out /tmp/working-directory/rspec.html

できた。

seed_dumpを使ったRSpec高速化にはsequenceのリセットが必要だった

Wed, 22 Aug 2018 06:01:29 +0900

先日書いたこれが動かなくなってしまい、よく調べていたらプライマリキー（つまりid）が被って追加できないよってことになってしまったみたいです。

そこそこ複雑なデータを持たないとフィーチャテストを動かせないようなプロジェクトがありまして、きちんとしたデータを作るためにはCSVファイルからデータを取り込んでリレーション作るという必要がありました。テストケースによってはこれを使わないこともありますが、全体の40%程度はこのデータがないとうまくいかないので、それぞれのテストの前に取り込み処理が入るります。これにより全体を流すのにめちゃくちゃ時間がかかっていました。

bootstrap-sass/assets/stylesheets/bootstrap/_glyphicons.scss at master · twbs/bootstrap-sass

確かに、関連を維持するためにidも含めてテストデータを登録していますので、sequenceの値がおかしくなっていた可能性があります。

そこで、seed.rbの最後に関連するテーブルに対してreset_pk_sequence!を呼ぶことでこの問題に対応しました。reset_pk_sequence!はDBがpostgresのときに使えます。

前回のParent、Childの例をそのまま使うとすると、

1klasses = [Parent, Child]
2klasses.each do |klass|
3 ApplicationRecord.connection.reset_pk_sequence!(klass.table_name)
4end

とすればOKです。

Capybaraで別タブで開いたWindowを閉じる

Tue, 21 Aug 2018 06:26:40 +0900

利用規約を確認しないとチェックボックスにチェックできないみたいな仕組みを簡易で作りまして、それのテストを書くときにちょっと迷ったので残しときます。

利用規約のリンクを押すと別タブで規約ページが開くと同時にチェックボックスのdisabledが外れる仕組みになっているとします。

テストではclick_link '利用規約'とすると別ウィンドウ（別タブ）が開いてしまい、そのままではチェックボックスを操作できません。新しく開いたウィンドウを閉じてあげなければいけません。

そこで↓のようにします。

1window = window_opened_by { click_link '利用規約' }
2window.close
3check 'terms_of_use'

Windowを保持できるので、それをcloseするだけ。そしたら元にWindowに戻った扱いになるので、あとは普通にテストを書けばOKです。

身近で見たデバッグが得意じゃない人の特徴

Mon, 20 Aug 2018 06:24:08 +0900

身近で何人か見た例を整理してみる（誰か1人の話ではないです）

エラーメッセージ自体は読む
エラーメッセージでググったりする
エラーメッセージから発生箇所を推定できない
- 例えば
- JSのcannot read property 'xxxx' of undefined
- Rubyのundefined method 'xxxx' for nil:NilClass
- xxxxを呼んでる箇所が怪しいと気づかない
ブレークポイントを置いてデバッグしないこともない
渡ってきているパラメータを疑わない
スタックトレースを見ない
DevツールのNetworkタブを見ない

うーん、あんまり抽象化できないな。デバッグできない人がデバッグできるようになるために何をしたらいいかを言語化したいです。

僕がやるのは、

前提
- 怪しい箇所を二分探索で絞り込んでいく
方法
- ログを置く（console.log, Rails.logger）
- ブレークポイントを置く（debugger, binding.pry）
- フロントエンドの場合はNetworkタブを見る
見る箇所
- オブジェクトの状態が想定通りかを見る
- 受け取った引数やパラメータが想定通りかを見る
- 渡す引数やパラメータを見る

怪しい箇所の絞り込みが大事です。少しずつ狭めていくとおのずと原因がわかってくるものだし、デバッグはいずれ勝てる勝負なので根気よく攻めていくのが大事じゃなかろうかと。慣れたらアタリをつけられるようになりますが。

デバッグ苦手な人はエラーが出た→色々調べる、みたいになりがちなのでは？と思いました。

Bootstrap3をwebpackerで使うときにハマったこと

Sun, 19 Aug 2018 06:47:48 +0900

個人のRailsアプリケーションをwebpacker化する際、BootstrapのCSSをwebpackerでimportしようとして少しだけハマったので共有します。

そもそも、yarn add bootstrapとするとBootstrap4系がインストールされますし、yarn add bootstrap@3としてバージョン3系を入れようとすると、SASSではなくLESSのBootstrapがインストールされます。バージョン3系は確かにLESSでしたね。

このRailsプロジェクトではSASSを使っていたので、yarn add bootstrap-sass@3として、SASSポート版のBootstrap3を入れました。

そしてこれをimportするわけです。

JS側は比較的単純で、↓でOK。

1// application.js
2import 'bootstrap-sass/assets/javascripts/bootstrap.js'

CSS側は↓のようになります。

1@import "~bootstrap-sass/assets/stylesheets/bootstrap"

が、ここでWebpackerが↓のようなコンパイルエラーを吐きます。

 Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/Users/..(中略)../app/javascript/styles'

どうやらフォントファイルが見つからない、とのこと。

ソースコードでいうとここ（↓）のあたりで参照している箇所がまずそうに見えます。

Official Sass port of Bootstrap 2 and 3. Contribute to twbs/bootstrap-sass development by creating an account on GitHub.

遅まきながらRails5の頃に作ったプロジェクトをyarn化する（webpacker無し） - PIYO Notes

ソースコードを見る限り$icon-font-pathをメンテすれば良いはずです。実際、sprocketsでインポートするときもパスの指定をしていましたし、READMEにも書いてあります。

今回はnode_modules以下から探すようにしたいので、~を使うように$icon-font-pathを定義すれば良いわけです。

1$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
2@import "~bootstrap-sass/assets/stylesheets/bootstrap"

@importの前に書けばOKです。

Rails5.0系の個人プロジェクトをアップグレードしてWebpackerを使うまでにやったこと

Sat, 18 Aug 2018 06:21:12 +0900

個人プロジェクトを最新のRailsアップグレードして、Webpackerを使えるところまでやりました。自分への覚書の意味もこめて。

Railsを5.2までアップグレードする

Rails以外のgemをupdateしておく
Rails 5.1にアップグレード
- bin/rails app:updateする
- 差分を調整する
- new_framework_defaultsあたりも注意する
- 軽く動かして警告などに対応する
Rails 5.2にアップグレード
- 手順は5.1と一緒

まずはyarnを使う

gemやrails-assetsで追加していたJSライブラリやCSSなどをyarnで管理するように変更します。この時点ではwebpackerを使いません。

手順はほぼこれです。

Rails5の頃に作ったプロジェクトで、JS系のアセットの管理には Rails Assets を使っている、Rails 5.1のプロジェクトが手元にありました。先日（8/3）にそのRails Assetsが証明書の期限切れでbundle installできなくなるという問題が発生。これを期に管理方法を変えないとねということで、Rails 5.1から使えるYarnを使うことにしました。

gemが持ってるJSをwebpackerで読み込むには - PIYO Notes

できるだけ全部yarn側に持っていくことをおすすめします。jqueryとかbootstrapとかもです。webpacker化しちゃってから対応すると面倒だった記憶があります（一度やった）。

また、この時点でメンテされていないライブラリがあったら実装を置き換えておくのがいいかもしれません。今回対応したプロジェクトではcolorpicker系のライブラリを置き換えました。

Railsのヘルパー系とJSを一緒に提供するようなgemはyarn管理に持っていけないので、それはwebpacker管理に変更したのちに個別に対応しました（後述）。

webpackerのインストール

いよいよwebpackerを入れますが、ここではあまり欲張らず既存のcoffeeスクリプトをそのまま活かす形にしました。JSへ変換するスクリプトなんかを使うとなかなか大変そうだということがわかったので（これも一度やりました）。

Gemfileにgem 'webpacker'を追記して、

% bundle install
% rails webpacker:install
% rails webpacker:install:erb # erbとして読むため
% rails webpacker:install:coffee # coffeeを読めるようにするため

JSを移動

app/assets/javascriptsにあったcoffeeスクリプトのファイルを新しくできたapp/javascript/packs/以下のフォルダへ移動します。packs配下に直接置くとエントリポイントになっちゃうので一つ階層を置くと良さそうです。pagesなどとしてその下に置きます。

packs/application.jsはpacks/application.js.erbとリネームしました。これはRails管理のJSをimportするためです。

実際の DB データをテストで使用する - milk1000cc

application.js.erbは例えば以下のようになるかと思います。

 1// packs/application.js.erb
 2
 3import jQuery from 'jquery/dist/jquery';
 4window.jQuery = jQuery;
 5window.$ = jQuery;
 6
 7import 'jquery-ujs/src/rails.js'
 8import 'bootstrap-sass/assets/javascripts/bootstrap.js'
 9
10import "<%= File.join(Gem.loaded_specs['cocoon'].full_gem_path, 'app', 'assets', 'javascripts', 'cocoon.js') %>"
11
12import './pages/items.js.coffee'
13import './pages/map.js.coffee'

従来のapplication.jsで書いていたようなrequire jqueryのような部分をimportに変えつつ、先程移動したcoffeeスクリプトも相対パス指定で直接書いていきます。globを使うような方法もありそうでしたが、今回は数が少なかったので調べませんでした。

あとはView側のjavascript_include_tagをjavascript_pack_tagと変更すればOK。ここで動作確認をしておくと良いです。

ちなみにjqueryは他のライブラリからグローバルに参照されることが多かったり、自身のView側のJSのコードでもそのように書いていることがあり得るので最初の3行のようにして参照できるようにしています。

CSSもwebpacker

packs/application.js.erbでsassをimportするとそれもコンパイルされ、application.cssとして参照されるようになります。なので、CSSもこちらに移動しましょう。手順はほぼ一緒ですが、importの書き方に工夫が要ります。

まずapplication.jsに以下を追記

import '../styles/application.sass'

packsと同じ階層にstylesディレクトリを作ってそこにapplication.sassというファイルを配置。

中身はこんな感じです。

1@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3"
2@import "~toastr/toastr.scss"
3
4@import 'common'

yarn管理のライブラリには~をつける必要があります。これをつけるとnode_modulesからのパスになるようです。

あとは、stylesheet_link_tagをstylesheet_pack_tagに変更すればOKのはずです。

ちなみにここでハマったのはsassファイルに凡ミスがあってコンパイルエラーになったときに、エラーメッセージにはcssファイルがないよ、としか表示されなくて原因がわからなくて困ったというやつです。

public/packs配下にもapplication.cssが書き出されていなくて設定ミスかな？なんて思っていたんですが、webpack-dev-serverを動かしてみたらsass側にエラーがあったというオチでした。

終わり

ここまででひとまずsprocketsを使わないようにできたのではないかと思います。本当はちゃんと新しいJSでかけるようにしたり、coffeeスクリプトをやめたり、ESLintをかけられるようにしたりとモダンにしていきたいところ。

ブログの細かい見た目を微調整しました

Fri, 17 Aug 2018 06:57:34 +0900

ごちゃっとしていてなんとなく気に入らなかった当ブログの見た目をちょっとだけ調整しました。

Before

Beforeはメイン部分とサイドバーの2カラムレイアウトでした。

ちょっと詰めすぎではなかったかなと思い、縦に並べることにしました。例えばサイドバーのPOPULARの部分なんかはちょっと文字を小さくしすぎだったかなと思います。

After

こちらがAfterです。

スペースができた分関連記事などの要素を少し広げられたので、狭い領域に文字が入るように小さくしていたフォントサイズを大きくしたり余白を取ったりすることができました。

そして、ヘッダー部分の下に2色の帯を入れてみました。これはほんとに適当で、僕の好きなスペインのVALENCIA C.F. のイメージカラーを入れてみようという感じです。帯に揃える形で全体的なイメージを暖色系としました。元々はどちらかというと青系というの色が多かったし、若干青が強いグレーが使われていましたね。

POPULARの箇所も余白ができたり文字が大きくなったりして見やすくなったのではないかと思います。

本当はもっと手を入れたいですが、自分でできる範囲では少しはよくなったかなー。

seed_dumpを使ってRailsのテストデータの読み込みを高速化した

Thu, 16 Aug 2018 06:09:32 +0900

そこそこ複雑なデータを持たないとフィーチャテストを動かせないようなプロジェクトがありまして、きちんとしたデータを作るためにはCSVファイルからデータを取り込んでリレーション作るという必要がありました。

テストケースによってはこれを使わないこともありますが、全体の40%程度はこのデータがないとうまくいかないので、それぞれのテストの前に取り込み処理が入るります。これにより全体を流すのにめちゃくちゃ時間がかかっていました。

といっても数十分程度なので多少目をつぶってこれまではやり過ごしてきました。

このたび、重い腰をあげて対応策を考えましたので記しておきます。といっても↓の記事を大いに参考にして実施したので、こちらの記事に感謝します。

Rails で開発していると、実際に使っている DB のデータを、テストで使用したい場合があります。そのような場合、seed_dump と activerecord-import を使ってうまく実現することができました。 Gemfile group :development do gem 'seed_dump' end group :test do gem 'activerecord-import' end 使わない環境では、gem を読み込まないようにします。 script/dump_models.rb DUMPED_MODELS = [Site, Category, SubCategor…

milk1000cc.hatenablog.com

こちらの記事で紹介されているのはseed_dump gemを使ってDBのデータをactiverecord-importの形式で書き出し、テストの必要な箇所で書き出したRubyのコードを実行するというとやり方です。大筋はこのやり方をとります。

細かいところで工夫した箇所があるのでその点について紹介します。

必要なデータだけのDBをつくる

元々CSVインポート処理で取り込まれていたデータはごく一部なので、開発用に使っているデータが全て必要なわけではありません。そこで新しいデータベースを用意してテスト用のデータのみを取り込んだあとで、そのデータベースに対してseed_dumpにより書き出せばよいと考えました。

ちなみに、テストコードでのインポート処理は、

1MyTestData.import!

みたいに、ユーティリティクラスのメソッドを呼ぶだけとなっています。これを踏まえた上で、一時的なデータベースを作るために以下のようなことをしました。

database.ymlを開き、developmentのdatabase名をseed_tmp_devみたいな適当な名前に変更する
rails db:createなどでデータベースを作成
rails db:migrateでマイグレーション
rails consoleでコンソールに入る
MyTestData.import!を実行

これで必要なデータだけが入った一時的なデータベースが完成しました。

seed_dump時の工夫

先程紹介した記事ではRubyスクリプトによりデータを出力していました。seed_dumpにはrakeタスクがありますので、今回はそちらを使いました。データベースにあるデータを全て書き出してくれればいいので、モデルの絞り込みは特にしませんでした。

出力用のコマンドは次のようになりました。

1% rake  db:seed:dump EXCLUDE=created_at,updated_at IMPORT=true FILE=spec/fixtures/seed.rb

記事と同様に以下のオプションを指定しています。

EXCLUDE 除外カラム。関連のためidは出力対象です。
IMPORT activerecord-import対応の形式で書き出します。
FILE 出力先のファイルパスを指定しています。

さて、このファイルを元記事のように:seedタグ有りのときに読み込むようにして実施したところ、関連の外部キーでエラーになりました。

出力されたファイルを見てみると、アルファベット順に処理が書かれています。

1# 例
2Child.import(...)
3Parent.import(...)

ここでChildが外部キーparent_idあたりでParentを参照していたりするとChildをimportするときにエラーとなります。本来は以下のような順番で取り込まれるべきです。

1# こうなっているべき
2Parent.import(...)
3Child.import(...)

今回のプロジェクトの場合、関連するモデルが15程度あったのでそれぞれ親子関係をたどって出力されたファイルのコードを並び替える必要がありそうでした。

ここでseed_dumpでは対象のモデルを指定するやり方があることを思い出しました。rakeタスクの場合はMODELS="Parent, Child"のように指定可能です。

1% rake  db:seed:dump MODELS="Parent, Child" EXCLUDE=created_at,updated_at IMPORT=true FILE=spec/fixtures/seed.rb

これを実行したところMODELSに指定した順番でコードが出力されており、望み通りにインポートできそうなところまでいきました。

バリデーションの回避

一部のモデルではデータベースのカラムの情報だけでは保存できないようなバリデーションがかかっているモデルがありました。

そのため、出力されたファイルのParent.import(\[...\])のところにvalidate: falseオプションをつける必要がありました。

1# before
2Parent.import([...])
3
4# after
5Parent.import([...], validate: false)

この変更はエディタのマルチカーソル機能でがんばって変更しましたｗ

ここまででようやく取り込めるようになりました。

結果

対象のテストを流してみたらこんな結果となりました。

変更前

Finished in 41 minutes 15 seconds (files took 11.15 seconds to load)

変更後

Finished in 17 minutes 25 seconds (files took 11.13 seconds to load)

41分→17分ということで、40%程度に短縮できました！

MacBook Proの設定を変えたら無事スリープ中に起きなくなった

Wed, 15 Aug 2018 06:30:11 +0900

先日Macのスリープ中の挙動について設定変更だけ行いました。

MacBook Proがスリープ中に起きまくっているようなので設定を変えてみた - PIYO Notes

スリープ中のMacが熱くなる現象がずっと前からありました。Macの熱のせいで部屋が暑いし（夏だから）、本体もかなり熱いので心配です。 Macの挙動で気になっていたのでは、スリープしているにもかかわらず接続しているディスプレイからMacの復帰を認識したときのピッという音がなることです。だいたいFacebookメッセンジャーなどのメッセージを受信したタイミングで起こっていることがなんとなくわかっていたので、実はスリープ中もネットワークがつながっていて、通知のタイミングで起こすのかな？と思っていました。

は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。

その後数日過ごしてみたところ無事スリープ中に熱くなったりファンが回ったりすることがなくなりまして、おそらく無事想定通りの挙動になっているのではないかと思います。

毎朝アツアツのMacにびっくりすることはもうなさそうです。

Googleでカラーコードを検索するとカラーピッカーが使える

Tue, 14 Aug 2018 06:21:34 +0900

Googleで16進数のカラーコードを検索したらこんなふうにカラーピッカーが現れました。

HEXやRGB表記などのいくつかの形式のコピペ用の文字列が用意されていて、色を選択するとその部分も変わるので簡易な表記変換方法としては便利じゃないかと思います。

ちなみに、rgb(r, g, b)形式で検索した場合にもこのカラーピッカーは表示されますが、それ以外のHSVやHSL、CMYKの形式で検索した場合にはピッカーは現れません。

今更input type=color の存在を知る

Mon, 13 Aug 2018 06:02:32 +0900

HTML5のinput type=colorの存在を今の今まで知りませんでしたが、たまたま知りました。

Webでカラーピッカー使ったことなくて、という言い訳だけしとこ。

1<input type="color">

で↓が出ます（Safariだと単なるInputに見えると思う）。

ちなみにRailsだと、color_fieldが使えます。

1= form_for(object) do |f|
2 = f.color_field :color

もしかして他にも知らないのあるのかも？と思ってMDNで調べてみました。

: HTML 入力要素 - HTML | MDN

developer.mozilla.org

全部で20ちょいのtypeがあるようです。

button
checkbox
color → 知った
date
datetime-local → 知らなかった
email
file
hidden
image
month → 知らなかった
number
password
radio
range → 知らなかった
reset → 知らなかった
search
submit
tel
text
time
url
week → 知らなかった

知らないのが5つありました。colorを含めると6つですね。

このうちcolorとrangeあたりは使うタイミングがありそうなので、よく覚えておきます。

MacBook Proがスリープ中に起きまくっているようなので設定を変えてみた

Sun, 12 Aug 2018 06:48:28 +0900

スリープ中のMacが熱くなる現象がずっと前からありました。Macの熱のせいで部屋が暑いし（夏だから）、本体もかなり熱いので心配です。

Macの挙動で気になっていたのでは、スリープしているにもかかわらず接続しているディスプレイからMacの復帰を認識したときのピッという音がなることです。だいたいFacebookメッセンジャーなどのメッセージを受信したタイミングで起こっていることがなんとなくわかっていたので、実はスリープ中もネットワークがつながっていて、通知のタイミングで起こすのかな？と思っていました。

省エネルギーからいじれる設定は割といじっているので、他にも原因があるのではないかと思って色々調べてみましたところ、こんな記事をみつけたのでトライしてみました。結果しばらく様子見しようと思っています。

「スリープ時にもネットワーク接続を許可するオプションを確認」のところです。

Macでスリープ時にバッテリーが減る現象を改善する方法まとめ - wp.bmemo.pw

⚠この記事はブログ移転前のアーカイブです El capitanから？よくわからないけどMacのスリープ中にバッテリーがモリモリ減る現象が出るようになった。夜100%、朝80%とかになってたり。MBA2012モデル使ってたときは夜100%朝100%ってくらいスリープ時にバッテリーは減らなかったので、直したいなあと思ってました。原因はいくつかあるので１つずつ潰してみたいと思います。もくじ Power Napの設定を確認する詳細な電源設定を確認する SDカードを挿しっぱなしにしていないかスリープ時にもネットワーク接続を許可するオプションを確認 SIPをオフに TCPKeepAliveDuringSleepをオフに 12時間スリープで1%消費まで改善 Power Napの設定を確認するシステム環境設定 -> 省エネルギー -> バッテリーの項目で「バッテリー電源使用中にPowerNapをオンにする」にチェックが入っていないか確認してください。スリープ中勝手に起きて更新やらなにやらを確認する設定です。自分の環境では既にオフ状態でした。詳細な電源設定を確認するバッテリー電源で動作させているときに以下のコマンドを実行します pmset -g こんな感じの結果が出力されたでしょうか。 System-wide power settings: Currently in use: standbydelay 1800 standby 1 halfdim 1 hibernatefile /var/vm/sleepimage powernap 0 gpuswitch 2 disksleep 0 sleep 3 autopoweroffdelay 0 hibernatemode 3 autopoweroff 0 ttyskeepawake 1 displaysleep 3 acwake 0 lidwake 1 stanbydelay カバーを閉じてから、スタンバイモードに突入する時間です（秒）デフォルトは10800秒 hibernatemode スリープの状態を選択します。0,3,25から選択します。各モードの意味についてはここ参照 http://www.

wp.bmemo.pw

詳しくはわかってないですが、ioregというコマンドがあって、そこでスリープ中のネットワークアクセスなどに関する設定を確認することができるようです。

紹介したブログ記事の通り実行してみると僕もまったく同じ状況でした。

% ioreg -l | grep IOPlatformFeatureDefaults
| | | "IOPlatformFeatureDefaults" = {"TCPKeepAliveDuringSleep"=Yes,"DNDWhileDisplaySleeps"=No,"TCPKeepAliveExpirationTimeout"=43200,"NotificationWake"=Yes

表に整理すると、こうなっていました。キー名から推測した意味も書いておきます。

Key	Value	意味（推測）
TCPKeepAliveDuringSleep	Yes	スリープ中にTCP通信を維持するかどうか
DNDWhileDisplaySleeps	No	ディスプレイのスリープ時にはDND（おやすみモード的なの）にする
TCPKeepAliveExpirationTimeout	43200	TCPを維持する時間（秒）
NotificationWake	Yes	通知時に起きる

意味が推測通りだとしたら、僕が気になってたメッセージを受け取るとスリープから解除するというのは、NotificationWakeによるものではないかという気がします。

正直、スリープ中にネットワークに接続したい用途は一切ないので、先ほどの記事のように設定を書き換えました。

手順は元記事を見ていただいたほうがいいような気がします。他にも関連してそうな情報が載ってるので。。。

さて、無事設定を変更して再度コマンドで確認をすると以下のようになっており、無事想定通りの結果になっていることがわかりました。

% ioreg -l | grep IOPlatformFeatureDefaults
| | | "IOPlatformFeatureDefaults" = {"DNDWhileDisplaySleeps"=Yes,"TCPKeepAliveDuringSleep"=No,"NotificationWake"=No}

Key	Value
TCPKeepAliveDuringSleep	No
DNDWhileDisplaySleeps	Yes
NotificationWake	No

これでメッセージ受信でスリープ解除されないか、毎朝熱くなっていないかどうかなどをを確認したいと思います。

gemが持ってるJSをwebpackerで読み込むには

Sat, 11 Aug 2018 06:48:11 +0900

手持ちのレガシー目なRails案件をいい加減Webpackerに直す活動を始めていまして、まずは仕事以外のプロジェクトからやってます。

JS用のgemだったりrails-assetsあたりはyarn化の時点でだいたい撲滅できていいですね。

ですが、RubyのコードがメインでJSも持っているようなgemではwebpacker化したときにJSをビルドできないという問題が起こります。

例えばcocoon gemがそうです。

GitHub - nathanvda/cocoon: Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms

Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms - nathanvda/cocoon

GitHub - rest-client/rest-client: Simple HTTP and REST client for Ruby, inspired by microframework syntax for specifying actions.

その場合はERBの仕組みを使って、gemのパスから対象のJSファイルをインポートするような書き方を取れば大丈夫、とcocoonおissueにありまして、実際それで解消しました。

↓コマンドでインストールして、

1% rails webpacker:install:erb

config/webpacker.ymlも一部変更して、

# config/webpacker.yml
default: &default
# Search jQuery in node_modules of the application and not in the cocoon directory
resolved_paths: ['node_modules/jquery/dist']

最後にapp/javascript/packs/application.jsをapp/javascript/packs/application.js.erbとリネームした上で、gemのパスを含めたファイルのパスを指定してインポート等すればOK。

// app/javascript/packs/application.js.erb
import "<%= File.join(Gem.loaded_specs['cocoon'].full_gem_path, 'app', 'assets', 'javascripts', 'cocoon') %>"

おかげでJSを含んだgemの対応も問題なくいけました。

rest-clientで簡易にAPIクライアントを書く

Fri, 10 Aug 2018 06:40:25 +0900

rest-client

Simple HTTP and REST client for Ruby, inspired by microframework syntax for specifying actions. - rest-client/rest-client

payjp-ruby/lib/payjp/payjp_object.rb at master · payjp/payjp-ruby

まずはサクッと

例をいきなり書いてしまうと↓な感じでやります。

 1class ApiClient
 2 ENDPOINT = 'https://api.example.com/items.json'.freeze
 3
 4 class << self
 5 def items(search)
 6 url = ENDPOINT
 7 params = {s: search}
 8 get(url, params)
 9 end
10
11 def item
12 # ...
13 end
14
15 private
16
17 def get(url, params)
18 res = RestClient.get(url, params: params)
19 return nil if res.code != 200
20
21 JSON.parse(res.body)
22 end
23 end
24end
25
26# こんな感じで使う
27ApiClient.items('けんさく') => [...]

はい、これだけ。

レスポンスを工夫する

なんですが、レスポンスをJSON.parseしたHashそのままというのはなんだかイケてないので、rest-clietを使っているAPIクライアントライブラリはどうしているのか、みたいなことを調べました。いい感じの実装を発見したので、それをインスパイアしてみました。

まず、Hashの扱いが少し変わります。

 1def items(search)
 2 url = ENDPOINT
 3 params = {s: search}
 4 get(url, params)
 5 return [] if data.nil?
 6
 7 data['items'].map do |item|
 8 ItemResponse.new(item)
 9 end
10end

こうするとApiClient.items('xxx')の結果はItemResponseの配列となります。

で、このItemResponseとは何者かといいますと、レスポンスのHashをJSのオブジェクトっぽいものに変換する（ドットでアクセスできるようにする）ためのクラスです。

1hash = {hoge: 'hogehoge', fuga: 'fugafuga', hash: { key1: 'value1', key2: 'value2'}}
2obj = ApiClient::Response.new(hash)
3
4obj.hoge => 'hogehoge'
5obj.fuga => 'fugafuga'
6obj.hash => {:key1=>"value1", :key2=>"value2"}

実装が半端なので入れ子のHashはメソッドでアクセスできるようになっていませんが、僕のケースはこれで事足りたのでそれ以上はがんばりませんでした。

ちなみに、このResponseクラスの実装はpayjp-rubyのこの辺のコードを参考にしています（実際には参考にしたのはしばらく前なので、そのときから更に実装が変わっているみたい。Hashのネストも対応してそう）。

Contribute to payjp/payjp-ruby development by creating an account on GitHub.

blog.piyo.tech →https://blog.piyo.tech/posts/2018-07-26-bluetooth-headset/

Responseとそれを継承したItemResponseというのをApiClient内に用意する形にしました。

 1class ApiClient
 2 # （略）
 3
 4 class Response
 5 def initialize(hash)
 6 @values = {}
 7 instance_eval do
 8 add_accessors(hash.keys)
 9 end
10
11 hash.each do |k, v|
12 @values[k] = v
13 end
14 end
15
16 private
17
18 def add_accessors(keys)
19 metaclass.instance_eval do
20 keys.each do |k|
21 k_eq = :"#{k}="
22 define_method(k) { @values[k] }
23 define_method(k_eq) do |v|
24 if v == ""
25 raise ArgumentError.new(
26 "You cannot set #{k} to an empty string." \
27 "We interpret empty strings as nil in requests." \
28 "You may set #{self}.#{k} = nil to delete the property.")
29 end
30 @values[k] = v
31 end
32 end
33 end
34 end
35
36 def metaclass
37 class << self; self; end
38 end
39 end
40
41 class ItemResponse < Response
42 # 必要であればメソッド生やす
43 def my_method
44 end
45 end
46end

プロキシサーバーを経由する

冒頭に「オープンではないサービスのAPI」と書きました。そういう場合って、特定のIPアドレスからしかアクセスできませんみたい制約があったりするので、開発時には工夫が必要です。

このクライアントを実装したときには、プロキシサーバーのIPを許可してもらい、クライアントはプロキシサーバー経由でAPIリクエストを投げるようにしました。

rest-clientの場合のプロキシ設定は非常に簡単で、

1RestClient.proxy = "https://accountname:password@54.xxx.yyy.zzz"

としておくだけでOK。Railsならinitializerで書いておくのが良いです。

PLANTRONICSのBluetoothのヘッドセットが一番良い

Thu, 09 Aug 2018 06:43:57 +0900

こないだBluetoothのヘッドセットを買った話と、そのときに買ったJABRAのヘッドセットの使い勝手があまりよくなかったという話を書きました。

結局、一度壊してしまったのと全く同じモデルのPLANTRONICSのヘッドセットを購入しました。これです。

amazon.co.jp →ASIN: B00IIJUMTE

購入履歴で検索をかけると

こうです。アップデートがなかったみたいで、全く同じモデルでした。

やはりフィット感も使い勝手も良いです。

そしてやはり持ち出すたびにどこに置いたか忘れます。洗濯、紛失注意です。

Highchartsのseriesの表示非表示をJSで切り替える

Tue, 07 Aug 2018 06:57:54 +0900

最近Highchartsをちょこちょこいじっているので、仕入れたのを小出しにしていきます。

Highchartsでは凡例を出しておくと凡例のクリックでデータ毎に表示の切り替えができます。

ですが、凡例は見た目上の工夫がほぼできないため、凝ったUIで表示状態を切り替えるためにはJavascriptを書いて制御してあげる必要があります。

seriesにはhide()やshow()という関数、visibleという属性があるのでそれらを駆使してJavscriptから制御が可能です。

Highcharts Class: Series

api.highcharts.com

以下、ボタンを押したらvisibleで状態を見て、隠すなり出すなりするコードです。

1function onClick() {
2 var series = chart.series[0];
3 if (series.visible) {
4 series.hide();
5 } else {
6 series.show();
7 }
8}

全体はこちら。

Highcharts Demo - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

案外簡単なので自前のUIというもの簡単に実現できそうです。

遅まきながらRails5の頃に作ったプロジェクトをyarn化する（webpacker無し）

Sun, 05 Aug 2018 06:58:07 +0900

Rails5の頃に作ったプロジェクトで、JS系のアセットの管理にはRails Assetsを使っている、Rails 5.1のプロジェクトが手元にありました。

先日（8/3）にそのRails Assetsが証明書の期限切れでbundle installできなくなるという問題が発生。これを期に管理方法を変えないとねということで、Rails 5.1から使えるYarnを使うことにしました。

webpackerを使うのは遠すぎるのでやめました。

手順

node_modulesを読み込めるようにしておく

Rails 5.1へアップデートしたときに自動的に対応済になっていることが多い箇所ですが、asset pipelineのパスにnode_modulesを通しておきます。

1# config/initializers/assets.rb
2
3# ↓を追記
4
5# Add Yarn node_modules folder to the asset load path.
6Rails.application.config.assets.paths << Rails.root.join('node_modules')

package.jsonの用意

% yarn init

するとpackage.jsonが作られます。ただ、Railsが生成するファイルとは異なるので適当に削っておきます。おそらくdescriptionとか要らないはずなので。

こんな感じのファイルで良いはずです。

1{
2 "name": "my-project",
3 "private": true,
4 "dependencies": {}
5}

パッケージの追加

bootstrapが使うpopper.jsと、アプリケーションが使っていたjquery-confirmをyarnで入れてみます。

$ yarn add popper.js jquery-confirm

ついでにGemfileの不要な記述は消しておきます。

1-source 'https://rails-assets.org' do
2- gem 'rails-assets-popper.js'
3- gem 'rails-assets-jquery-confirm2'
4-end

requireを変更

1-#= require jquery
2-#= require popper
3-#= require jquery-confirm2
4
5+#= require jquery/dist/jquery.js
6+#= require popper.js/dist/umd/popper.js
7+#= require jquery-confirm/dist/jquery-confirm.min.js

popper.jsはdistに3種類あって正しいものを指定しないとsyntaxエラーとなります。トランスパイラを使わない場合はumd/以下のコードを参照する必要がありました。

1Popper.js is currently shipped with 3 targets in mind: UMD, ESM, and ESNext.
2No idea what am I talking about? You are looking for UMD probably.
3
4- UMD - Universal Module Definition: AMD, RequireJS, and globals;
5- ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
6- ESNext: Available in /dist, can be used with webpack and babel-preset-env;

cssがあるパッケージの場合はそちらも変更する必要があります。

1-@import "jquery-confirm2"
2+@import "jquery-confirm/dist/jquery-confirm.min.css"

おわり

多分これら手順で動くはず。

Highchartsのチャートに新しいデータ列（Series）をJSで追加する

Sat, 04 Aug 2018 06:05:47 +0900

今日もHighcharts。今度は新しいデータ列を追加する方法です。

Highcharts Demo - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

昨日のJSFiddleをちょっと改変して、ボタンを押したら新しいデータ列を追加します。データの変更のときと同様アニメーションつきで描画されるのでとてもリッチな感じで良いです。

highchartのインスタンスにaddSeriesという関数があるのでこちらを使えばOKです。

1function onClick() {
2 chart.addSeries({
3 name: "新しく追加したデータ",
4 data: [100000, 110000, 120000, 100000, 130000, 140000]
5 });
6}

渡すオブジェクトはHighchartsを初期化するときにseriesとして渡す内容と同じで良さそう。

詳細はドキュメント↓

Highcharts Class: Chart

api.highcharts.com

ちなみにseriesの削除はこれだけでOK。

1chart.series[4].remove();

Highchartsで描画したチャートをJSから更新する

Fri, 03 Aug 2018 06:53:07 +0900

Highchartsで描画したチャートの値はあとからjavascriptで更新できます。

デモをちょっと改変してサンプルを作ってみました↓

Highcharts Demo - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

 1options = {} // 略
 2var chart = Highcharts.chart('container', options);
 3
 4function onClick() {
 5 chart.series[0].data[0].update({y: 80000});
 6 chart.series[1].data[0].update({y: 60000});
 7 chart.series[2].data[0].update({y: 40000});
 8 chart.series[3].data[0].update({y: 100000});
 9 chart.series[3].data[1].update({y: 100000});
10 chart.series[4].data[0].update({y: 1000});
11}

んで、ボタンを押したらonClickが呼ばれるようにしておきました。雑だけど、まあ。

onClickではhighchartsのインスタンスのseries以下のデータに対してupdateを呼び出します。すると値が更新されて、アニメーション付で再描画されます。アニメーションがあるのが気持ち良い感じ。

JSFiddleから試してみてください。ちなみにchartのインスタンスはjQueryで$('#container').highcharts()とかやっても取得できます。

update関数の詳細はドキュメントで確認できます。

Highcharts Class: Point

api.highcharts.com

ディレクトリ内の画像をコマンドラインで一括縮小する

Thu, 02 Aug 2018 06:57:47 +0900

mogrifyというコマンドを使います。

mogrifyはImageMagickに含まれるツールの一つでconvertとほぼ同じことができますが、mogrifyの場合は基本的に元画像がそのまま上書きされます。

ImageMagickが入っていない場合は適当に調べて入れてください。

% mogrify -geometry 50% input.jpg

のように使えます。↑の場合はinput.jpgを縦横半分のサイズに縮小できます。

他のオプションは詳しくは調べるとわかるんですが、ざっくり小さくしたいときにはこれで済むのでここでは割愛。

で、一括置換の方法です。僕の用途はiPhoneで撮った写真をブログに載せるためにサイズを落とすときに使います。iPhoneの写真は最近は4MBとかありますからそのまま載せると無駄が多いです。

まずはiPhoneで撮影した写真をAirDropでMacへ送ります。あとはコマンドラインでの操作ですね。

% cd ~/Downloads
% ls
IMG_1609.JPG IMG_1610.JPG IMG_1611.JPG IMG_1612.JPG IMG_1613.JPG IMG_8601.JPG IMG_9133.JPG
% ls | xargs mogrify -geometry 30%

これで30%のサイズに変わります。元が3024x3024の画像なら907x907の画像になるというわけ。

GUIのツールが要らないから楽でいいですね。

TestFlightでテスト情報の保存で何度も「問題が発生しました」エラーになった

Tue, 31 Jul 2018 06:14:02 +0900

TestFlightのベータ版審査に提出するために、事前準備として必要なテスト情報を入力しようとしたらエラーになりました。

テスト情報はAppStore ConnectのTestFlightのタブへ移動し、サイドメニューのテスト情報から入力ができるアレです。

ところがこのテスト情報、なんどやっても保存できない。保存できないのでベータ審査への提出ができません。（できませんよね？よく考えるとちゃんと確認してなかった。）

このようなエラーが出て、何がダメなのか全くわかりません。

この、サーバーエラーであるかのようなエラー。

結局サポートに問い合わせて何回かやりとりしてようやくわかったのは、入力した文字数が少ないのかもしれない、ということでした。

テスト情報には「ベータ版Appの説明」というテキストエリアがあります。ここに10文字以上入れてください、とのことでした（↓これ）。

う、確かに言われてみれば、とりあえずベータ審査に出したかったがために、テキトーな文字を打っていたような気が。ということで少し長くしたら無事保存できました。

Appleよ、ちゃんとバリデーションエラーぐらい表示してくれよ、という話でした。

fastlaneでTestFlightにアップロードするところまでをセットアップ

Mon, 30 Jul 2018 06:02:02 +0900

% bundle init
% echo 'gem "fastlane"' >> Gemfile
% bundle install
% fastlane init
[22:17:37]: What would you like to use fastlane for?
1. 📸 Automate screenshots
2. 👩‍✈️ Automate beta distribution to TestFlight
3. 🚀 Automate App Store distribution
4. 🛠 Manual setup - manually setup your project to automate your tasks
? 2
# 他にもいくつかの情報を入力
# fastlane/Appfile
# fastlane/Fastfile
# の2ファイルが作られる

Appfileはチームの情報などが入っています。Fastfileは実行したいタスクの内容が記述されています。おそらく次のようになっているはず。

1default_platform(:ios)
2
3platform :ios do
4 desc "Push a new beta build to TestFlight"
5 lane :beta do
6 build_app(workspace: "my-project.xcworkspace", scheme: "my-project")
7 upload_to_testflight
8 end
9end

ちなみに僕はbuild_appの前にincrement_build_numberを入れました。うっかり同じビルド番号で上げてしまうとエラーになって面倒だからです。

1lane :beta do
2 increment_build_number # <= これを追加
3 build_app(workspace: "my-project.xcworkspace", scheme: "my-project")
4 upload_to_testflight
5end

ちなみにincrement_build_numberを動かすために、Apple GenericなVersioningにする必要があります。

あとはコマンドラインで% fastlane betaと叩くと実行されます。

これでAppStoreConnectにビルドが登録されて、あとは輸出コンプライアンスをチェックすれば内部テスターに配布されるところまではいけました。このプロジェクトはまだ外部テスター向けのレビューが通っていないのでその先までは検証できていないです。

ホントは輸出コンプライアンスのチェックもパスできるといいんけど、その操作はできないようです。でも、Xcodeで操作すると待って操作して待って操作してになってしまうから、それに比べたらだいぶいいですね。

apache + passengerの環境でアンダースコア区切りのHTTPヘッダーが届かない

Sun, 29 Jul 2018 06:09:53 +0900

iOSアプリからリクエストヘッダーに情報を追加して送る、みたいなことをやろうとして少しはまりました。

受け取る人はRailsアプリです。ローカルで開発しているときには問題なかったのにAWS上のapache + passengerの環境にデプロイしたら当該ヘッダー情報が抜けてました。

環境依存っぽいのでapacheかpassengerを疑って色々調べていると、最終的には

Starting with version 2.4, Apache is more strict about how HTTP headers are converted to environment variables in mod_cgi and other modules: Previously any invalid characters in header names were simply translated to underscores. This allowed for some potential cross-site-scripting attacks via header injection (see Unusual Web Bugs, slide 19/20).

という、Apacheのドキュメントに到達。

Environment Variables in Apache httpd - Apache HTTP Server Version 2.5

httpd.apache.org

該当箇所をGoogle翻訳するとこんな感じ。

2.4より、Apacheはmod_cgiや他のモジュールでHTTPヘッダーを環境変数に変換する方が厳密です。以前はヘッダ名の無効な文字はすべて下線に変換されていました。これにより、ヘッダインジェクションによるいくつかのクロスサイトスクリプティング攻撃が可能になりました（Unusual Web Bugs、slide 19/20を参照）。

まあつまりアンダースコアが入ってるのはおかしいと判定するみたいですね。まさにアンダースコアをうっかり使っちゃってたのでRailsまで届いてないのは当然っちゃ当然だったわけです。

ちなみに、Rails側でちゃんとヘッダーが来ているかどうかを見るために↓のURLを参考にしてログに出力して確認しました。

Rails でリクエストの HTTP ヘッダを取得してログに出力する - xyk blog

環境：rails 4.2.0 Rails でリクエストの HTTP ヘッダはrequest.headersから取得できる。すべてログに出力するなら # すべてログに出力する request.headers.sort.map { |k, v| logger.info "#{k}:#{v}" } 個別に取得するなら # ユーザーエージェントを取得する request.headers[:HTTP_USER_AGENT] request.envからでも取得できる。 # ユーザーエージェントを取得する request.env['HTTP_USER_AGENT'] 今回やりたいことはクライアント側から …

xyk.hatenablog.com

1request.headers.sort.map { |k, v| Rails.logger.info "#{k}:#{v}" }

Swiftデバッグビルドでの最適化オプション

Sat, 28 Jul 2018 06:11:43 +0900

React Nativeで使うために高速フーリエ変換のためのコードをJSで書いていたんですが、色々とあってiOSネイティブで作り直してみるということがありました。

同様のコードをSwiftに移植して、さぞ速くなるだろうなーと思ったら激遅。JSだと1〜2秒ぐらいで終わっていた処理が6秒ぐらいかかるようになりました。

実際にはもっと大きいデータを扱いたいのですが、Swift版で動かしてみると5分〜10分程度かかってしまうという自体になりました。どれだけ実装悪いんだろう、と悩みました。

でもその前に、デバッグビルドであることを少し疑ってみました。きっと余計な情報が色々あるんだろうと。最適化したら速くなるだろう、と。

そこでXcodeでDebugビルド時の最適化オプションを元々の-Onone（No optimization）から-O（Optimize for Speed）に変えてみました。

そうしたら、6秒程度かかっていた処理が0.1秒で終わるように。

続いて本当に処理したいサイズのデータでもやってみると、10秒しないうちに処理が戻ってきてくれました。すばらしい。さすがにJSより遅いわけないもんね。

当初は実装に難ありかと思っていましたが、ひとまず実用に耐えうるレベルだということがわかったので方針を変えなくてよさそうです。

ちなみにSwiftでの時間測定はこちらの方法を参考にしました。

Swiftで重い処理の処理時間を測定する - Qiita

概要 Swiftでも、rubyのBenchmarkのように簡単に処理時間を計算するメソッドを書いた。このメソッドを使うと、アプリの速度改善に役立つ。 Benchmarkクラス Benchmark.swift import Foundation class Ben...

imageprocessing-labs/cv/fft at main · wellflat/imageprocessing-labs

JS書いていたFFTのコードはこちらを参考に書き直したものを使いました。今回のSwiftのコードはさらにそのJSを書き直したものです。

computer vision, image processing and machine learning on the web browser or node. - wellflat/imageprocessing-labs

Problem with open_buffer · Issue #177 · rubyzip/rubyzip

roo gemでxlsxファイルを読み込もうとしてundefined method `bytesize'

Fri, 27 Jul 2018 06:11:36 +0900

Rubyでxlsxファイルを読めるrooというgemでエクセルを読んでいる箇所がエラーになるようになりました。

しかもローカル環境のMacでのみ発生し、AWSのAmazonLinuxやUbuntu上では問題なく動くという罠っぷり。これのおかげでだいぶハマりました。

問題のはS3上に置いたエクセルをRubyで開こうとしたときで、コードはだいたいこんな感じでした。

1client = Aws::S3::Client.new(
2 region: region,
3 access_key_id: access_key,
4 secret_access_key: secret_access_ke,
5)
6
7file = client.get_object(bucket: bucket_name, key: 'file.xlsx')
8spreadsheet = Roo::Excelx.new(file.body) # <= エラー発生

最後の行で

undefined method `bytesize' for nil:NilClass

のエラーが発生しました。

ここのfile.bodyはStringIOで、S3のファイルの中身を読むためのストリームで、少しずつ読み出す途中でエラーになっているようです。

rooやrooが内部で使っているrubyzipの中に潜ってデバッグしたけどよくわからず、issueを見てもすんなりいかず困ってたんですが、同僚に相談してたらそれっぽいissueを見つけてくれました。

I'm getting undefined method bytesize' for nil:NilClass`using open_buffer. this code works: data = string_with_zip_file ::File.open('my_file.zip', "wb") {|f| f.write(data) } Zip::File.open('my_file...

GitHub - pi-chan/integration-sample-rails: Railsアプリケーションにdoorkeeper入れてiOSと連携できるようにするサンプルのRails側のコード

このURLのaalvaradoさんのコメントに↓のような記載がありまして、

1Roo::Excelx.new(StringIO.new(xlsx_report.file_data))

NoMethodError: undefined method `bytesize’ for nil:NilClass

まさに今回踏んでいる現象のように見えました。この方はset_encodingでアスキー指定したら直ったということです。

1Roo::Excelx.new(StringIO.new(xlsx_report.file_data).set_encoding('ASCII-8BIT'))

さて、自身のコードに戻って、file.bodyのエンコーディングを調べてみるとUTF-8だということがわかりました。

StackOverflowに倣って

1file.body.set_encoding('ASCII-8BIT')
2spreadsheet = Roo::Excelx.new(file.body)

とやってあげたら見事にエラーがなくなりました。このコードはLinux上でも問題なく動いたのでそのまま採用としました。

GitHubで依存Gemの脆弱性をチェック

Tue, 24 Jul 2018 06:59:38 +0900

だいぶ前からGitHubにて、プロジェクトが利用するGemfileの脆弱性を判定してくれるようになっています。

参考までに僕が2年以上前にコミットしたサンプルプロジェクトを見てみます。ちなみに脆弱性の情報は対象のリポジトリの権限をもっていないと表示されません。

対象のプロジェクトはこちら。

Railsアプリケーションにdoorkeeper入れてiOSと連携できるようにするサンプルのRails側のコード - pi-chan/integration-sample-rails

GitHub - textlint/textlint: textlint is the pluggable linter for natural language text.

ログインしている状態でこのプロジェクトを開くと警告が表示されている状態になっています。

Reviewを押すか「insights」のタブから進んでサイドメニューの「Dependency Graph」リンクをクリックすると、次のような画面となるはず。

さらにそこから下線部のリンクへ進むと

脆弱性のあるバージョンだと判定されているGemがハイライトされた状態で並んでいます。

これを解消するには対象のGemをアップグレードすれば良いので、bundle update xxxxxしてPushすれば解消します。もちろんライブラリのバージョンを上げることで副作用的に不具合が起こりうるので、複数のライブラリが対象になっている場合には注意が必要な場合があります。

なお、ログインしていない状態では次の画像のように警告は見えません。

文書を自動チェックするtextlintを日本語の技術ブログにも使おう

Mon, 23 Jul 2018 06:24:43 +0900

日本語にtextlintをかけると便利、という話をチラっと聞いたのでブログに応用すべく導入してみました。

まず、textlint自体がこちら。

textlint is the pluggable linter for natural language text. - textlint/textlint

GitHub - textlint-ja/textlint-rule-preset-ja-technical-writing: 技術文書向けのtextlintルールプリセット

そして、日本語技術文書用のルールプリセットがこちらです。

技術文書向けのtextlintルールプリセット. Contribute to textlint-ja/textlint-rule-preset-ja-technical-writing development by creating an account on GitHub.

React Nativeで画像のRGBA値を得る - PIYO Notes

ブログに応用するという観点で考えると、Hugoのルートディレクトリがよさそうです。

1% npm install textlint
2% npm install textlint-rule-preset-ja-technical-writing

としてtextlint本体とルールをインストールします。-gでインストールしなかったのはNetlifyで自動ビルドすることを想定したためです。

次のような形でファイルやディレクトリを指定して文書チェックが可能です。

1# ファイル指定
2% ./node_modules/textlint/bin/textlint.js ./content/posts/xxxxxx.md
3
4# ディレクトリ指定
5% ./node_modules/textlint/bin/textlint.js ./content/

試しにある日の投稿をチェックしてみると、

1% ./node_modules/textlint/bin/textlint.js ./content/posts/2018-07-21-codepush.md
2
3./content/posts/2018-07-21-codepush.md
4 18:15 error 弱い表現: "思います" が使われています。 preset-ja-technical-writing/ja-no-weak-phrase
5 26:16 error 二重否定: 〜ないことはない preset-ja-technical-writing/no-double-negative-ja
6 34:51 error 弱い表現: "思います" が使われています。 preset-ja-technical-writing/ja-no-weak-phrase
7 51:26 error 文末が"。"で終わっていません。 preset-ja-technical-writing/ja-no-mixed-period
8
9✖ 4 problems (4 errors, 0 warnings)

このようにエラーが出力されます。くせになっている表現なんかがみつかるのでとても良さそう。

全記事一気にチェックしたらどうなるのかなっとやってみたところ、だいぶ長いこと待たされ、こんな結果になりました。timeコマンドで時間を測ってやりましたとも。

1% time ./node_modules/textlint/bin/textlint.js ./content
2
3（略）
4
5✖ 2176 problems (2176 errors, 0 warnings)
6✓ 128 fixable problems.
7Try to run: $ textlint --fix [file]
8
9./node_modules/textlint/bin/textlint.js ./content 249.03s user 45.99s system 112% cpu 4:22.55 total

450近くのファイルを処理するのにトータルで6分ちょいかかり、2000を超える指摘がありました。この時間、この量を考えるとNetlifyでビルド前に確認するというのはあまり現実的ではなさそうです。

そうなると新しく追加する記事はチェックするとか、気が向いたときに少しずつ修正するというのが現実的な解になりそう。

ちなみに先程の出力を見てみると✓ 128 fixable problems.という表示が目に付きます。これは自動的に修復可能な問題箇所だということで、--fixオプションをつけると自動的に直してくれるようです。

早速実施してみましょう。

 1% ./node_modules/textlint/bin/textlint.js ./content --fix
 2
 3（略）
 4
 5 42:35 ✔ 一つ => 1つ
 6数量を表現し、数を数えられるものは算用数字を使用します。任意の数に置き換えても通用する語句がこれに該当します。 preset-ja-technical-writing/arabic-kanji-numbers
 7 24:53 ✔ "することができる機能"は冗長な表現です。"することが"を省き簡潔な表現にすると文章が明瞭になります。参考: http://qiita.com/takahi-i/items/a93dc2ff42af6b93f6e0 preset-ja-technical-writing/ja-no-redundant-expression
 8
 9（略）
10
11✔ Fixed 128 problems
12✖ Remaining 348 problems

どうもすることができるという表現を使ってしまいがちなようです。

textlintで細かい点を改善していきます。最後はこの記事にlintをかけてPush！

EasyImagyを使ってiOSでの画像の画素列を取得する

Sun, 22 Jul 2018 06:46:28 +0900

先日React NativeでやったことのiOSネイティブ実装版です。

React Native版はこれ↓

React Nativeで画像のRGBA値が欲しくて調べてたら react-native-image-tools というライブラリを見つけました。 https://github.com/Benjamin-Lin-X/react-native-image-tools かなり名前が近い別パッケージもあるので混同注意です。 1 % npm -i react-native-image-tool 2 % react-native link react-native-image-tool で導入できます。

GitHub - koher/swift-image: SwiftImage: an image library in Swift with Swifty APIs and value semantics

んで、Swift版なんですが、いい感じに実装してくれているEasyImagyというライブラリを見つけたのでこれを試してみました。

SwiftImage: an image library in Swift with Swifty APIs and value semantics - koher/swift-image

https://imgur.com/download/OSEiha9

日本の方っぽいですね。ありがたや。

お試し用の画像としては以下を使います。画素がはっきりしているのでわかりやすくて良いんです。

UIImageやDataなどを使ってインスタンスを初期化しうると画素を取れるようになります。

1// UIImageの場合
2image = Image<RGBA<UInt8>>(uiImage: imageView.image!)

各色の列を取り出してテキストに出力してみました。UITextViewを縦に4つ並べて雑に書き出しています。対象のViewController全体のコードは↓のようになりました。

 1import EasyImagy
 2
 3class EasyImagyViewController: UIViewController {
 4
 5 @IBOutlet weak var redText: UITextView!
 6 @IBOutlet weak var greenText: UITextView!
 7 @IBOutlet weak var blueText: UITextView!
 8 @IBOutlet weak var alphaText: UITextView!
 9
10 override func viewDidLoad() {
11 super.viewDidLoad()
12
13 let uiImage : UIImage = #imageLiteral(resourceName: "image")
14 let image = Image<RGBA<UInt8>>(uiImage: uiImage)
15 redText.text = "\(image.map { $0.redInt })"
16 greenText.text = "\(image.map { $0.greenInt })"
17 blueText.text = "\(image.map { $0.blueInt })"
18 alphaText.text = "\(image.map { $0.alphaInt })"
19 }
20}

結果このようになりました。各色のデータとわかるように色をつけています。最後はAlphaです。それぞれをIntで出しているので0〜255の範囲になっています。見た感じちゃんと取れていそうですね。

ソースはこちらに。

GitHub - pi-chan/ios-sandbox2

Contribute to pi-chan/ios-sandbox2 development by creating an account on GitHub.

7月14日に「SonicGarden Tech 2＠浜松」開催します - PIYO Notes

SGTechにて「CodePushでリリース楽しようぜ」的な話をしてきました

Sat, 21 Jul 2018 06:48:13 +0900

してきたというか、開催したというか、そんな感じです。

僕の住む浜松にてSonicGarden Techというイベントの第2回を開催します。今回はReact Nativeをテーマとしています。 ↓↓詳細や参加登録はこちらから↓↓ https://sonicgarden.connpass.com/event/87520/ テーマはReact Nativeですが、ソニックガーデンのメンバーとの交流も兼ねたイベントでもあります。社長はじめエンジニアが数人来て話す予定です。

地元浜松にてSonicGarden Techを開催しました - PIYO Notes

7/14に僕の住む浜松市でSonicGarden Techの第2回を開催し、僕自身も発表して来ました。React NativeがテーマということでCode Pushに関する話をしました。 React NativeのJSとNativeの関係 Code Pushの概要みたいな話をしています。そのときのスライドはこちらです。

Code Push is rejected by Apple again? · Issue #1297 · microsoft/react-native-code-push

↑の記事にも載せたスライドを再掲します。

見てもらえば概要はわかるかと思いますが、3行でまとめるとこんな感じ。

アプリ（っていうかiOS）のリリースがめんどい、ちょっとした変更を出すのが億劫
React NativeだとメインのJS部分がネイティブから独立してるから差し替えられる
差し替える仕組みとしてCode Pushってのがあるよ

実際に僕が開発しているアプリではちょっとした不具合修正とかレイアウトの調整みたいなものだけでなく、新しい機能のための1画面を追加するぐらいの勢いでCode Pushを使っています。

とはいえデメリットもないことはないので、今日はデメリットをちょっとだけ紹介します。

リジェクトの可能性がわずかながらある

これは当日話しました。codepushのIssueにあるように、リジェクトされたという声がときどきあるようです。

I submitted a new update to my app and it is rejected by the 2.5.2 guideline and section 3.3.2 agreement. In particular, they asked me to remove all the classes related to Code Push ... Does anyone...

GronG(グロング) フォームローラー筋膜リリースローラーヨガポール Foam Roller オレンジ

ですが、多くの人はそんなことないよと言っているようなので、これはあまり大きなデメリットにはならないと思います。

アプリを壊すことがある

Code Pushによるアプリ（JS）の更新が行われるのはアプリ起動後に非同期で行われます。その間にアプリの起動自体は動き続けますので、一旦起動したあと画面の読み直しが入るような動きになります。

（正確にいうと、Code Pushを使っても必ずこのようになるわけではありません。ユーザーに確認を求めたり、次の起動時まで反映しないというやり方も可能です。）

アプリが壊れるタイミングは、アプリが起動時の処理にバグを含むようなバージョンをCode Pushで配信してしまった場合です。

正常に起動するバージョンでアプリを起動する
裏でCode Pushによる更新が入る
アプリが読み直される
バグにより起動しない

となって起動しなくなります。

その後Code Pushで修正版を配信したとしても、

アプリを起動する
アプリが死ぬ
~~裏でCode Pushによる更新が入る~~

Code Pushの更新前にアプリが死ぬため永久にバグったままとなります。

こうなってしまうとネイティブビルドで配るほかありませんので、通常のネイティブアプリの更新と同じような手順でアップデートしなければなりません。

気軽に配れるのが仇になる例でした。

プライムデーで買ったフォームローラー（安い版）で筋膜リリース

Fri, 20 Jul 2018 06:12:15 +0900

腰痛肩こり対策のために予てから欲しかったフォームローラー。先日のプライムデーで正規品じゃないけど安いやつを見つけたので1個買いました。

今回買ったのがこれで、プライムデーで半額ぐらいになっていて、1000円以下で購入。

トリガーポイント(TRIGGERPOINT) グリッドフォームローラーストレッチローラーセルフケアリカバリー EVA素材高耐久スポーツデスクワーク対応

正規品だと5000円以上することが多いのでだいぶお買い得です。正規品の良さは当然あるでしょうけど、お値段が気軽じゃないのよね。

ちなみに正規品はこれ。微妙に凹凸の形は配置が異なります。

shogokoba.com →https://shogokoba.com/blog/archives/395

このローラーを使った筋膜リリースをする際にはこちらの記事を参考にしています。

パーソナルトレーナーをしている方が動画つきで紹介してくれています。そしてよく効きます。

一番オススメはこの腰痛予防の記事に書いてある中殿筋の筋膜リリースです。中殿筋は座るときに常に収縮しているので、デスクワークの人は大体硬いらしい。整体なんかに行ったときもこの場所をぐーっと押されることが多いです。ちょっと刺激強いけどテニスボールとかでも代用できるはず。おすすめです。

shogokoba.com →https://shogokoba.com/blog/archives/227

Railsでメールを配信する直前に処理を挟んで加工する方法

Thu, 19 Jul 2018 06:40:35 +0900

RailsGuideにも記述があるのですが、Railsでメールを送る前に任意の処理を挟む方法があります。

Action Mailer の基礎 - Railsガイド

Action Mailerを使ってメールを送受信する方法について解説します。

railsguides.jp

self.delivering_emailを定義したクラスを用意しておいて、ActionMailerに登録しておくと送信前に呼んでくれるようになります。登録するのはdelivering_emailに応答するクラスであればなんでもいいはずです。

1# ロードパスのどこか
2class HogehogeInterceptor
3 def self.delivering_email(message)
4 # 何かする
5 end
6end
7
8# initallizerのどこか
9ActionMailer::Base.register_interceptor(SandboxEmailInterceptor) if Rails.env.staging?

サブジェクトを加工する

引数に渡ってくるmessageはMail::Messageのインスタンスで、

subject
body
from
to

などの値を変更できます。

よくメールのサブジェクトに【サービス名】みたいなのをつけて、【サービス名】登録完了のお知らせとして送るようなケースがあるかと思います。

Interceptorではmessage.subjectを↓のように加工することで、

1class SubjectInterceptor
2 def self.delivering_email(message)
3 message.subject = "【サービス名】" + message.subject
4 end
5end

全てのメールに一括で挿入でき、メールが増えたときにも個別対応が要らないのでとても楽です。

メール送信をやめる

あまりない例になっちゃって申し訳ないですが、例えば夜間はメール送信しないみたいなことがもしかしたらあるかもしれません。ステージング環境とか。

そういった場合にはInteceptorにてmessage.perform_deliveriesをfalseにしてあげるとメールが送られなくなります。↓こんな感じ。

1class NightTimeInterceptor
2 def self.delivering_email(message)
3 hour = Time.current.hour
4 if hour < 8 || hour >= 20
5 message.perform_deliveries = false
6 end
7 end
8end

他にも活用できそうですけど、考えたのはこのぐらいです。

Webで複数選択するためのBootstrap Dual Listboxが便利

Wed, 18 Jul 2018 06:09:18 +0900

複数選択、通常のselectタグをmultipleにすれば選択可能ですが、あまりかっこよくないです。

1<select name="list" size="10" multiple>
2<option value="1">選択肢1</option>
3<option value="2">選択肢2</option>
4<option value="3">選択肢3</option>
5<option value="4">選択肢4</option>
6<option value="5">選択肢5</option>
7</select>

そこでDual Listboxです。

Bootstrap Dual Listbox

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.

www.virtuosoft.eu

こちらはBootstrapベースのコントロールで、左右に並んだリストがあって選択済みを右側のリストに入れていくようなコントロールです。

 1<select name="list2" id="duallistbox" size="10" multiple>
 2<option value="1">選択肢1</option>
 3<option value="2">選択肢2</option>
 4<option value="3">選択肢3</option>
 5<option value="4">選択肢4</option>
 6<option value="5">選択肢5</option>
 7</select>
 8
 9<script>
10$(document).ready(function(){
11 $("#duallistbox").bootstrapDualListbox({
12 });
13});
14</script>

右側が選択済みのリストです。通常のselectタグだとctrlやcmdを押しながらクリックしてないといけないですが、DualListboxだとクリックだけで追加削除ができます。

その他一括追加や絞り込みなどいろいろな機能を必要に応じて有効にできます。

iOSで画面表示されているUIViewをUIImageに変換する

Tue, 17 Jul 2018 06:06:35 +0900

iOSのUIをそのまま画像にする方法です。AVCaptureOutputで撮った写真と何かのViewを合成した画像を出したいみたいなときに使えます。

以下のコードでUIImageに変換ができます。ここでのViewは色々なSubviewなんかが入っている、画像として取り出したいViewです。

1func convertToUIImage(_ view: UIView) -> UIImage {
2 UIGraphicsBeginImageContext(view.bounds.size)
3 //UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0)
4 let context = UIGraphicsGetCurrentContext()!
5 view.layer.render(in: context)
6 let image = UIGraphicsGetImageFromCurrentImageContext()!
7 UIGraphicsEndImageContext()
8 return image
9}

ところが、これだと画面上のサイズそのままで出力されてしまいます。Retinaディスプレイなど解像度が高いディスプレイではその倍の情報があるにも関わらず半分になってしまいます。例えば画面上で300x300のViewであれば600x600の画像にできるはずなのですが、↑の書き方だと300x300になってしまう。

これだと勿体ないので少し変更します。UIGraphicsBeginImageContextするところを、UIGraphicsBeginImageContextWithOptionsを使ってスケールの指定をします。

1// Before
2// UIGraphicsBeginImageContext(view.bounds.size)
3
4// After
5UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0)

3番目の引数の0がスケールで、ここをゼロにすると端末のスクリーンに応じてスケールを変えてくれるそうです。

UIGraphicsBeginImageContextWithOptions(_:_:_:) | Apple Developer Documentation

Creates a bitmap-based graphics context with the specified options.

www.meetup-qa.com →http://www.meetup-qa.com/p/meetups/UX1hSg5uFQrsQbFtZX6YcpPF

If you specify a value of 0.0, the scale factor is set to the scale factor of the device’s main screen.

地元浜松にてSonicGarden Techを開催しました

Mon, 16 Jul 2018 06:36:47 +0900

7/14に僕の住む浜松市でSonicGarden Techの第2回を開催し、僕自身も発表して来ました。React NativeがテーマということでCode Pushに関する話をしました。

React NativeのJSとNativeの関係
Code Pushの概要

みたいな話をしています。そのときのスライドはこちらです。

詳細は気が向いたら別途書こうかなーと思います。

またこの勉強会では、前日から宿泊して行っていた社内ハッカソンで作った質問サイトを使って匿名で質問を受け付けられるようにしました。

発表者としてはフィードバックが何もないとつらい、質問する人にとっては質問するハードルが高い、初歩的だと思われることをききにくいという課題は勉強会におけるあるあるだと思います。質疑は誰かがまとめない限り残されないことが多いはず。そのあたりを解決するためにこのサイトを作りました。

まだまだ粗い部分が多いですが（OGPもないし）、少なくとも今回の勉強会ではよく使えていた気がします。

とはいえ、改善点も色々ありそうですね。

例えば質問に答えたはけど意図が合っているかどうかわからないことがありました。匿名とはいえ、場合によっては質問者の方を探して意図を確認したり、回答からさらに踏み込んだ議論ができるともっとよさそうです。

他に感じたのはTwitterが静かになることですね。皆さんQAのサイトに書いてくれるためダイレクトに反応がえられるのですが、せっかくのハッシュタグに投稿が少ないような気がしました。

というのはまたこれから考えていきます。

SonicGarden Techはこれからも開催予定です。次回のテーマはまだ決まっていませんが、メンバーがいるどこかの地方で実施するはずです。ウワサでは次回は福岡だとか、そうじゃないとか。奮ってご参加ください。

以下余談

今回の合宿は僕ともう一人のメンバーが夏ぐらいにハッカソンでもやろうという話から場所が決まり、他のメンバーも決まり、せっかく集まるなら勉強会でも開いて地域の人と交流しようということで、最終的には合宿→勉強会という流れになりました。

開発と観光を織り交ぜつつ、濃い時間を過ごせました。

さわやか
ハッカソン
温泉
うなぎ
勉強会
懇親会

特にソニックガーデンのメンバーを（静岡県民のソウルフードである）炭焼きハンバーグのさわやかに連れていけたので非常に満足です。

iOSのカメラでLightroomのように撮影条件を変更する

Sun, 15 Jul 2018 06:36:57 +0900

iOSのカメラというかAVFoundationにはAdobeのLightroomアプリのようにホワイトバランスやシャッタースピードなどをカスタマイズするAPIがあります。

ドキュメントを読んでみて難しい部分があったので整理しておこうと思います。

Lightroom

itunes.apple.com →https://itunes.apple.com/jp/app/adobe-lightroom-cc/id878783582?mt=8

LightroomのiPhone版では撮影時に微調整しながら撮影できます。

↑の矢印部分をタップしてプロに切り替える（元々はAuto）と、シャッタースピードやISO感度、ホワイトバランスを調整するコントロールが現れます。ここで色々いじると設定を変えられるわけですね。

iOSでの実装

ベース部分

AVFoundationのAVCapturePhotoOutputを使います。よくあるコードなので特に解説しませんが、こんな感じになりますよね。

deviceの設定をするconfigureDeviceというfunctionが最後にあります。今はオートフォーカスを有効にすることしかしていませんが、ここで色々設定を変更していきます。

 1import UIKit
 2import AVFoundation
 3
 4class CameraViewController: AppViewController {
 5
 6 let captureSession = AVCaptureSession()
 7 var photoOutput : AVCapturePhotoOutput!
 8
 9 override func viewDidLoad() {
10 super.viewDidLoad()
11 configure()
12 }
13
14 override func viewWillAppear(_ animated: Bool) {
15 captureSession.startRunning()
16 super.viewWillAppear(animated)
17 }
18
19 override func viewWillDisappear(_ animated: Bool) {
20 captureSession.stopRunning()
21 super.viewWillDisappear(animated)
22 }
23
24 private func getDevice() -> AVCaptureDevice? {
25 let discoverSession = AVCaptureDevice.DiscoverySession(deviceTypes: [.builtInDualCamera, .builtInTelephotoCamera, .builtInWideAngleCamera], mediaType: .video, position: .back)
26 return discoverSession.devices.first
27 }
28
29 private func configure() {
30 if let device = getDevice() {
31 do {
32 try device.lockForConfiguration()
33 self.configureDevice(device: device)
34 device.unlockForConfiguration()
35 } catch { print("error") }
36
37 do {
38 let input = try AVCaptureDeviceInput(device: device)
39 captureSession.addInput(input)
40 } catch { print("error") }
41
42
43 photoOutput = AVCapturePhotoOutput()
44 if captureSession.canAddOutput(photoOutput) {
45 captureSession.addOutput(photoOutput)
46
47 let captureVideoLayer: AVCaptureVideoPreviewLayer = AVCaptureVideoPreviewLayer.init(session: captureSession)
48 captureVideoLayer.frame = self.imageView.bounds
49 captureVideoLayer.videoGravity = .resizeAspectFill
50 self.imageView.layer.addSublayer(captureVideoLayer)
51 }
52 }
53 }
54
55 func configureDevice(device: AVCaptureDevice) {
56 if device.isFocusModeSupported(.continuousAutoFocus) {
57 device.focusMode = .continuousAutoFocus
58 }
59
60 // その他設定
61 }
62}

シャッタースピードとISO

AVCaptureDeviceのsetExposureModeCustomを使います。

setExposureModeCustom(duration:iso:completionHandler:) | Apple Developer Documentation

Sets the exposure mode to a custom state, and locks exposure duration and ISO at explicit values.

AVCaptureDevice.WhiteBalanceGains | Apple Developer Documentation

先程のconfigureDeviceに追記するとして、たとえばシャッタースピードを1/400、ISOを800にするのであれば↓のように設定できます。

1let shutterSpeed = CMTimeMake(1, 400)
2device.setExposureModeCustom(duration: shutterSpeed, iso: 800, completionHandler: nil)

ホワイトバランス

ホワイトバランスのほうは少々厄介でして、iOS側のAPIはWhiteBlanceGainsというstructを使用します。

A structure that defines RGB white balance gain values.

forestry.ioでHugoブログにCMS機能を一瞬で追加した - PIYO Notes

Lightroomのアプリにおけるホワイトバランスの設定は「蛍光灯」や「昼光」など、色温度ベースとなっています。そこで色温度などからWhiteBalanceGainsに変換する必要があります。

1let k = 6000 // 色温度
2let tint = -5 // -150.0〜+ 150.0の範囲のホワイトバランスの色合い値
3let values = AVCaptureDevice.WhiteBalanceTemperatureAndTintValues(temperature: k, tint: tint)
4let gains = device.deviceWhiteBalanceGains(for: values)
5device.setWhiteBalanceModeLocked(with: gains, completionHandler: nil)

まず、AVCaptureDevice.WhiteBalanceTemperatureAndTintValuesを色温度と色合いの値を使って初期化し、それを元にWhiteBalanceGainsにします。次にsetWhiteBalanceModeLockedによりホワイトバランスを設定します。

こちらは色温度だけでなくtintValueの影響もあるので欲しい設定にするには微調整が必要そう。

ともかくこれでよくやりそうな設定は変更できました。

forestry.ioのCMSでブログを修正したら公開日のタイムゾーンが変わってしまう

Sat, 14 Jul 2018 06:37:16 +0900

普段はPCで書いているブログですが、たまにスマホでチェックしてて誤字に気づくことがあります。そんなときはそのままスマホで修正できるようにforestry.ioのCMS機能を使います。

description Hugoのブログは手元で書いてNetlifyビルドしてNetlifyで配信しています。ちょっとしたした修正もPCが必要なのが不便だったのでCMS機能をforestry.ioで用意しました。

JesperLekland/react-native-svg-charts: 📈 One library to rule all charts for React Native 📊

これは便利で手軽で良いんですが、forestry側で修正すると公開日情報のタイムゾーンが変わってしまうという現象が起きていました。

だいたい朝7時頃公開するつもりで自動ビルドをかけていますので、ブログのメタデータには、

1date: 2018-07-14T07:00:00+09:00

のように書いてあります。このpostをforestryで修正した場合には

date: 2018-07-13 22:00:00 +0000

のように変わります。指し示す時刻は変わっていないもののタイムゾーンが変わっちゃうんですよね。これで何が起こるかというと、ブログの公開日が変わってしまいます。7/13の記事ですって出したいのに7/12と出てしまう。

なんか気持ち悪いので直したいと思いforestryの設定画面にいったらタイムゾーンの設定欄がありました。

ここで日本のタイムゾーンを選んでおけばおそらく問題ないでしょう。ちなみに、本来Tokyoを選べびたかったのですが、なぜかOsakaしか選べませんでした。

Chart.jsなどのWeb用のJSライブラリをReact Nativeで使う

Fri, 13 Jul 2018 06:18:33 +0900

React Nativeでチャート（グラフ）を描画するためのライブラリがいくつかあります。例えばこのへんとか↓

とはいうものの、できることが少なかったりなかなか思うようにいかないことがあったりします。

WebにもJSのチャート系ライブラリはいくつかあります。例えば有償のHighchartsなんかはかなり協力です。これから登場するChart.jsのようにMITライセンスのものもあります。

そういったWebのライブラリを使ったほうが案外良い結果になることもあるかも、という提言として今回の例を紹介してみます。

React NativeにはWebViewがあるため、Javascriptを有効にした状態で通常のWebと同じHTMLをレンダリングすることが可能です。そのHTML内でChart.jsをロードし、Webでのようにデータを登録することでグラフを描画できてしまいます。

ちょっと長いですが、まずコードから見てみます。

 1import React, { Component, PropTypes } from 'react'
 2import { View, WebView, Dimensions } from 'react-native'
 3
 4const { width } = Dimensions.get('window');
 5
 6export default class ChartView extends Component {
 7 chartHTML() {
 8 return `<html>
 9 <head>
10 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
11 <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
13 <script>
14 document.addEventListener("DOMContentLoaded", function() {
15 var ctx = document.getElementById("container").getContext('2d');
16 var myChart = new Chart(ctx, {
17 type: 'bar',
18 data: {
19 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
20 datasets: [{
21 label: '# of Votes',
22 data: [12, 19, 3, 5, 2, 3],
23 backgroundColor: [
24 'rgba(255, 99, 132, 0.2)',
25 'rgba(54, 162, 235, 0.2)',
26 'rgba(255, 206, 86, 0.2)',
27 'rgba(75, 192, 192, 0.2)',
28 'rgba(153, 102, 255, 0.2)',
29 'rgba(255, 159, 64, 0.2)'
30 ],
31 borderColor: [
32 'rgba(255,99,132,1)',
33 'rgba(54, 162, 235, 1)',
34 'rgba(255, 206, 86, 1)',
35 'rgba(75, 192, 192, 1)',
36 'rgba(153, 102, 255, 1)',
37 'rgba(255, 159, 64, 1)'
38 ],
39 borderWidth: 1
40 }]
41 },
42 options: {
43 scales: {
44 yAxes: [{
45 ticks: {
46 beginAtZero:true
47 }
48 }]
49 }
50 }
51 });
52 });
53 </script>
54 </head>
55 <body>
56 <canvas id="container" width="${width}" height="${width}" />
57 </body>
58 </html>`
59 }
60
61 render() {
62 const html = this.chartHTML();
63 return (
64 <View style={this.props.style}>
65 <WebView
66 style={{flex: 1, backgroundColor: 'transparent'}}
67 source={{ html: html, baseUrl: 'web/' }}
68 originWhitelist={['*']}
69 javaScriptEnabled
70 domStorageEnabled
71 scalesPageToFit
72 scrollEnabled={false}
73 automaticallyAdjustContentInsets
74 />
75 </View>
76 )
77 }
78}

render()では実質的にWebViewしかありません。そこでsourceプロパティにhtml文字列を渡します。中身はchartHTML()に書いてあります。

<body>の中に<canvas>が1個だけあり、<script>に描画内容が書いてあるという感じです。割と力技です。

中身はこちらのドキュメントのサンプルをそのまま転載しています。

Chart.js | Chart.js

Open source HTML5 Charts for your website

www.chartjs.org

で、画面はというと次のようになります。

タップ操作で自然に反応してくれるため思ったより使い勝手が良いです。

ただし、今のコードはCDNからライブラリを読むためネットワークが必要です。オフラインでも使えるようなアプリにする場合はライブラリのコードをなんとかしてアプリに入れておく必要があるので工夫が必要のはず。うまくいかない可能性もありそう。未検証です。

canvasに描画するようなタイプのライブラリを使いたいような場合には案外現実的な選択肢にしてもいいのではないかと個人的には思います。

React NativeでMarkdownを表示する方法をいくつか比較してみた

Thu, 12 Jul 2018 06:31:02 +0900

GitHubのようにMarkdownが書けるようなサイトが増えています。僕の働いているソニックガーデンが使っているオフィスツールRemottyでもMarkdownのような記法を一部サポートしています。

WebでMarkdownを扱うにはMarkdown形式の文字列をサーバーサイドなりクライアントサイドでHTML化して表示するだけなのでとても簡単です。また、ただのHTMLなのでCSSにより見た目もかなり柔軟に変えることができます。

ではReact Nativeアプリではどうしたらいいだろうか、というのが最近の課題です。実はRemottyのモバイルアプリでちょっとしたマークダウン的なものをどのように表示すべきなのかというのは悩んでいて、現状では開発した当時一番マシかなと思ったものを使っています。

Markdownを表示するためにライブラリ（または標準コンポーネント）を使います。使い方には大きく2通りあって、Markdown文字列のまま処理してくれるものと一度HTMLに変換してHTMLをレンダリングするものとがあります。さらに内部実装でHTMLを表示できるWebViewを使っているのかMarkdownからHTMLにして、そのHTMLの構文解析をしてコンポーネント化しているのか、という分類もできそうです。

ライブラリはこのあたりで検索します。また、Googleでも色々と検索してヒットしたものを使ってみました。

GitHub - jondot/awesome-react-native: Awesome React Native components, news, tools, and learning material!

Awesome React Native components, news, tools, and learning material! - jondot/awesome-react-native

GitHub - CharlesMangwa/react-native-simple-markdown: 📜 React Native Markdown component (iOS & Android).

今日は以下の6種類を比較してみます。と言ってもメンテされていなくて最新のRNでは動かないものもあります。一部手元で手直しすれば動いたものもあるので補足しつつ書いてみます。

Markdownで渡す系
HTMLで渡す系

前提

Markdownのサンプルとして、いくつかの要素を含んだ次のようなものを考えます。

 1const markdown = `
 2# 見出し
 3
 4- 箇条書き
 5 - 入れ子
 6 - 入れ子
 7- 箇条書き
 8- 箇条書き
 9
10[Google](https://www.google.co.jp/)
11
12> 引用
13
14**太字太字**
15
16![画像](https://blog.piyo.tech/images/prof.png)
17`;

せめてこのぐらいはちゃんと表示してほしいなという気持ちで例文を作りました。

また、HTMLを受け取るコンポーネントがあるため、このMarkdown文字列をmarkedライブラリに食わせてHTML化します。

1const html = marked(markdown);

ライブラリの使い方は全部シンプルなのでドキュメントをみてくれれば大丈夫です。特に紹介しません。

また、各ライブラリはそれぞれスタイルの調整はある程度できそうですが、一旦は何も指定しない状態で試しています。

Markdownで渡す系

react-native-simple-markdown

📜 React Native Markdown component (iOS & Android). - CharlesMangwa/react-native-simple-markdown

GitHub - christoph-jerolimov/react-native-showdown: React-native component which renders markdown into a webview!

コードが古いせいか使えませんでした。残念。

react-native-showdown

React-native component which renders markdown into a webview! - christoph-jerolimov/react-native-showdown

GitHub - mientjan/react-native-markdown-renderer: React Native 100% compatible CommonMark renderer

こちらは実はそのままでは警告により正しく描画されません。内部的にReact NativeのWebViewが使われています。最近のWebViewはHTML文字列を使う際にはoriginWhitelist={\\\['\\\*'\\\]}というプロパティが必要になったため、警告が出ていました。

その箇所を（行儀が悪いですが）ローカルで修正し実行したのがこちらです。

react-native-markdown-renderer

React Native 100% compatible CommonMark renderer. Contribute to mientjan/react-native-markdown-renderer development by creating an account on GitHub.

GitHub - jsdf/react-native-htmlview: A React Native component which renders HTML content as native views

こちらはMarkdownを一度HTMLにパースした後、HTMLのツリー構造を解釈して適切なReact Nativeコンポーネントに置き換えるようなことを（どうやら）やってくれているように見えます。

例えばこのようなコードがあり、linkはスタイル付きのテキストのようなルール付がされています。

1 // a
2 link: (node, children, parent, styles) => {
3 return (
4 <Text key={node.key} style={styles.link} onPress={() => openUrl(node.attributes.href)}>
5 {children}
6 </Text>
7 );
8 },

HTMLで渡す系

react-native-htmlview

A React Native component which renders HTML content as native views - jsdf/react-native-htmlview

GitHub - iou90/react-native-autoheight-webview: An auto height webview for React Native

こちらが現状のRemottyで使っているライブラリです。MarkdownをHTMLにしたあとでReactNativeコンポーネントにするというのは変わらないですが、liの入れ子などが考慮されていないため残念な見た目になります。

react-native-autoheight-webview

An auto height webview for React Native. Contribute to iou90/react-native-autoheight-webview development by creating an account on GitHub.

facebook.github.io →https://facebook.github.io/react-native/docs/webview.html

こちらは内部でWebViewを使っており、react-native-showdownと同様originWhitelist={\\\['\\\*'\\\]}が必要でした。画像がはみ出るものの比較的いい感じで表示できました。高さを開発者が指定しなくていいのが良いです。

WebView

標準のコンポーネントでも試しました。高さ指定が必要で無指定だと何もヒョ時されません。コンテンツが色々動的に変わるんだとしたら実際に使うのはなかなかに大変そうです。

結論

ここまで比較してみて、今使っているreact-native-htmlviewは相当イケてないなということがわかりましたので、早急に対応すべきな気がしてきましたｗ

React Nativeのコンポーネントに直してくれるreact-native-markdown-rendererが良さそうだなという感覚がありますね。うまくコンポーネントにしてくれるならレイアウトが楽になりそうです。

それで難しいのであれば、次点はreact-native-autoheight-webviewでしょうか。MarkdownがHTMLを書くための記法だと思えばWebViewに表示を任せるのは悪くない選択肢かと思います。こちらは速度に課題があるかもしれません。

今回試すにあたり作ったサンプルアプリをGitHubに上げておきました。

GitHub - pi-chan/ReactNativeMarkdownSample

Contribute to pi-chan/ReactNativeMarkdownSample development by creating an account on GitHub.

GitHub - mattlawer/FaceLandmarksDetection: Finds facial features such as face contour, eyes, mouth and nose in an image.

High Sierraでスリープ明けにWi-Fiがオフになっている問題が発生

Wed, 11 Jul 2018 06:54:20 +0900

2018/07/10時点で最新のmacOS High Sierraでスリープ明けにWi-Fiがオフになっている現象に遭遇しました。こうなってしまうとAppleWatchによるスリープの解除ができず、想像しているよりも不便でした。

High Sierraがリリースされたばかりの頃にスリープ明けにWi-Fiが切断する現象があるという話をよく見かけました。今回はWi-Fiがオフになっているのでそれとは違うのかな、どうしようかなと数日困っていました。

再起動で直った

結果的には再起動で直りました。ドライバか何かの状態がおかしかったんでしょうか。もっと早いとこ基本の再起動に立ち戻ればよかったです。

iOSのVisionフレームワークで顔のパーツ認識を試せるサンプルアプリ

Tue, 10 Jul 2018 06:57:34 +0900

iOS11から使えるようになったVisionフレームワークというのを使うとものすごく簡単に顔認識が可能です。裏ではCoreMLが使われているということで機械学習ベースの顔認識のようです。

ちょっと動かしてみようと思ったときに最適なサンプルアプリケーションをGitHubで見つけましたので紹介しておきます。おかげで同じようなことを実施するアプリを作るときの参考になりました。

それがこちらです。

Finds facial features such as face contour, eyes, mouth and nose in an image. - mattlawer/FaceLandmarksDetection

AVCaptureOutputで撮影した写真のimageOrientationを修正する - PIYO Notes

昨日UIImageのところでちょろっと触れた件でもあります。

AVCaptureOutputで撮影した写真は UIImageView に表示したり本体のフォトアルバムに保存する限りは問題ないのですが、別のソフトウェアやライブラリが向きを正しく解釈してくれなくてうまくいかないというケースが起こります。

FaceLandmarksDetection/FaceLandmarksDetector.swift

このリポジトリをcloneして手元で動かせばすぐに試すことができます。

重要なのはこちらのファイル↓です。

↑このファイルで定義されているクラスが、画像を受け取って顔認識にかけ認識結果を書き込んだ画像にして呼び出し元に返す、という処理をしています。この手の処理は座標合わせが往々にして面倒なのですが、ちゃんと考慮してくれているので変にハマらなくて済みます。

余談ですが元々3D系の仕事をしてたので計算できないわけじゃないけど、あまり得意ではない（直感的に理解できない）のでできれば避けたいのです。

というわけで顔認識をやりたい場合はこういったサンプルコードから習得していくのも良いんじゃないかなと思いました。

認識にはVNDetectFaceLandmarksRequestというクラスを使うので、GitHub上でこのクラスを検索すると他の例も見つかりそう。

Search · VNDetectFaceLandmarksRequest

AVCaptureOutputで撮影した写真のimageOrientationを修正する

Mon, 09 Jul 2018 06:59:56 +0900

AVCaptureOutputで撮影した写真はUIImageViewに表示したり本体のフォトアルバムに保存する限りは問題ないのですが、別のソフトウェアやライブラリが向きを正しく解釈してくれなくてうまくいかないというケースが起こります。

↓は典型的なAVFoundationを用いた写真撮影のコードです。だいぶ端折って書いてますが、だいたいこんな感じになるはずです。ボタンを押すと写真を撮影できるというイメージです。

 1class CameraViewController : UIViewController {
 2 var photoOutput : AVCapturePhotoOutput!
 3
 4 override func viewDidLoad() {
 5 super.viewDidLoad()
 6
 7 // カメラ色々
 8 configureDevice()
 9 }
10
11 // 撮影ボタン
12 @IBAction func takePhoto(_ sender: Any) {
13 let settingsForMonitoring = AVCapturePhotoSettings()
14 settingsForMonitoring.isAutoStillImageStabilizationEnabled = true
15 photoOutput?.capturePhoto(with: settingsForMonitoring, delegate: self)
16 }
17}
18
19extension CameraViewController : AVCapturePhotoCaptureDelegate {
20 func photoOutput(_ output: AVCapturePhotoOutput, didFinishProcessingPhoto photo: AVCapturePhoto, error: Error?) {
21 let imageData = photo.fileDataRepresentation()
22 let image = UIImage(data: imageData!)
23 // imageのimageOrientationは .right
24 }
25}

didFinishProcessingPhotoの中で撮影結果がえられるので、Dataを経由してUIImageにしています。

これをUIImageViewに設定したりアルバムに保存したりしても画像の向きの問題は起こりません。

僕が気がついたのは、iOSで使えるVisionフレームワークを使った顔認識機能に画像を渡したときです。AVCapturePhotoOutputから得られたUIImageを使って顔認識をしようとしたところ、まっすぐ撮影した画像ではだめで、90度横にした場合に顔認識の結果が描画（目の位置や口の位置などのマーク）されたのです。

詳細は今度紹介しますが、コードは↓のようなイメージです。

 1import Vision
 2
 3class FaceLandmarksDetector {
 4 open func highlightFaces(for source: UIImage, complete: @escaping (UIImage) -> Void) {
 5 var resultImage = source
 6 let detectFaceRequest = VNDetectFaceLandmarksRequest { (request, error) in
 7 // 略
 8 complete(resultImage)
 9 }
10
11 let vnImage = VNImageRequestHandler(cgImage: source.cgImage!, options: [:])
12 try? vnImage.perform([detectFaceRequest])
13 }
14}

顔認識の詳細はさておき、考えられるのはimageOrientationが考慮されていないということです。imageOrientationが.upの状態で正しい向きになっている写真にしてから顔認識にかける必要が、どうやらありそうです。

現在のimageOrientationを元に元画像を回転させたうえで、新しいimageOrientationを.upとして画像を再生成するような対応をすれば解決しそうです。

その手のコードはしっかり書こうとすると大変なんですが、同じようなことで困っている人はたくさんいるはずなので色々探してみたら良い感じのGistのコードを見つけました。

Extension to fix orientation of an UIImage (Sets orientation to portrait)

Extension to fix orientation of an UIImage (Sets orientation to portrait) - UIImageFixedOrientationExtension.swift

gist.github.com

このリンク先のGistにSwift 4 tested ( + handled some cases)というバージョンがあり、読んだ感じちゃんと動きそうだったので使ってみました。これによって無事顔認識が動いてくれました。

以下フルバージョンです。

 1extension UIImage {
 2
 3 func fixedOrientation() -> UIImage? {
 4
 5 guard imageOrientation != UIImageOrientation.up else {
 6 //This is default orientation, don't need to do anything
 7 return self.copy() as? UIImage
 8 }
 9
10 guard let cgImage = self.cgImage else {
11 //CGImage is not available
12 return nil
13 }
14
15 guard let colorSpace = cgImage.colorSpace, let ctx = CGContext(data: nil, width: Int(size.width), height: Int(size.height), bitsPerComponent: cgImage.bitsPerComponent, bytesPerRow: 0, space: colorSpace, bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue) else {
16 return nil //Not able to create CGContext
17 }
18
19 var transform: CGAffineTransform = CGAffineTransform.identity
20
21 switch imageOrientation {
22 case .down, .downMirrored:
23 transform = transform.translatedBy(x: size.width, y: size.height)
24 transform = transform.rotated(by: CGFloat.pi)
25 break
26 case .left, .leftMirrored:
27 transform = transform.translatedBy(x: size.width, y: 0)
28 transform = transform.rotated(by: CGFloat.pi / 2.0)
29 break
30 case .right, .rightMirrored:
31 transform = transform.translatedBy(x: 0, y: size.height)
32 transform = transform.rotated(by: CGFloat.pi / -2.0)
33 break
34 case .up, .upMirrored:
35 break
36 }
37
38 //Flip image one more time if needed to, this is to prevent flipped image
39 switch imageOrientation {
40 case .upMirrored, .downMirrored:
41 transform.translatedBy(x: size.width, y: 0)
42 transform.scaledBy(x: -1, y: 1)
43 break
44 case .leftMirrored, .rightMirrored:
45 transform.translatedBy(x: size.height, y: 0)
46 transform.scaledBy(x: -1, y: 1)
47 case .up, .down, .left, .right:
48 break
49 }
50
51 ctx.concatenate(transform)
52
53 switch imageOrientation {
54 case .left, .leftMirrored, .right, .rightMirrored:
55 ctx.draw(self.cgImage!, in: CGRect(x: 0, y: 0, width: size.height, height: size.width))
56 default:
57 ctx.draw(self.cgImage!, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
58 break
59 }
60
61 guard let newCGImage = ctx.makeImage() else { return nil }
62 return UIImage.init(cgImage: newCGImage, scale: 1, orientation: .up)
63 }
64}

自作SegueでViewControllerをdismissする

Sun, 08 Jul 2018 06:39:31 +0900

いやー、7年iOSやってても全然しらなかったんですが、Segueを自作するとちょっと便利ですね。

モーダルで開いたViewControllerを閉じるときにボタンを置いてコードを書くのは面倒だなーと思ってたんですが、閉じるボタンの操作をSegueで定義できます。

準備としてUIStoryboardSegueを継承したサブクラスをプロジェクト内に作っておきます。

1class DismissControllerSegue: UIStoryboardSegue {
2 override func perform() {
3 self.source.dismiss(animated: true, completion: nil)
4 }
5}

コードはシンプルでperform()の中にやりたいことを書く形。今回は自分自身をdismissするだけです。

ここまででstoryboardが参照してくれるようになっていますので、あとはボタンと紐付けるだけです。controlキーを押したままボタンからViewController自身にドラッグすると↓のようなpopoverみたいなのが出ます。

ここで、先程追加したSegueを表すdismiss controllerを選べばOK。ボタンタップ時に自身が閉じてくれます。

ローカル環境に公開URLを紐付けられるngrokの有料登録しました

Fri, 06 Jul 2018 06:41:19 +0900

先日紹介したngrokにお金を払って使うことにしました。

ローカル環境をインターネットに公開できるngrokのユースケース - PIYO Notes

ngrokというサービスがあります。僕は無料で簡易に使ったことしかないのでその範囲内の話しかできないですが、ユースケースを紹介したいと思います。まず使い方はとても簡単。 1 % brew cask install ngrok 2 % ngrok http 3000 # ポート番号これで、 xxxxxxx.ngrok.com みたいなURLが発行されます。このURLにアクセスするとローカルマシンの3000番ポートにリクエストが飛んできます。

GitHub - vikmeup/SCLAlertView-Swift: Beautiful animated Alert View. Written in Swift

無料ユーザーだと毎回ランダムに生成される公開URLを使うことしかできません。この公開URLは12時間しか有効ではないため、毎日発行し直しが必要です。

当然そのURLを参照している箇所は修正が必要となるため、毎日1〜2分の手間がかかります。

これまではたまにしか必要ではなかったのですが、最近はWebサーバーにつなぐiPhoneアプリの実機デバッグのためによく使っていますので有料プランを使ってしまえばいいのでは？と思うようになりました。

一番安い有料プランでは予めドメインを3つまで予約しておくことができ、それらを自分専用で使えます。年間60ドルでした。

コマンドラインの認証

ユーザー登録した時点で認証用のトークンが発行されます。コマンドラインをアカウントと紐付けるのはフリーでもいけます。

ドメインの登録

Webのダッシュボードから登録が可能です。

Regionとして↓が選べます。日本からはAsia Pacificを選んどくと速度的にちょっと速いんだと思われます。

Europe
Asia Pacific
Australia
United States

画像をみてもらうとわかりますが、United Statesを選んだときはFQDNにリージョンが含まれまず、その他の場合はapやeuなどが挟まれるようになります。

コマンド実行

リージョンをUS以外にした場合にはngrokコマンドを起動する際にリージョン指定が必要になります。サブドメインのしても合わせると次のようになります。

1% ngrok http 3000 -subdomain=mydomain -region=ap

とまあこんな感じで固定のドメインをゲットしたのでソースコードを毎度変更する必要がなくなりました。めでたい。

MacのQuickTime Playerの再生速度を微調整する

Thu, 05 Jul 2018 06:20:54 +0900

MacのQuickTime Playerで再生速度を微調整できます。社内のMTG動画なんかを動画で共有してもらうときに1.4倍速ぐらいで再生すると時短できけて便利です。

早送りボタンをクリックすると1x、2x、5x, 10x, 30x, 60xの6段階で変更できますが、こちらは早送りするだけで音声は再生できません。

微調整の場合は音声を再生できます。方法はoptionキーを押しながら早送りボタンをクリックです。

React Nativeでいつjsがbundleされるのか調べた

Wed, 04 Jul 2018 06:08:48 +0900

React NativeのアプリにはJS層とNative層があり、ビルドは別々に行われます。基本的にネイティブでビルドするときには最新のJS bundleに変更したいはずなので、同時にjs bundleも行われます。

iOS

iOSではあらかじめXcodeのBuild Phaseに組み込まれているため、リリースビルドする際には自動的にmain.jsbundleというファイルが事前に作られた上で、これを同梱する形でビルドが行われます。

Xcodeで指定しているシェルスクリプト、node_modules/react-native/scripts/react-native-xcode.shを見るとreact-nativeのCLIコマンドでjsbundleを作っていることがわかります。

Android

androidの場合はnode_modules/react-native/react.gradleにコマンド呼び出しの記載があります。

1def currentBundleTask = tasks.create(
2 name: bundleJsAndAssetsTaskName,
3 type: Exec) {
4 // 略
5 commandLine(*nodeExecutableAndArgs, cliPath, "bundle", "--platform", "android", "--dev", "${devEnabled}", "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraPackagerArgs)
6
7 enabled config."bundleIn${targetName}" || config."bundleIn${buildTypeName.capitalize()}" ?: targetName.toLowerCase().contains("release")
8}

app/build.gradle側の設定もしくはreleaseビルドの際にbundleが作られるようです。

という、ビルド周りのコードをちょっと読んだよという話でした。

iOSでいい感じのアラートをサクッと出す

Tue, 03 Jul 2018 06:13:40 +0900

SCLAlertView-Swiftがサクッと使うのにいい感じです。

Beautiful animated Alert View. Written in Swift. Contribute to vikmeup/SCLAlertView-Swift development by creating an account on GitHub.

更に大体いい感じになるkeynoteテンプレート「Azusa Colors」作った - MEMOGRAPHIX

簡単ですが、使用例です。サンプルアプリにボタン3つおいておきます。

showSuccessで成功時のアラートが、showErrorでエラーじのアラートがそれぞれ出せます。他にも

showWarning
showInfo
showNotice

があります。

showSuccess

1@IBAction func showSuccess(_ sender: Any) {
2 SCLAlertView().showSuccess("サクセス", subTitle: "保存しました", closeButtonTitle: "閉じる")
3}

showError

closeButtonTitleを指定しないとボタンのラベルはDoneとなります。

1@IBAction func showError(_ sender: Any) {
2 SCLAlertView().showError("エラー", subTitle: "")
3}

独自ボタン

独自のボタンを追加して個別の処理を割り当てることができます。closeボタンには直接処理を割り当てられないので、何もせずに閉じる用途がない場合にはshowCloseButton: falseなapperanceを使ってアラートを生成します。

 1@IBAction func showConfirm(_ sender: Any) {
 2 let appearance = SCLAlertView.SCLAppearance(
 3 showCloseButton: false
 4 )
 5 let alert = SCLAlertView(appearance: appearance)
 6 alert.addButton("Cancel") {
 7 print("cancel")
 8 }
 9 alert.addButton("OK") {
10 print("ok")
11 }
12 alert.showInfo("確認", subTitle: "よろしいですか？")
13}

「更に大体いい感じになるKeynoteテンプレート」Azusa Colorsオススメ

Sat, 30 Jun 2018 06:10:46 +0900

今更ですが、Azusa ColorsっていうKeynoteのテンプレートがお気に入りです。元々はAzusaだったんですが、ずいぶん前に色が増えました。

更に大体いい感じになるkeynoteテンプレート「Azusa Colors」作ったいい感じのスライド、作るのむずいので、「Azusa Colors」っていうKeynoteテンプレートを作った。下記のサイトからダウンロードできる。 • Azusa Colors - 大体いい感じになるKeynoteテンプレート解説 [[MORE]] デモも兼ねた解説スライドを作った。 • Introducing...

memo.sanographix.net

（↑のリンクからお借りしています）

どうしても青系統が好きなので右上のBlueや左下のCyanを使うことが多いです（そもそもあまり作ることないけど）

という、自分の好きなものを紹介するだけの記事でした。

json-serverでjsonに書いたデータを返すモックサーバーを立てる

Fri, 29 Jun 2018 06:09:48 +0900

サーバーサイドの実装がまだないときとか環境設定が面倒なとき、クライアントサイドでWebリクエストを投げるコードをそれっぽく書いて試したいみたいなケースで、json-serverというJSのツールが便利でした。

僕の場合はwebページ上でXHRを投げる部分を試したくてjson-serverを使いました。

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Get a full fake REST API with zero coding in less than 30 seconds (seriously) - typicode/json-server

blog.piyo.tech →https://blog.piyo.tech/posts/2018-06-08-postman/

そのときはあまり気づかなかったですが、Star数えぐいですね。3万超えです。

コマンドベースのツールで、npmで入れます。

% npm install -g json-server

jsonファイルを指定して起動します。

% json-server --watch db.json

中身はリクエスト時に返すための情報が書かれてします。

1{
2 "posts": [
3 { "id": 1, "title": "json-server", "author": "typicode" }
4 ],
5 "comments": [
6 { "id": 1, "body": "some comment", "postId": 1 }
7 ],
8 "profile": { "name": "typicode" }
9}

こんへんはドキュメントをみればすぐにわかります。

で、いいなーと思ったのは、サーバーを起動したときです。標準出力に↓のような情報がでています。

ResourcesというところにURLがリストされていますね。ここで有効なURLをパッと確認できるので例えばブラウザで叩くなり、curlコマンドで試すなり、クライアントサイドのアプリから試すなりと色々な使い方ができます。

 1% json-server --watch db.json
 2
 3 \{^_^}/ hi!
 4
 5 Loading db2.json
 6 Done
 7
 8 Resources
 9 http://localhost:3000/posts
10 http://localhost:3000/comments
11 http://localhost:3000/profile
12
13 Home
14 http://localhost:3000
15
16 Type s + enter at any time to create a snapshot of the database
17 Watching...
18
19GET /posts/ 200 8.440 ms - 77
20GET /posts/1 200 4.913 ms - 63
21GET /posts/2 404 3.118 ms - 2
22GET /profile 200 2.962 ms - 24

また、GET以外のリクエストにも対応しています。まずはPOSTを試してみます。（リクエストを組み立てるのにPostmanを使いました）

http://localhost:3000/postsに次のようなjsonをPOSTしました。

1{
2 "id": 2,
3 "title": "added by post request",
4 "author": "hiro"
5}

するとコンソールにはこのようなログが流れ→POST /posts 201 53.069 ms - 69、元ファイルにはid=2のpostが登録されています。

 1{
 2 "posts": [
 3 {
 4 "id": 1,
 5 "title": "json-server",
 6 "author": "typicode"
 7 },
 8 {
 9 "id": 2,
10 "title": "added by post request",
11 "author": "hiro"
12 }
13 ],
14 "comments": [
15 {
16 "id": 1,
17 "body": "some comment",
18 "postId": 1
19 }
20 ],
21 "profile": {
22 "name": "typicode"
23 }
24}

http://localhost:3000/posts/2にDELETEを投げたところ先程追加されたid=2のpostが削除されます。

というような感じでサーバーサイドがなくても、リクエストを投げて返ってくるような簡易なサーバーを一瞬で立てられます。ダミーでいいから誰かにリクエストを投げて動きを確認したいみたいなときに重宝するのではないかと思います。

7月14日に「SonicGarden Tech 2＠浜松」開催します

Thu, 28 Jun 2018 06:11:58 +0900

僕の住む浜松にてSonicGarden Techというイベントの第2回を開催します。今回はReact Nativeをテーマとしています。

↓↓詳細や参加登録はこちらから↓↓

React Nativeを学ぶ！〜 SonicGarden Tech #2 浜松 (2018/07/14 14:00〜)

## What's SonicGarden Tech SonicGarden Techは、ソニックガーデンが全国で働くメンバーと交流する目的も兼ねた技術勉強会です。今回のテーマは、React Native。 React NativeとはFacebookが中心となって開発しているネイティブアプリのためのフレームワークです。 Reactには「Learn once, Write anywhere(一度学べば、どこでも書ける)」という思想があり、React NativeはReactで学んだ知識を活かして、iOS, Androidなど異なるプラットフォームで...

sonicgarden.connpass.com

テーマはReact Nativeですが、ソニックガーデンのメンバーとの交流も兼ねたイベントでもあります。社長はじめエンジニアが数人来て話す予定です。

ソニックガーデンのことを聞いたことあるよという人や、RubyとかWebとかスマホアプリやってるよーみたいな人はReact Nativeのことをあまり知らなくても大丈夫なのでぜひ参加してください〜！懇親会もあります。

ちなみに、前回は岡山県にてPWAをテーマに開催しました。

SonicGarden Tech #1 岡山 - connpass

MacのChromeでAmazonの領収書印刷がおかしい

Wed, 27 Jun 2018 06:24:03 +0900

記憶がちょっと曖昧ですが、少なくともここ1ヶ月ぐらいAmazonの領収書の印刷（PDF出力）がMacのChromeでおかしいようです。Windowsは未確認です。

Chrome

Safari

ブラウザを変えたらうまくいきました。

rails-ujsのdata-confirmを自前のダイアログに置き換える

Tue, 26 Jun 2018 06:44:16 +0000

Railsではリンクやフォームに簡単に確認ダイアログを出すための記法があります。aタグやinputタグなどにdata-confirm="よろしいですか？"みたいにするやつですね。

1<%= link_to 'delete', item_path(item), data: { confirm: 'are you sure?' } %>

これをするとブラウザの確認ダイアログが出ます。ここでキャンセルした場合はリクエストは投げられません。

というものなのですが、これをかっこよくしたいとか「以後表示しない」みたいなことをさせたくないみたいな理由で、ブラウザのダイアログを使いたくないみたいなことが場合によっては発生します。

↑のような機能はrails-ujsというjavascriptによって提供されています（他の処理もいろいろやっています）。元々はjquery-ujsという名前でしたが、jQueryへの依存をなくすような形で書き換えられ、確かRails 5.1から標準に取り込まれました。

jquery-ujsの頃は↓のような方法で自前ダイアログに変更できたのですが、rails-ujsになってからはこの方法は使えません。

link_to data: { confirm: 'Are you sure?' }をスイートに - Qiita

スイート？ブラウザ標準の確認ダイアログの代わりに、Sweet Alert2を使います。事前準備 Sweet Alert2をインストールします。 rails-assets distをapp/assets/javascriptsに直接置く CDNをHTMLから読み込...

How to use SweetAlert2 for your Rails +5.1 (rails-ujs) confirms without jQuery

rails-ujsを使用している場合はaタグのクリックイベントを単純に乗っ取るだけでは自前実装のダイアログに置き換えることはできません。また、data-confirm以外にもrails-ujsが色々やっている（たとえばremote: trueなリンクの処理など）ため、単純に乗っ取ってしまうと想定した機能が動かなくなることもあります。

そういうわけで必要な箇所だけを正しく乗っ取ってあげる必要があります。幸いコード例を見つけたのでそちらを参考に書いてみましょう。

TL;DR see this demo project for the final solution.

medium.com

こちらの場合はsweet-alertというJSライブラリを使ってダイアログを表示しています。またujsのdata-confirmを上書きしないよう独自のdata-confirm-swalという属性を使うふうにかいていますが、data-confirm自体を乗っ取ってしまっても問題なく動きます。

まず、自前のイベントハンドラとクリックイベントへの紐づけの部分がこんな感じになります（元のコードの一部（data-confirm-swalの変更、対象とする要素のセレクタinput\[data-confirm\]のあたり）を修正）。

 1(function() {
 2 var handleConfirm = function(element) {
 3 if (!allowAction(this)) {
 4 Rails.stopEverything(element)
 5 }
 6 }
 7
 8 var allowAction = function(element) {
 9 if (element.getAttribute('data-confirm') === null) {
10 return true
11 }
12
13 showConfirmationDialog(element)
14 return false
15 }
16
17 document.addEventListener('rails:attachBindings', function(e) {
18 Rails.delegate(document, 'a[data-confirm], input[data-confirm], button[data-confirm]', 'click', handleConfirm)
19 })
20}).call(this)

:deleteメソッドなリンクが正しく動くようにとか、Rails.start後にこちらのやりたい処理を差し込めるように、といった工夫のためrails:attachbindingsのリスナーでイベントハンドラの登録を行います。

クリック後、allowActionでconfirmを出すべき属性があるかないかを判断し、出すべきであればshowConfirmationDialogを呼び出すという流れです。

その後は自分で出したいダイアログを表示するわけですが、1つポイントがあります。元記事（一部data-confirm-swalを修正）の例を見てみます。

 1 // Display the confirmation dialog
 2 var showConfirmationDialog = function(element) {
 3 var message = element.getAttribute('data-confirm')
 4 var text = element.getAttribute('data-text')
 5
 6 swal({
 7 title: message || 'Are you sure?',
 8 text: text || '',
 9 type: 'warning',
10 showCancelButton: true,
11 confirmButtonText: 'Yes',
12 cancelButtonText: 'Cancel',
13 }).then(function(result) { // <= OKを押した際のコールバック
14 confirmed(element, result)
15 })
16 }
17
18 var confirmed = function(element, result) {
19 if (result.value) {
20 // User clicked confirm button
21 element.removeAttribute('data-confirm')
22 element.click()
23 }
24 }

JSライブラリによってダイアログを表示し、OKが押された場合にはdata-confirmを消した上でJSからクリックします。すると今度は確認ダイアログなしでクリックされたことになり、元々想定していた通りのリクエストが送られる、というわけです。

ダイアログの実装自体はなんでもよくて、例えばjquery-confirmのようなものでもOKです。

元記事への補足として、remote: trueなリクエストの場合、画面全体が更新されないことが多いかと思います。場合によってはdata-confirmを削除した状態のリンクがそのまま残っている場合もあり得ます。

この場合、該当のリンクをクリックすると今度は確認なしでリクエストを投げてしまいますのであまりよくありません。ということで元のダイアログの部分のコードを修正し、たとえばダイアログが閉じたらdata-confirmを戻しておくなどの工夫が必要です。

1element.setAttribute('data-confirm', message)

Xcodeでのページ上下にカーソルを追従させる

Mon, 25 Jun 2018 06:31:31 +0900

Xcodeのエディタ部分でページアップ、ページダウンするとスクロールはしてくれるのですが、カーソルがついてきません。

page-upやpage-downは別のツールでキーボードショートカットを割り当てることで実現していますので、ポジションを大きく動かさずにエディタを大きくスクロールして、そのあとはctrl+nやctrl+pで上下にカーソルを移動をすれば目標の場所にすばやく移動できます。

しかしXcodeではカーソルは動かないままスクロールしてしまうので、page-downしてさらに下に数行動くぐらいのつもりでキー操作をすると、元々の箇所から数行下にスクロールが合う、つまり下にスクロールしたあと上にスクロールすることになります。

これが不便で仕方がなかったんですが、キー設定で変更できるようでした。

まずXcodeでPreferenceを開きます。コマンド + ,が楽です。

そして、画面上部から「Key Bindings」を選び、検索ボックスに「page 」と入れます。最後にスペースを入れると「pages」というが除外されるのでより見つけやすくなります。

さて絞り込まれた結果を見ると、下から2つが「Scroll Page Up/Down」、その上の2つが「Move Page Up/Down」となっています。

最終的には「Scroll」に割り当てられているpage-upやpage-downを「Move」に割り当てればOKです。

まず「Scroll Page Up」（とDown）にカーソルを合わせてDeleteキーでキーの割り当てを削除します。続いて「Move Page Up」側を選択してキー割り当てが書かれている列のあたりをダブルクリックして「+」ボタンを押し、page-upキーをおして割り当てます。Doenも同様ですね。

これでページ移動時にカーソルが追従してくれるようになりました。

Macでマウスのポインター位置を目立たせるSimple Mouse Locator

Sun, 24 Jun 2018 06:26:31 +0900

先日はマウスのポインタサイズを変更する方法を紹介しました。

それとは別の理由でマウスポインタを目立たせたい場合があります。リモートのミーティングで画面共有をするとき、ビデオ会議ツールのウィンドウ内で画面を共有するため大抵は画面は小さくなります。その中で小さいマウスポインタを位置を把握する（＝どんな操作をしているかを相手が把握する）のはなかなか難しいです。

同僚がこんなツールを使っていたので僕も使ってみました。

itunes.apple.com →https://itunes.apple.com/jp/app/simple-mouse-locator/id946676425?mt=12

ほぼ全員がリモートワークをしているメンバーなので各々便利ツールを知ってるものですね。

使い方といってもマウスの周りにロケーターが出るだけなので、重要なのはその設定です。

ロケーターの設定

一番上のスライダーで大きさやリングの線の太さを変えられます。

真ん中あたり、Animated RingとStatic Ringは片方を選ぶ形の設定項目で、ロケーターの見え方を決定します。

Animatedにするとロケータが現れたあとしぼむようなアニメーションをしながら消えます。一時的に場所を示したいという人が使えばOK。

それに対してStaticの方は一定時間表示されたあとフェードアウトするというものです。Display Timeのスライダーを一番左に動かすと常に表示されるようになります。後述するホットキーなどで自分で切り替えたいような人にはこれが良いです。

ロケーターの有効化

3通りの方法が提供されています。

1つ目がホットキー、これは設定した組み合わせのキーを同時に押すことでロケーターが有効（表示中は無効）になるというものです。

2番目のグループはModiferキーで有効化する方法に関する設定で、僕はこれを使ってます。↑のキャプチャの設定だと、ShiftキーをDouble（つまり2回）押したときに有効になってくれます。

3番目はマウスを動かして有効化する方法。指定した方向に指定した回数振るように動かす（waveさせる）と起動するというものです。これは誤爆しそうなので無効化しました。

Macでマウスポインターを大きくする

Sat, 23 Jun 2018 06:26:08 +0900

ついにマウスポインタが見づらくなってきたので大きくしました。Macの場合は設定から簡単に大きくできます。

support.apple.com →https://support.apple.com/kb/PH25507?viewlocale=ja_JP&locale=ja_JP

アップルメニュー＞「システム環境設定」と選択し、「アクセシビリティ」をクリックします。

「ディスプレイ」をクリックし、「カーソルのサイズ」スライダを右にドラッグして、サイズを大きくします。

システム環境設定を開いて、アクセシビリティを開き、

左側から「ディスプレイ」を選んで、カーソルのサイズのスライダーを好みの大きさまで変えてあげればOK。

マウスの設定ではなく、ディスプレイの設定なんですねー。

Gitでファイルがいつ削除されたかを特定する

Fri, 22 Jun 2018 06:12:02 +0900

前に触ったときにはあったはずのファイルが消えてるけどいつ消えたかわからん、という場合に使えるコマンドがありました。

↓のようにgit logにファイルパスを渡すとそのファイルが変更されたパスのログを出せます。ファイルがすでに削除されていても使えるコマンドなので、ログのうち、最後のコミットで削除されたということを特定できます。

1% git log -- [file path]

例えば、こんな風に使えます。

1% git log -- lib/main.rb

最後の1コミットだけみたいのであれば、

1% git log -n 1 -- [file path]

とすればOKです。細かいけど、知っとくといざというとき便利。

キーボード用にリストレストを買った

Thu, 21 Jun 2018 06:22:02 +0900

リストレストがぼろぼろになって捨てて以来買うのを忘れてました。突如思い出して、ないと落ち着かなくなってしまったので色々調べて購入しました。キーボードとトラックボールの両方をカバーできるサイズのものにしました。

それがこちらです。

サンワダイレクトリストレストキーボード用フルキーボード用ブラック 200-TOK009

Soomloom アブホイールエクササイズウィルスリムトレーナー静音腹筋ローラーエクササイズローラー膝を保護するマット付き

フルキーボード用、つまりテンキー有りのキーボードのサイズに合うものです。僕のキーボードはMac用のテンキー無しタイプなので、ちょうどテンキー部分にトラックボールを置けて良い感じです。

しかし、思わぬ欠点が…！

よく考えたら当たり前なんですが、Appleのキーボードがかなり薄型であるため、リストレストに手首を置いた状態だと手元に近い一番手前や二番めの列が非常に押しづらいというか、ほぼ押せません。

横から見るとこんな感じです。

仕方ないので底に1cm程度のマットを入れることにしました。こちらの腹筋ローラーを買ったときに一緒についてきた膝を置くようのマットです。

An archetype is a template for new content.

横からみると程よい高さになっていることがわかります。

上から見るとだいぶダサいですが仕方ない。

感じのリストレストの使い心地は、概ね良好です。ある程度反発力があるため沈む込みませんし、表面の素材が多少汗ばんでも張り付きにくそうな素材になっているのが良いです。

hugo new で生成されるファイルの初期内容を変更する

Tue, 19 Jun 2018 08:49:07 +0900

ブログに記事を追加するときには、↓なコマンドで生成します。

1% hugo new posts/2018-06-19-hugo-archetypes.md

するとこんな中身で生成されます。

1---
2title: "2018 06 19 Hugo Archetypes"
3date: 2018-06-19T08:41:23+09:00
4draft: true
5---

ルートディレクトリのarchetypesの中に、このような元ファイルがあり、これをベースに生成されていることがわかります。

1---
2title: "{{ replace .Name "-" " " | title }}"
3date: {{ .Date }}
4draft: true
5---

カスタマイズできそうだと思いつつも、しばらくはデフォルトのままで使っていました。が、いよいよ面倒になってきました。

draft: trueはほとんど使わないし、タイトルはどうせ書き換えるから空でいいし、tags: []とか自前で使っているogimageとかを入れておきたいです。

Archetypes

gohugo.io

↑こちらのURLにarchetypes（= templates used when creating new content.）について書かれています。

記事の種類（置かれるパス）によって参照するファイルの優先順位が異なるよ、ということでした。僕の場合は原則postsのページしか作りませんので、archetypes/default.mdを更新するので十分かなと思いました。

というわけで元ファイルを次のように変更しました。

1---
2title:
3date: {{ .Date }}
4tags: []
5ogimage:
6---

このコマンドで、

1% hugo new posts/2018-06-19-hugo-archetypes.md

↓が生成されます。

1---
2title:
3date: 2018-06-19T08:49:07+09:00
4tags: []
5ogimage:
6---

SQLiteのデータベースを閲覧・操作できる「」DB Browser for SQLite」

Mon, 18 Jun 2018 06:53:17 +0900

たまにSQLite使うときにやっぱりGUIアプリがあると便利なので、このGUIアプリを使っています。各OSで動きそうな雰囲気です。

DB Browser for SQLite

sqlitebrowser.org

データを一覧したり、レコードを追加したり、テーブル定義を変更したり、一通りのことができます。

ただし、1個だけ注意が。

このアプリから更新系の操作を実行した場合、即時反映はされません。↓の「Write Changes」を押さないと実際のDBは更新されないため、うっかり忘れてハマるってことになりかねません（実際はまった）。

即時反映されて困ることもありそうなのでこのようになってるでしょうけど。

Railsでカタカナのバリデーション

Sun, 17 Jun 2018 06:59:03 +0900

Railsでカタカナのバリデーションについて、忘れ易いのでメモ。

↓みたいにやるとできます。

1validates :kana_name, presence: true, format: { with: /\A[\p{katakana}\p{blank}ー－]+\z/, message: 'はカタカナで入力して下さい。'

p{katakana}についての詳しいことは↓にまとまっています。

Rubyの正規表現の/[\p{katakana}]/ ってなんなの - Qiita

会社の人が書いたRubyのコードの正規表現で /[\p{katakana}]*/みたいなのがでてきて、なんだこれって思ったので調べた。へー 'アイウエオ' =~ /\A[\p{katakana}]+\z/ #=> 0 'あいうえお' =~ /\A[\p{katakana...

GitHub - mobi/telephone_number: Phone number validation for Ruby

許容する文字が足りなければ必要に応じてフォーマットに追加することで対応できそう。

Railsで電話番号のバリデーション

Sat, 16 Jun 2018 06:38:06 +0900

電話番号を単に数字とハイフンの並びと見るだけであればまだいいのですが、真面目に扱おうとすると割と面倒です。

幸い、Googleのlibphonenumberやそれをバリデーション用にラップしたtelephone_numberというgemがあるので、それらを活用すると簡単に扱えるはずです。

Phone number validation for Ruby. Contribute to mobi/telephone_number development by creating an account on GitHub.

https://github.com/mobi/telephone_number/blob/master/lib/active_model/telephone_number_validator.rb

電話番号のバリデーションをそのうち実装することになりそうなので、使い方を調べてみました。

Rails Validation

ざっくり書くとこんな感じ。

1validates :phone, telephone_number: {country: :ja, types: [:fixed_line, :mobile]}

コードを見る限りではcountryの指定は必須、typesは指定しない場合は全タイプで判定するようですね。

マニュアルでの呼び出しの場合、countryは必須ではありません。

1phone = TelephoneNumber::Number.new(number) # country => nil
2phone.valid?

その場合、validation時にどこの国の番号かを推測するために、国番号が先頭になるかどうかなどのマッチングを行います。きちんと判定するには国はアプリケーション側で渡すのが良さそうです。

このライブラリを使ったRailsのデモサイトもあります。

numberjack.io →http://numberjack.io/

バリデーション結果やいろんな表記に変換した結果なんかを見ることができます。

URLでプレースホルダー画像（ダミー画像）を返してくれるサイト

Fri, 15 Jun 2018 06:28:28 +0900

モックアップ用でプレースホルダー画像を置きたいことがあると思います。わざわざ自分で用意するのは大変なので、URLベースでいろんな画像を返してくれるサービスを使うと便利です。

大きく分けて写真を返してくれるサイトとサイズ表記の画像を返してくれるサイトの2種類にわかれます。サイトごとにライセンス表記があったりなかったりで要注意。画像に勝手にクレジットを入れてくれるところもあります（すごい）。

lorempixel

一番有名っぽいサイト。

http://lorempixel.com/

http://lorempixel.com/幅/高さ/ というURLで画像を返してくれます。URLのあとにカテゴリを追加するとそのカテゴリに合う画像になります。

http://lorempixel.com/400/200/

以前に比べて処理が遅くなったような気がします（個人の感想）

LoremFlickr

LoremFlickr.com

LoremFlickr is a service that provides free placeholder images for web and print.

loremflickr.com

こちらも幅と高さを入れたURLで画像を返してくれます。

https://loremflickr.com/320/240/dog

Lorem Picsum

Lorem Ipsum... but for photos

picsum.photos

こちらもほぼ同じような使い方。

https://picsum.photos/300/200

PlaceIMG

placeimg.com →https://placeimg.com/

https://placeimg.com/320/240/any

Placeholder.com

こちらはよりダミー感が強い画像を作ってくれます。ワイヤーフレームっぽい画面にもってこいです。

placeholder.com

http://via.placeholder.com/350x150

Placehold.jp

placehold.jp | 簡単！ダミー画像作成

簡単！ダミー画像生成、モックアップ用画像作成ツール。文字やサイズ、メモを入れた仮の画像を簡単に作成できます。

placehold.jp

日本語です。こちらもプレースホルダーらしい画像です。背景色や文字色も変えられます。

http://placehold.jp/24/cc9999/993333/350x150.png

おわり

他にもありそうでしたが、6個あれば十分間に合うかと思います。

画像を横方向 or 縦方向に結合するMacアプリ ImageJoiner

Thu, 14 Jun 2018 06:23:06 +0900

画像を横とか縦にサクッと並べたいだけのときがあります。Sketchみたいなアプリでもできるし、ImageMagickのmontageコマンドなんかでもできますが、前者は面倒だし後者はやり方をよく忘れます。

ということで、ImageJoinerというアプリを買って使っています。

itunes.apple.com →https://itunes.apple.com/jp/app/imagejoiner-2-combine-multiples-images-into-one/id1006127937

起動するとメニューバーに常駐します。アイコンをクリックすると設定画面が。ここで結合の方向とかスキマの設定を変えられます。

使い方は、結合したい画像をすべて選択した上でメニューバー上のアイコンへドラッグアンドドロップです。ちょっとわかりづらい。

試しにlorempixelから画像を3つ借りてきて、縦方向と横方向にそれぞれつなげてみました。

縦方向

横方向

並び順は勝手に決まる（ように見える）ので、順番が大事なときは使いにくいかも。

React Nativeアプリをリリースするまでに最低限必要なiOS/AndroidのTodo

Wed, 13 Jun 2018 06:14:11 +0900

React Nativeでアプリを書くことができたとしても、アプリをリリースする先はiOSのApp Storeであったり、Google Playだったりします。リリースするためには各プラットフォームでの作法や、コード上でやっておかないと行けないことが色々とあります。

React Nativeで両プラットフォームに対応しようとすると、この辺の手続きに関しても両プラットフォームのことを知っておかないといけないため、なかなかハードです。僕の場合はiOSネイティブから入っているのでiOS側は勝手知ったる作業なのですが、Androidのほうは手探りでした。

ということで、自分のための頭の整理も兼ねて箇条書きレベルでまとめておこうかなと思いました（まとめたところで、プラットフォーム側のアップデートとかでよく変わっちゃうんですけどね）。

ネイティブアプリ未経験の人が、React Nativeでアプリを作れたとしてもリリースまでに色々あるんだよーというのがわかってもらえたら幸いです。

iOS

コード側

アプリアイコンを用意する
- ホーム画面
- App Store
- Push通知などに使われる
- 1024pxがあるとそこから一括で生成したりできるので便利
Info.plitでpermissionのメッセージを設定する
Capabilitiesで必要なフィーチャを有効にする
Distributionの証明書でcode signできるようにする
- bundle id
- → Dev Centerへの登録が必要
バージョン
- バージョン番号
- ビルド番号
  - 同一バージョン、同一ビルド番号はAppStoreConnectにアップロードできない

管理サイト側

App Store Connect（旧iTunes Connect）とDeveloper CenterみたいなAppleのサイトで登録やらなんやらを実施する必要があります。

Developer Center

https://developer.apple.com/account/
ビルド用の証明書の登録
アプリの登録
- bundle id（アプリ固有のID）
- アプリが使う機能の管理
  - Push通知
  - XxxKit など
他にも色々
- ↓この辺は最近はXcodeがやってくれる気もする
- デバイスの管理
- ビルド用プロビジョニングプロファイルの管理

App Store Connect

https://appstoreconnect.apple.com/
アプリの追加
- 紹介文やカテゴリ、Rating、価格などの登録
- スクリーンショット
- 審査への提出
TestFlight
- リリース前に実機に入れて試すプロセス
- 内部テスターの追加（まずは自分を登録）
- 外部テスターの追加
  - ベータテストする人を追加
  - （社内のメンバーだとしても内部テスターだと権限が強すぎるなどあるので、外部テスターにしてる）
メンバー管理

Android

Android側はあまり経験がないのでうろ覚えみたいなところもあり。

コード側

アプリアイコン
- Google Play Storeやランチャー用
- 通知用アイコン（透過に白のアイコンじゃないとだめ？）
AndroidManifestでpermissionの設定
バージョン
- versionName
- versionCode（全バージョンで共通管理のビルド番号ぽい扱い）
applicationId
ビルド時のkeystoreの管理

管理サイト側

Google Play Console
アプリの追加
- 紹介文やRating、価格などを登録
- スクリーンショットやヘッダー画像の登録
アルファ版、ベータ版の管理
審査への提出

おわりに

粒度バラバラなのはあまり気にせず、ざーと書いてしまいました。個別の説明をほとんどしていないのにけっこうな量になっちゃいましたね。やってみるとハマって先にすすめないことがあったりしてプラットフォームの初心者には辛いところです。

ワールドカップのトーナメント表を家庭用プリンタで大きく印刷する

Tue, 12 Jun 2018 06:25:58 +0900

ついに6月になりました。ワールドカップロシア大会がもうすぐ始まります。4年前に引き続きトーナメント表を部屋に大きく貼りたいので再びこれをやろうと思います。

大きい1枚のPDFをA4サイズ複数枚に分割して印刷する - PIYO Notes

大きい1枚のPDFをA4サイズ複数枚に分割して印刷する

ja.osdn.net →https://ja.osdn.net/projects/posterdivider/

まずは印刷したいトーナメント表を準備。僕はWebで検索して適当に見繕っておきました。

そしてPosterDividerというソフトをこちらからダウンロード、インストールします。

PosterDividerは1枚の画像やPDFを分割して印刷できるように切ってくれるツールです。こんな感じ↓で、欲しいサイズとかのりしろの幅とかを指定すると、右下のプレビューのように分割したPDFを作ってくれます。

あとはPDFを（通常は）A4用紙に印刷してのり付けをすれば大きめのポスターが完成。今回はA4を4枚使ったのでだいたいA2サイズ相当のポスターになりました。

(旧モデル) brother レーザープリンター A4 モノクロ JUSTIO HL-L2365DW

Hugoでブログリンクの見た目をはてなブログっぽくする - PIYO Notes

ブログ用のOGPサーバーが500を返すせいでHugoのビルドがこけてた

Mon, 11 Jun 2018 06:23:55 +0900

この土日、定期的に動かしているブログのビルドが失敗するようになりました。調べてみるとブログのリンクカードみたいなのを作るために自前のサーバーにOGPを取りに行く際、とあるリンク先のドメインが見つからずに500エラーで返って来ていることが原因でした。ドメインの有効期限が切れたか何かだと思われます。

ちなみにリンクカードやサーバーについてはこのへんとか、

これまで HeartRails Capture を使ってきたブログ内リンクを自前の実装とショートコードに置き換えました。以前使っていたはてなブログのリンクの表示形式が気に入っていたので、それをリスペクトする形でほぼ同じような見た目で表示できるようにしました。

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った - PIYO Notes

このへんとかに、書いてあります。

前回の続きです。 https://blog.piyo.tech/posts/2018-04-02-blog-link/ リンクの見た目をいい感じにするためにOGPのJSONのサーバーを作って、Data-Driven Contentで表示するようにしたよ、というのが前回の話です。 echoのサーバーに機能追加 https://blog.piyo.tech/posts/2018-03-27-deploy-go/ すでに動かしているGoのサーバーに機能を追加しました。 /ogp?url=http://xxxxx とリクエストすると欲しいサイトのOGPをJSONで返してくれるようにします。

itunes.apple.com →https://itunes.apple.com/jp/app/bandwidth/id490461369?mt=12

というわけでサーバー側のコードを修正しました。エラーで失敗したときに400番台、500番台を返すとビルドが止まるようだったので、OGPの取得に失敗したとしても200を返すようにしました。

対応前

1og, err := opengraph.Fetch(url)
2if err != nil {
3 return ctx.String(http.StatusInternalServerError, fmt.Sprintf("Error: %s", err.Error()))
4}

対応後

1og, err := opengraph.Fetch(url)
2if err != nil {
3 m := map[string]string{"error": fmt.Sprintf("Error: %s", err.Error())}
4 return ctx.JSON(http.StatusOK, m)
5}

元々はFetchでエラーが返ってきたときは500エラーで文字列を返していたのを、200でエラーのJSONを返すように変更。そして、Hugo側のHTML（というかテンプレート）でerrorの有り無しで分岐をすることに。

1{{- $json := getJSON .Site.Params.OgpJsonBaseUrl $url -}}
2{{- $error := $json.error -}}
3{{ if eq $error nil }}
4 元々のHTML
5{{ else }}
6 <a href="{{ $url }}" target="_blank">
7 {{$url}}
8 </a>
9{{ end }}

エラー有りで返ってきた場合は単にURLの文字列のリンクとするように変えました。これで無事ビルドできるようになりました。

Bandwidth+でMacの通信量を計測する

Sun, 10 Jun 2018 06:38:48 +0900

テザリングで使い過ぎないようにBandwidth+っていうアプリを常駐させてます。

このアプリは今日の上り下りの通信量をネットワーク毎に記録してくれます。メニューバーにはサマリーとして、現在のネットワークにおける今日の通信量の合計が表示されます。

設定によっては上りの合計とか下りの合計、通信の速度なんかも出せます。

ElectronなしでJSでデスクトップアプリを書けるProton NativeをQuick startした

Sat, 09 Jun 2018 06:14:58 +0900

出落ちで済みませんが、Proton Nativeとか言うのを見つけて試した、というお話です。

React Nativeでモバイルアプリを書くようなノリでデスクトップアプリを書けるよ、っていうProton Nativeというフレームワークがありました。

GitHub - kusti8/proton-native: A React environment for cross platform desktop apps

A React environment for cross platform desktop apps - kusti8/proton-native

Proton Native - React Native for the desktop, cross compatible

裏ではlibui、そしてそのJSバインディングであるlibui-nodeが使われているらしい。libui、なに？って感じなので今度調べます。

インストールからひな形アプリの生成、そして起動までざっとやってみます。これはquick startに書いてある通りです。

proton-native.js.org

1% npm install -g create-proton-app
2% create-proton-app my-app
3% cd my-app
4% npm run start

で、これをすると簡単なアプリが起動します。

 1class Example extends Component {
 2 render() { // all Components must have a render method
 3 return (
 4 <App> // you must always include App around everything
 5 <Window title="Proton Native Rocks!" size={{w: 300, h: 300}} menuBar={false}>
 6 {/* all your other components go here*/}
 7 </Window>
 8 </App>
 9 );
10 }
11}

コードはほぼReactです。サンプルとしてこれじゃあまりにアレなので、ボタンを置いて動かしてみました。

コードを↓のように変更して、ボタンを押したらダイアログを表示してみます。

 1class Example extends Component {
 2 render() { // all Components must have a render method
 3 return (
 4 <App> // you must always include App around everything
 5 <Window title="Proton Native Rocks!" size={{w: 300, h: 300}} menuBar={false}>
 6 <Button onClick={() => {
 7 Dialog('Message', {title: "ダイアログを開きましたね？"})
 8 }}>
 9 Open the Dialog!
10 </Button>
11 </Window>
12 </App>
13 );
14 }
15}

なんか小さくなった

ダイアログが出た

↑の例ではWindowサイズが無視されてボタンのサイズにフィットしてしまいました。余白をいれたり中央に配置したりできないかと色々試しましたが、どうやらレイアウトを微調整するのがかなり難しいことがわかりました。そもそもlibuiの癖なのか、ProtonNativeにAPIが足りないのか、そこまではまだわかっていません。実用にはもう少し成熟が必要そうです。

とはいえ、デスクトップアプリをサクッと作りたいと常日頃思っていたので、React Nativeに慣れている僕にとっては、似たような考え方で書けるProton Nativeの存在は期待しています。

ローカル環境をインターネットに公開できるngrokのユースケース

Thu, 07 Jun 2018 06:18:08 +0900

ngrokというサービスがあります。僕は無料で簡易に使ったことしかないのでその範囲内の話しかできないですが、ユースケースを紹介したいと思います。

まず使い方はとても簡単。

1% brew cask install ngrok
2% ngrok http 3000 # ポート番号

これで、xxxxxxx.ngrok.comみたいなURLが発行されます。このURLにアクセスするとローカルマシンの3000番ポートにリクエストが飛んできます。

ではこれができると何が嬉しいか。僕は主に2つのユースケースで使ってします。

アプリ開発

Webサービスのスマートフォンクライアント開発をするとき、ローカルのサーバーでAPIを開発しつつアプリ側を開発することがまあよくあります。

この場合アプリはサーバーありきのため、アプリからサーバーへWebのリクエストが飛びます。大抵の場合はシミュレータから(localhost:3000）とかにアクセスすれば事足りますが、写真撮影してアップロード、みたいなことをやろうとすると、(iOS)では実機を使って動作させるしかありません。

そのようなとき、例えばRailsならpuma-devなどを利用してxip.ioドメインで実機から開発機にアクセスすることは可能です。ですが、ちょとした拍子に名前解決ができなくなってしまい、サーバーの再起動などを頻繁にすることになります。

その点、ngrokを使えば名前解決のあたりが安定します。インターネットを経由する分少し遅くなりますが、限定的な用途だと考えれば受け入れられる程度で、メリットのほうが大きい気がしています。

また、iOSの場合はATSによりhttpsを使わないといけないなど、証明書周りで面倒なことがありがちですが、ngrokでは回避できるはず。多少遅いことを受け入れられるケースであれば使うと◎です。

外部サービス連携

外部のサービスから定期的にリクエストを受け付ける、みたいな機能を作ろうとすると、外部のサービスが投げるリクエストを受け取る必要があります。

例えばGitHubでは、リポジトリのWebhooksにURLを登録しておくと、コミット時やプルリクエスト作成時などのイベントが起こったときに、その内容などなどを登録したURLにPOSTで投げつけてくれます。

そして、そのURLは外部に公開されている必要があります。GitHubにhttps://localhost:3000/githubみたいなURLを登録したところで、自分の開発機にはリクエストは飛んできません。

そこでngrokです。ngrokで発行したURLをwebhookとして登録しておけば、開発機に連携サービスからのリクエストが飛んでくるというわけです。URLには有効期限があり（8時間）、それをすぎると使えません。

お金を払うとサブドメインの部分を固定にしたり任意の文字列に設定したりとできるらしいので、人によっては払う価値が出てくるのではないかと思われます。

Railsでファイル関連のバリデーションをする

Wed, 06 Jun 2018 06:35:30 +0900

アップロードファイルのサイズやcontent_typeなど、制限する場合があると思います。標準のvalidatorでは足りないので、自前で書いたり、carrierwaveなんかであればuploaderに制限を書いたりします。

モデルでファイル関連のvalidatorを使えるようになるfile_validatorsというのがあるので、簡単に紹介。

GitHub - musaffa/file_validators: Adds file validators to ActiveModel.

Adds file validators to ActiveModel. Contribute to musaffa/file_validators development by creating an account on GitHub.

GitHub - tomykaira/rspec-parameterized: RSpec::Parameterized supports simple parameterized test syntax in rspec.

百聞は一見にしかずだと思うので、サンプルコードを紹介。

1class Profile < ActiveRecord::Base
2 validates :avatar, file_size: { less_than_or_equal_to: 100.kilobytes },
3 file_content_type: { allow: ['image/jpeg', 'image/png'] }
4end

file_sizeやfile_content_typeといったバリデーションができるようになっています。

これによって指定のサイズ以上は受け付けないとか、変なファイルを受け付けないとかの制御ができます。

file_content_typeについては正規表現の指定も可能で、↓のように書くと画像全般を許可できそうです。

1validates :avatar, file_content_type: { allow: /^image\/.*/ }

エラーメッセージのi18nにも対応しているようなので実用性はありそうだし、細々とだけどメンテもされているみたいなので使ってみても良さそうという感じです。

rspec-parameterizedで条件だけが異なるテストコードをDRYに書く

Mon, 04 Jun 2018 06:27:50 +0900

テストのロジックは同じだけど、入力値とそれに対する結果が異なるみたいなテストをシンプルにかけるrspec-parametrizedというgemがあります。

RSpec::Parameterized supports simple parameterized test syntax in rspec. - tomykaira/rspec-parameterized

GitHub - smudge/freemail: A ruby implementation of the npm 'freemail' database of free and disposable email domains.

存在は知ってたけどしばらく使ってなかったんですが、試しに入れてみたらすごくシンプルに使えるし、パラメータ変えてテストできるようなメソッドにしようみたいな意識がより働いてコードに良い影響もありそうな気がしています。

whereとwith_themを使ってテストを書いていきます。↓はREADMEのサンプルの一部でして、whereに値の組み合わせ、with_themにテストコード自体を書く使い方をします。

 1describe "plus" do
 2 where(:a, :b, :answer) do
 3 [
 4 [1 , 2 , 3],
 5 [5 , 8 , 13],
 6 [0 , 0 , 0]
 7 ]
 8 end
 9
10 with_them do
11 it "should do additions" do
12 expect(a + b).to eq answer
13 end
14 end
15end

↑の例だと、a,b,answerという3つのパラメータにセットする値をArrayのArrayで渡しています。すると、with_themに書いたテストが以下の3つの条件で実行されるというわけです。

a=1, b=2, answer=3
a=5, b=8, answer=13
a=0, b=0, answer=0

whereの書き方には↑のようなArrayのパターンやHashを使ったパターン、さらに独自のテーブル記法を使うこともできます。

1using RSpec::Parameterized::TableSyntax
2
3where(:a, :b, :answer) do
4 1 | 2 | 3
5 5 | 8 | 13
6 0 | 0 | 0
7end

直感的っちゃ直感的ですが、using RSpec::Parameterized::TableSyntaxしないと使えなくてひと手間かかるとも言えるので、この辺は好みですね。

ということで、パラメータのみが変わるテストはrspec-parameterizedでDRYにして、入出力の条件にフォーカスして必要なテストをかけるようにしましょー。

Rubyでフリーメールの判定をするfreemail gem

Sun, 03 Jun 2018 06:39:31 +0900

フリーメールで登録できないようにしたい、という要望に答えるためにfreemailというgemを使いました。

A ruby implementation of the npm 'freemail' database of free and disposable email domains. - smudge/freemail

API for adding domains by pi-chan · Pull Request #11 · smudge/freemail

このgemはフリーメールのリストを管理していて、該当するかメールアドレスかどうかを判定してくれます。ある程度のリストが最初からあって自分で用意する必要がないというのが良いところです。

使い方は簡単で、

1require 'freemail'
2
3Freemail.free?('hogehogehoge@gmail.com')
4# => true

みたいな使い方をします。free?のほかにdisposable?という使い捨てアドレスの判定もできます。が、用途としてはちゃんとしたアドレスであるかどうかを知りたいことが多いはずなので、free_or_disposable?を使うのが良いかと思われます。

1require 'freemail'
2
3Freemail.free_or_disposable?('hogehogehoge@gmail.com')
4# => true

さて、このgemのリストには日本国内のフリーメールなんかは入っていません。とはいえいちいち除外したいドメインをメインのリストに追加してもらうようにプルリクしたりフォークしたりするのはイマイチだなと思い、対象のフリーメールを追加できるようなAPIを用意してプルリクを出し、取り込んでもらいました。

new version of #10, keep Hash implementation.

GitHub - wireframe/email_prefixer

（ちゃんとテスト書いてて去年の俺えらい）

これによって、free_or_disposable?の判定の前に

1Freemail.add_free_domains %w(
2yahoo.co.jp
3outlook.jp
4hotmail.co.jp
5live.jp
6excite.co.jp
7)

みたいなことをしておけば、国内のフリーメールも除外対象にできるというわけです。これを使っているRailsアプリケーションでは、initializerでこの追加処理を書いています。

Railsでメールにプレフィックスつけるgem email_prefixer

Sat, 02 Jun 2018 06:59:23 +0900

メール送るときにプレフィックスつけたいときあるじゃないですか。サービス名だったり、ステージング用でテストするためのメールだったり。

で、1個1個subjectに設定するのは面倒だし忘れてしまいがちなので、email_prefixerを使っています。

Contribute to wireframe/email_prefixer development by creating an account on GitHub.

Action Mailer の基礎 - Railsガイド

Railsへの導入はgemの追加とinitializersへの設定ファイルの追加です。

config/intitializers/email_prefixer.rb的なファイルを作って、必要な設定を書いておきます。

たとえばこんな感じで、envごとにプレフィックスを変えて送れます。

1EmailPrefixer.configure do |config|
2 if Rails.env.production? or Rails.env.test?
3 config.builder = -> { '【サービス名】' }
4 elsif Rails.env.staging?
5 config.builder = -> { '【staging】' }
6 elsif Rails.env.development?
7 config.builder = -> { '【development】' }
8 end
9end

メールを送る側は例えばこんな感じ（↓）になると思います。subjectにはプレフィックス以外の部分を指定します。

1def invited(user)
2 @user = user
3 mail to: @user.email, subject: '招待されました'
4end

実際に送られるメールのタイトルは環境によって

【サービス名】招待されました
【staging】招待されました
【development】招待されました

みたいな感じで勝手に分かれてくれます。プレフィックスをつけたいだけの場合（環境毎に区別しない場合）でも一箇所でDRYにできるので便利です。

仕組み的にはActionMailerが提供するフック、ActionMailer::Base.register_interceptorを使って、プレフィックスをつける処理を差し込むだけで割とシンプルな実装です。

Railsガイドにも載っています。

Action Mailerを使ってメールを送受信する方法について解説します。

railsguides.jp

これを使えばpostfixerも作れますね。要らないけどね。

Macのおやすみモードをショートカットで切り替える

Fri, 01 Jun 2018 06:45:08 +0900

リモートミーティングで画面共有中にうっかり通知が見えてしまわないようにおやすみモードを使うようにしています。けど、この切り替えがマウスで面倒です。

通常はメニューバー右上の通知センターを開いて、少し上にスクロールすると出現するおやすみモードをオンに切り替えることで有効になります。

さらに簡単に切り替える方法としては、Macのoptionキーを押しながら通知センターを開くアイコンをクリック、というのがあります。これするとパネルを開かなくてもオンオフできます。

でも、マウスすら面倒なのでキーボードで切り替えたいじゃないですか。ちゃんと設定できるようになってました。

設定→キーボード→ショートカットからMission Controlの「おやすみモードをオン/オフ」を有効にして好きなキーを割当てればOKです。

ただ、これだと今どっちの状態にいるのかわからないんですよね。メニューバーにアイコンでも出せるといいんですが。。。

RailsでMarkdownのテキストをHTMLに変換する

Thu, 31 May 2018 06:14:55 +0900

RailsでさくっとMarkdown対応する方法を紹介します。

マークダウン形式で書かれたテキストをHTMLに変換する機能を提供するgemが大きく2つあります。

redcarpet ★4222
commonmarker ★137

（★は2018/05/31時点）

redcarpetは僕も以前から使っていて、オプションが豊富でがんばればいろんなことができる、大きめのライブラリという印象です。（GitHubでも使われてるんでしたっけ？適当なこと言ったらいけないか）

で、もう一個のcommonmarkerはCommonMarkというMarkdownに対応するためのライブラリです。あるプロジェクトでredcarpetで3重にネストした箇条書きを上手く処理できなくて困ってたところに、コレに出会ってうまくいったのでこっちを採用しています。

CommonMarkは仕様を明確にしたMarkdownという感じの存在です。

CommonMark

commonmark.org

redcarpet gemのコードを書いている人も参加しているみたい。

Redcarpet was written by Vicent Martí.

のところ、および、CommonMarkのサイトの Who are you?のところの

Vicent Marti, vicent@github.com

が同一人物のようですね。

example

凝ったことをやらないのであればcommonmarkerでサクッと作ってもいいのでは？と思い最小限のRailsのサンプルを紹介します。

commonmarker gemのREADMEの冒頭部分を例としてHTMLにしてみます。

commonmarker/README.md at master · gjtorikian/commonmarker

 1# CommonMarker
 2
 3[![Build Status](https://travis-ci.org/gjtorikian/commonmarker.svg)](https://travis-ci.org/gjtorikian/commonmarker) [![Gem Version](https://badge.fury.io/rb/commonmarker.svg)](http://badge.fury.io/rb/commonmarker)
 4
 5Ruby wrapper for [libcmark-gfm](https://github.com/github/cmark),
 6GitHub's fork of the reference parser for CommonMark. It passes all of the C tests, and is therefore spec-complete. It also includes extensions to the CommonMark spec as documented in the [GitHub Flavored Markdown spec](http://github.github.com/gfm/), such as support for tables, strikethroughs, and autolinking.
 7
 8For more information on available extensions, see [the documentation below](#extensions).
 9
10## Installation
11
12Add this line to your application's Gemfile:
13
14 gem 'commonmarker'
15
16And then execute:
17
18 $ bundle
19
20Or install it yourself as:
21
22 $ gem install commonmarker
23
24## Usage
25
26### Converting to HTML
27
28Call `render_html` on a string to convert it to HTML:

導入は↑に書いてあるとおり、Gemfileに書いてbundle install だけでOKです。ビューで毎度commonmarkerを呼ぶのは面倒なので、僕は大体ヘルパーにしておいて使います。

1module ApplicationHelper
2 def md2html(text)
3 html = CommonMarker.render_html(text)
4 raw(html)
5 end
6end

あとはビューでこのヘルパーのメソッドにMarkdown形式のテキストを入れるだけです。

<% text = "#{↑のマークダウン}" %>
<%= md2html(text) %>

レンダリング結果が↓です。いい感じです。

Capybaraのフィーチャテストで自動的にスクリーンショットを撮るgem

Wed, 30 May 2018 06:26:06 +0900

テスト失敗時のスクショ撮りをRSpec + Capybaraで設定ほぼ不要でおまかせできたので紹介します。

GitHub - mattheworiordan/capybara-screenshot: Automatically save screen shots when a Capybara scenario fails

Automatically save screen shots when a Capybara scenario fails - mattheworiordan/capybara-screenshot

capybara-screenshot/rspec.rb#L93

Gemfileに↓を書いてbundle installし、

1group :test do
2 gem 'capybara-screenshot'
3end

rails_helper.rbあたりに↓の記述を入れておけばOK

1require 'capybara-screenshot/rspec'

実際には↓の箇所でテスト後のコールバックを登録してあって、内部で失敗かどうかを判定してtmp/capybara/以下にhtmlとpngを保存してくれるようになっています。自動的にタイムスタンプとかもつけてくれます。

スクリーンショットはsave_screenshotでも取れるので、同じようなことを自分書いても大したことないコード量で済みますが、さくっと導入する分には便利なのでこっち使っちゃうほうが好きです。

「小さな習慣」という本のうろ覚え感想

Fri, 25 May 2018 06:53:37 +0900

やる気なんてものはなくて、行動すれば自然とやる気になるんだよというような話の記事を読みました。

「簡単にやる気を出す方法を教えてください！」→脳研究者「やる気なんて存在しない」｜新R25 Media - シゴトも人生も、もっと楽しもう。

“やる気が出ない”全ビジネスマン必見!?

r25.jp

この記事を読んだときに、「小さな習慣」という本を読んだことを思い出しました。本を読んだのは年始なのでだいぶうろ覚え感ありますが、「小さな習慣」についてざっくり思い出すと、

モチベーションなんて不確実なものに頼ってたらやりたいこと達成できない
モチベーションはやり始めれば出てくる
いかに低負荷で始めるかが肝心
→超簡単でがんばらなくてもできることだけを毎日続けよう

というものだったはず。

習慣にしたいと思っている行動を最も小さくしたものを「小さな習慣」と読んでいて、例えば、

筋トレを続けたいなら1回の腕立て伏せ
本を書きたいなら1日50word書く

のようなことです。

個人的にはポイントは2つあると思っていて、

1つは先ほど紹介したリンクにもあるように「やる気」は行動すると出てくる、つまり小さな習慣の行動をすると案外続けてやりたくなってくるというものです。気が進まなかったけど、ちょっとやり始めたら案外進んだみたいなやつです。

もう1つは、小さな習慣でも続けていくうちに脳が慣れていくことで自然と少しつづ行動を大きくしていけることではないかなと思います。これも紹介したリンクで歯磨きが例示されいた歯磨きと似ています。面倒でも歯磨きは毎日続くのは、脳の働きが関係しているようです。

脳科学を交えてちゃんと説明してくれてるのでもう1回詳しく読んだほうがいいな。

小さな習慣

Go lang + EchoでGoogle Analytics APIの結果をHugoから使えるように - PIYO Notes

rails generate migrationにdecimalのオプションを渡す

Thu, 24 May 2018 06:01:04 +0900

小ネタです。

decimalのカラムを追加するときに

1add_column :items, :new_column, :decimal, precision: 3, scale: 2

とかってやると思うんですけど、これをgeneratorのコマンドに渡せないかな？と思って調べました。

コマンドに渡すっていうのはこういうのです。

（以下、NewColumnとかnew_columnは適当に読み替えてください）

1% rails g migration AddNewColumnToItems new_column:string

decimalの場合は new_column:decimal{precision,scale} でいけます。

たとえば、

1% rails g migration AddNewColumnToItems "new_column:decimal{3,2}"

クオートつけないと、{3,2}の部分がシェルに評価されてしまうのでクオート必須です。

HugoにPV順の記事リストを配置する

Wed, 23 May 2018 05:53:55 +0900

HugoのPV順の記事リストを作ってみました。

Google Analyticsのpageview情報を利用していて、サイトビルド時にデータを取得するためのAPIはGo言語を使って自前で作りました。

またもやHugo用にGoのサーバーにAPIを追加しました。HugoでGoogle Analyticsで取っているPV順に並べた結果を使ってコンテンツを作るためです。似たようなことをこの辺↓↓で書いてます。 https://blog.piyo.tech/posts/2018-04-04-ogp-json/ まず認証情報を作るところがなかなか面倒です。こちらのURLがほぼまんま参考になるので順を追って実施してみてください（丸投げ）。

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った - PIYO Notes

まずはサイドバーにエリアを追加しました。

1<aside class="l-sidebar">
2 <div class="sections sidebar">
3 {{ partial "author.html" . }}
4 {{ partial "popular.html" . }} ←これを追加
5 {{ partial "latests.html" . }}
6 {{ partial "tags.html" . }}
7 </div>
8</aside>

全体としては↓のようになってて、APIでPV順に戻ってきた$json.rowsのうち先頭5件を取り出してループを回しています。

 1{{- $json := getJSON .Site.Params.GAURL -}} 作っておいたAPIを呼び出す
 2{{- $ogpUrl := .Site.Params.OgpJsonBaseUrl -}} ←あとで使う
 3
 4<section class="sidebar">
 5 <header>POPULAR</header>
 6 <div>
 7 <div class="articles sm">
 8 {{ range $row := (first 5 $json.rows) }}
 9 ここに内容を書く
10 {{ end }}
11 </div>
12 </div>
13</section>

記事ごとの要素はLATESTにあるものと同じような見え方にすべく、HTMLもほぼ同じようにしました。ですが、GAの結果には記事のサムネイルやタグなどがありません。

タグは無くてもいいとしてサムネイルを載せないと寂しくなってしまったので、OGP画像を表示したときのようにOGPのAPIを呼び出してその結果を利用する形でサムネイルを表示しました。

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った - PIYO Notes

以下にループの内側のHTMLを掲載します。

 1{{- $date := substr (index $row 2) 1 10 }}
 2{{- $path := printf "%s%s" (index $row 1) (substr (index $row 2) 1)}}
 3{{- $url := printf "https://blog.piyo.tech%s" $path}}
 4{{- $json2 := getJSON (printf "%s%s" $ogpUrl $url) }}
 5{{- $image := index $json2.Image 0 -}}
 6{{- $imageUrl := $image.URL -}}
 7
 8<article class="lism">
 9 <a href="{{ $path }}">
10 <div class="thumb" {{ printf "style='background-image: url(%s)'" $imageUrl | safeHTMLAttr }}></div>
11 <div class="inner">
12 <div class="title sm">{{ index $row 3 }}</div>
13
14 <ul class="facts sm">
15 <li><i class="fa fa-calendar" aria-hidden="true"></i><time datetime="{{ $date }}">{{ $date }}</time></li>
16 </ul>
17 </div>
18 </a>
19</article>

$json2というのが、OGP用のAPIの結果で、その中身である$image.URLをサムネイルとして利用しました。

Go lang + EchoでGoogle Analytics APIの結果をHugoから使えるように

Tue, 22 May 2018 06:45:46 +0900

またもやHugo用にGoのサーバーにAPIを追加しました。HugoでGoogle Analyticsで取っているPV順に並べた結果を使ってコンテンツを作るためです。

似たようなことをこの辺↓↓で書いてます。

おはこんばんにちは。ハルです。 PHPで Google Analytics API

まず認証情報を作るところがなかなか面倒です。こちらのURLがほぼまんま参考になるので順を追って実施してみてください（丸投げ）。

liginc.co.jp

jsonを取得してGoogle Analytics側にjsonの中に書いてあるメールアドレスをユーザーとして追加するところまでやっておきます。

次にコードを書きます。

まずは依存するライブラリを追加します。（Echoのコードはすでにある前提とします。

1% dep ensure -add golang.org/x/oauth2
2% dep ensure

そしてimportに追加

1import (
2 "golang.org/x/oauth2"
3 "golang.org/x/oauth2/google"
4 analytics "google.golang.org/api/analytics/v3"
5)

Echoに新しいルーティングを追加します。

1func main() {
2 e.GET("/ga", getGA)
3}

ハンドラはこんな感じ。こちらをかなり参考にさせてもらいました。

go langからGoogle Analytics APIを使う - 平日インプット週末アウトプットぶろぐ

こちらの記事↓ではSpring Boot + kotlinからの利用方法でしたがgoからの利用も調査しました。Spring Boot + kotlinでGoogle

blog.soushi.me

 1func getGA(ctx echo.Context) error {
 2 client, err := google.DefaultClient(
 3 oauth2.NoContext,
 4 "https://www.googleapis.com/auth/analytics.readonly")
 5 if err != nil {
 6 return ctx.String(http.StatusInternalServerError, fmt.Sprintf("Unable to read client : %s", err.Error()))
 7 }
 8
 9 service, err := analytics.New(client)
10 if err != nil {
11 return ctx.String(http.StatusInternalServerError, fmt.Sprintf("Unable to Access Google Analytics: %s", err.Error()))
12 }
13
14 result, err := service.Data.Ga.Get("ga:xxxxxxxxxx", "7daysAgo", "today", "ga:pageviews").Dimensions("ga:pagePath,ga:pagePathLevel1,ga:pagePathLevel2,ga:pageTitle").Filters("ga:pagePath=~^/posts/").Sort("-ga:pageviews").Do()
15 if err != nil {
16 return ctx.String(http.StatusInternalServerError, fmt.Sprintf("Unable to get data: %s", err.Error()))
17 }
18
19 return ctx.JSON(http.StatusOK, result)
20}

ga:xxxxxxxxxxとなっている箇所はGoogle AnalyticsのViewに対応しています。

また、コードの14行目のあたりでDimensionやらFilterやらSortやらを指定しています。これらはQuery Explorerで確認して決めると便利です。

Google AnalyticsのQuery ExplorerでAPIリクエストをテストする - PIYO Notes

読まれてる記事順のリストをブログに付けてみたいという思いつきを実現したいのですが、PV的なものはGoogle Analyticsにしか情報がありません。またサイトジェネレータの場合はページ生成時にPageViewが必要になるので工夫してあげないと実用上使えません。

GitHub - Benjamin-Lin-X/react-native-image-tools

これでコードはOKです。実行時に先ほどのjsonファイルが必要となります。環境変数での指定が必要なので、GOOGLE_APPLICATION_CREDENTIALS=path/to/jsonのような形で実行してあげると、無事Echo経由でGoogle AnalyticsのAPI呼び出しをJSONで取得できるようになりました。

Google AnalyticsのQuery ExplorerでAPIリクエストをテストする

Mon, 21 May 2018 06:41:26 +0900

読まれてる記事順のリストをブログに付けてみたいという思いつきを実現したいのですが、PV的なものはGoogle Analyticsにしか情報がありません。

またサイトジェネレータの場合はページ生成時にPageViewが必要になるので工夫してあげないと実用上使えません。

そうなるとページ生成時にGoogle Analyticsから取ってきた結果を参考にしてページを組み立てるしかありません。

必要な情報は

ある期間の
PV順の
記事の情報

となります。これらを調べるのにAPIのドキュメントを見るのもいいですが、問い合わせを試させてくれるGoogleが用意したページがあるので、それを使うと便利です。

ga-dev-tools.appspot.com

まずページへアクセスすると、Authorizeしてねというリンクが出ています。自分のGoogleアカウントへのアクセスを許可しないと使用できない作りになっています。

次にどのサイトのどのViewのデータを見たいかを指定します。

最後に検索条件を入力して「Run Query」をします。

PVが欲しいのでmetricsにはga:pageviewsを。また、パスやタイトルなどはHugo上で使いたいのでdimentionsに指定。

PV順に並び替えた状態にしたいのでsortに-ga:pageviewsを。マイナス指定で降順になります。また、記事ページ以外は無視したいのでfilterに正規表現でpathの条件を指定。

filter以外は補完で入力してくれるのでなんとなく「pageview」とか「path」とか打ってそれっぽいものを選ぶだけでOKです。

結果をこのような形で閲覧できます。

また、このAPIリクエストをするためのURLを生成しておいてくれるのでアクセスキーさえ設定すればすぐに使えるという感じになってて便利です。

React Nativeで画像のRGBA値を得る

Sun, 20 May 2018 06:08:06 +0900

React Nativeで画像のRGBA値が欲しくて調べてたらreact-native-image-toolsというライブラリを見つけました。

Contribute to Benjamin-Lin-X/react-native-image-tools development by creating an account on GitHub.

https://imgur.com/download/OSEiha9

かなり名前が近い別パッケージもあるので混同注意です。

1% npm -i react-native-image-tool
2% react-native link react-native-image-tool

で導入できます。

インターフェースはざっくり

createBinaryImage
GetImageRGBAs

な2つしかないようです。このうち、GetImageRGBAsのほうを使いました。

画像のURLを渡すと結果が返ってくるという形です。結果には、width、height、およびrgbaというRGBAの配列が返ってきます。

以下は、この画像を読み込んでみる例です。

1import ImageTools from 'react-native-image-tool';
2
3const url = 'https://imgur.com/download/OSEiha9';
4ImageTools.GetImageRGBAs(url)
5 .then(response => {
6 // response.rgba
7 });

さてこのRGBAの配列ですが、32bitの符号付き整数として返ってきます。

1response.rgba[0]
2// => -16776961

例えば0番目には-16776961という値が入っています。これを符号無しにしてビット演算でRGBA毎の値に変換してあげないといけません。

（そのまま一気に行けそうな気もするけど個人的にわかりにくいから、符号なしにしてから各成分を取り出してます）

以下の関数を定義して、-16776961を変換してみます。

 1unsigned(signedValue) {
 2 return signedValue >>> 0;
 3}
 4
 5red(unsignedValue) {
 6 return (unsignedValue >> 0) & 0xff;
 7}
 8
 9green(unsignedValue) {
10 return (unsignedValue >> 8) & 0xff;
11}
12
13blue(unsignedValue) {
14 return (unsignedValue >> 16) & 0xff;
15}
16
17alpha(unsignedValue) {
18 return (unsignedValue >> 24) & 0xff;
19}

 1const val = response.rgba[0];
 2const u = unsigned(val);
 3// => 4278190335
 4
 5const r = red(u);
 6// => 255
 7
 8const g = green(u);
 9// => 0
10
11const g = blue(u);
12// => 0
13
14const a = alpha(u);
15// => 255

という感じでRとAが255、GとBが0だということがわかりました。0番目は画像の左上で赤が正しいので、結果も合っていそうです。

response.rgbaは配列なので、mapなどを使えば一気に赤成分だけ取り出すことも可能です。

1const redArray = response.rgba.map(value => {
2 const uint = unsigned(value);
3 return red(uint);
4});

Quitterでつい時間使っちゃうMacアプリを隠したり終了したり

Sat, 19 May 2018 06:13:35 +0900

見るつもりがないアプリなのに目に入っちゃってそこから脇道にそれていって、元々何をやろうとしていたのか忘れてしまうみたいなことがたまに起こります。

特にマルチディスプレイだったりすると起こりがちかなーと思っていて、片方でコード書いてて何かの拍子に別のディスプレイで開いてたTwitterが見えちゃって、みたいなことってあるんじゃないかと。

それの対策としてQuitter for Macというアプリを入れてたのに最近使うのを忘れていたことを急に思い出したのでメモしておきます。

Apps – Marco.org

I’m Marco Arment: a programmer, writer, podcaster, geek, and coffee enthusiast.

marco.org

Quitterは指定したアプリが指定した時間アイドルだった場合に終了したり隠したりしてくれるだけのアプリです。開発者はInstapaperとかOvercastの開発者でもあるMarco Arment氏です。

インストール方法は↑のサイトからzipをダウンロードしてきて適当にやります。起動するとメニューバーにアイコンが現れます。今後Mac起動時に常駐させておきたいなら「Start Quitter at Login」にチェックを入れおくとよいです。

「Edit Rules…」から設定を追加できます。

+ボタンでアプリケーションを選ぶと列が追加されるので、あとは何分後にどうしたいのかをそれぞれに設定していけばOK。

僕はひとまずこんな感じにしています。ChromeとかFranzは仕事上必要なことも多いですが、常にForegroundにいる必要は全然ないのでちょっと時間が経ってくれたら隠れてくれたほうが気が散らなくて良いです。

Xcodeで「An unknown error has occurred」が出て実機にインストールできないとき

Thu, 17 May 2018 06:54:40 +0900

実機デバッグしようとしたらアプリの起動時にエラーになることが稀によくありますよね。

そんなときは一旦デバイスとのペアを解除して再接続すればOKです。

Xcodeの「Window」メニューから「Devices and Simulators」を選びます。「Shift + Command + 2」でもOK。

そうすっと、こんな風にデバイス一覧があらわれます。対象のデバイスを左側の「connected」のところから選んで右クリックなどでコンテキストメニューを表示。

こんなメニューがあらわれるので「Unpair Device」します。

これで対象のデバイスを接続し直すとコンピュータを信頼しますか？といったような確認をデバイス側で求められますので、承認してあげます。

冒頭のエラーはこれで大体直ります。直るのですが、いちいちUSBで接続しなければならず、せっかくの無線インストールが台無しです。

RSpecで失敗したテストだけを対象にできる--only-failuresオプション

Wed, 16 May 2018 06:19:08 +0900

プロジェクトの根幹ぽいところをちょっと変えたばっかりにテストの半分ぐらいがが失敗してしまって、1箇所直したら全部パスするみたいなことはあるあるなんじゃないかと思います。RSpecでは失敗したテストのみを対象に再実行できるオプションがあるので、それを使うと良いです。

特にコマンドラインからrspecコマンドでテストを流している人（＝IDEのサポートがあまりない人）にはオススメです。社内見てると案外使われてないのか？という感じでしたが、僕は超使っているので書いておこうかと。

まずRSpec3.3以降が必要です。出たのは3年ほど前なので、最近は大丈夫かと思います。

それと、この機能は最後に実行したテストの実行結果をどこかにとっておく必要があり、それをファイルで実現しているので、その設定が必要です。

spec_helper.rbあたりに以下の記述をしてあげると良いです。

1# spec_helper.rb
2RSpec.configure do |config|
3 config.example_status_persistence_file_path = "spec/examples.txt"
4end

また、spec/examples.txtはソース管理に入れる必要がないので除外しておきます。

この状態でRSpecを実行してみると、例えば次のようなファイルが生成されます。

1./spec/models/user_spec.rb[1:1:1:1] | passed | 0.11494 seconds |
2./spec/models/user_spec.rb[1:1:2:1] | failed | 0.1067 seconds |
3./spec/models/user_spec.rb[1:2:1:1] | failed | 0.11267 seconds |
4./spec/models/user_spec.rb[1:2:2:1] | passed | 0.06915 seconds |
5./spec/models/user_spec.rb[1:2:3:1] | passed | 0.08749 seconds |
6./spec/models/user_spec.rb[1:3:1:1:1:1] | passed | 0.16688 seconds |
7./spec/models/user_spec.rb[1:3:1:1:2:1:1] | passed | 0.11628 seconds |
8./spec/models/user_spec.rb[1:3:1:1:2:2:1] | passed | 0.12612 seconds |
9./spec/models/user_spec.rb[1:3:1:1:2:2:2] | passed | 0.10565 seconds |

それぞれのテストがpassedなりfailedなりマークされています。

次の実行時に--only-failuresオプションを付けて同様のfailedとマークされたテストのみが実施されます。例えば↑の例であれば2件しか実行されないので時間短縮になります。

また、このexamples.txtのようなファイルは都度全て上書きされるわけではなく、rspecの対象ファイルを指定して実行したときに、関連の箇所しか書き換えません。説明がむずい。

例えば、次のような順番で実行したとします。

 1# 全件テスト
 2% rspec
 3=> user_spec.rbとproject_spec.rbで一部のテストが失敗したとする
 4
 5# まずはuser_spec側を修正して再テスト
 6% rspec path/to/user_spec.rb --only-failures
 7=> user_specのうち失敗したテストを実行
 8
 9# project_spec側をテスト
10% rspec path/to/project_spec.rb --only-failures

みたいなときに、最後のproject_spec.rbを対象に実施したときにも、最初のfailedが残っているのでその箇所のみテストを実行できるわけです。

↑のような全体をテストをしてファイルごとに直して確認していく、というようなことはよくやります。最近ではHeadless Chromeへの移行時に似たようなことを実施しました。

一応言っておくと、ファイルごとに直していくとその変更が他のテストに影響することもあり得るので最後に全体をテストするのは大事です。

古いMacをHigh Sierraにアップデートしようとして「macOSをインストールできませんでした」

Tue, 15 May 2018 06:53:03 +0900

Yosemiteあたりが入ってるMacbook AirにHigh Sierraを入れようとしたら「macOSをインストールできませんでした」というのが出て再起動ループになってしまいました。

その時の詳細なエラーのスクショを取っていなくて説明できないのが苦しいところなんですが、インストーラが見つからない、的な内容のエラーが出ていたかと思います。

幸い再インストールなどせずとも復帰できたのでその手順を簡単に整理しておきます。

Macをリカバリーモードで起動

ディスクユーティリティを使用するために、リカバリーモードで起動します。

電源ボタンを押して Mac の電源を入れた直後、または Macが再起動を始めた直後に、キーボードの「command + R」キーまたは macOS復元のほかのキーの組み合わせを押して、Appleロゴまたは回転する地球儀が表示されるまでそのまま押し続けます。

macOS復旧から起動する方法 - Apple サポート (日本)

macOS復旧は、コンピュータに内蔵されている復旧システムです。macOSの再インストール、起動ディスクの修復／消去、Time Machineバックアップからの復元などを行うためのユーティリティが備わっています。お使いのMacの種類に合わせて、以下の手順に従ってください。

support.apple.com

First Aid

Macintosh HDのディスクを選んでFirst Aidで修復します。30分以上ぐらいの時間がかかった記憶があります。

3．「ディスクユーティリティ」をクリックして、「続ける」をクリックします。 4．「表示」＞「すべてのデバイスを表示」と選択します。 5．サイドバーで、修復したいディスクを選択します。 6．「First Aid」ボタンをクリックします。

Macのディスクユーティリティでストレージデバイスを修復する

ディスクで問題が起きた場合は、Macの「ディスクユーティリティ」を使って検証と修復を実行します。

support.apple.com

再起動・アップデート

この状態で再起動すると通常通りMacが立ち上がるようになります。起動ディスクが切り替わる用な感じなのだと思われます。これで再度ログインして、Mac App StoreからOSアップデートを実施したら動くようになりました。

Bluetoothで記録できる1byoneの体重計買った

Mon, 14 May 2018 06:42:15 +0900

対応のスマホアプリを起動している状態で体重計に乗るとBluetoothでデータを転送してくれて、ヘルスケアアプリにもデータを入れてくれる体重計を買いました。体重増やしたいのできちんとチェックしないといけません。

1byoneの体重計です。買ったときは3500円ぐらいでした。

1byone 体重計 Bluetooth 体組成計スマホ連動体脂肪計 smart scale 体重/体脂肪率/体水分率/推定骨量/基礎代謝量/内臓脂肪レベル/BMIなど測定 iOS/Android対応日本語アプリで健康管理

itunes.apple.com →https://itunes.apple.com/jp/app/snap/id418073146?mt=12

アプリの使い勝手、というか閲覧性は非常に悪いですが、データはある程度の精度できちんと記録されるし、ヘルスケア側に入るので、あとでどうとでも取り出せるのが良いです。

僕と妻でそれぞれ自分のiPhoneにアプリを入れて使っています。起動している端末に情報が転送されてくるのと、保存するかどうかの確認ダイアログがあるので間違って記録してしまうことはまずないです。

Macアプリをショートカットで起動できるようにするSnap

Sun, 13 May 2018 09:03:37 +0900

よく使うアプリはAlfredみたいなランチャーから起動するのが面倒なのでSnapという常駐アプリを使ってショートカットから起動できるようにしています。

例えばGoogle Chromeに「ctrl + shift + cmd + c」キーを割り当てていて、ブラウザを起動したいときやフォアグラウンドに持ってきたいときのこのキーを押します。また、フォアグラウンドにいるアプリのショートカットを押すとバックグラウンドに回ってくれます。

つまり、割り当てたショートカットを入力すると、フォアグラウンド↔バックグラウンドを交互に行き来できます。

一例を紹介すると、

ctrl+shift+cmd+Space → Emacs
ctrl+shift+cmd+c → Chrome
ctrl+shift+cmd+f → Finder
ctrl+shift+cmd+l → LINE
ctrl+shift+cmd+z → Franz
ctrl+shift+cmd+s → Slack

などなど。

こんな感じでぱぱっと切り替えられます。

fastlane/boardingでTestFlightのベータ版の配布ページが一瞬で作れた

Sat, 12 May 2018 06:18:55 +0900

それが、このツールです。

GitHub - fastlane/boarding: Instantly create a simple signup page for TestFlight beta testers

Instantly create a simple signup page for TestFlight beta testers - fastlane/boarding

terrillo/rn-apple-healthkit: A React Native package for interacting with Apple HealthKit

boardingはiOS開発者なら名前を聞いたことぐらいはあるであろうfastlaneのツール群のうちの1つで、iTunesConnectのベータテスターへの登録の部分をWebサイト経由で実現してくれるRailsアプリケーションです。

RailsアプリなのでHerokuへデプロイするのが容易なのですが、boardingではREADMEにDeploy to Herokuボタンがあるおかげで本当に一瞬でサイトを作ることができました。

予め用意しておくのはこのあたりです。

Heroku アカウント
iTunesConnectのアカウント情報
アプリのBundle ID
チーム名（複数組織に所属している場合）
テスターを追加するチーム名←後述
登録の際に必要なパスワード

チーム名ですが、今回は外部テスターという名前でチームを作りそこに追加しました。

Deploy to Herokuボタンを押すとHerokuのアプリ作成画面へ移動します。そこで↑で用意した値を環境変数に設定しておきます。僕は画像に文字を入れた箇所を入力しました。

パスワードなどを入れるので若干怖いかもですが、アカウントを乗っ取られない限り大丈夫です。心配なら2 Factor Authの設定をしておくとよいです。

環境変数の入力が終わったら画面一番下のDeploy appボタンを押すとHeroku側の設定が始まるので数分待ちます。これが終わったらもうサイトが出来上がっていて、登録もできるようになっています。

こんな感じの画面ができあがって、メールアドレスを入力してサブミットするとTestFlightからの招待メールが本当に届きました。

Herokuのアカウントさえ持っていれば本当に一瞬で作れたので驚きました。

React NativeでAppleのヘルスケアデータを取得する

Fri, 11 May 2018 06:33:40 +0900

React Nativeでヘルスケアに入っているデータを読み出せるかということを調査したので軽くまとめます。幸い睡眠や体重を記録しているのでそのデータを使って試してみました。

React Nativeのライブラリとしてはこちらを利用しました。

↓というのもあったのですが、

GregWilson/react-native-apple-healthkit: A React Native bridge module for interacting with Apple HealthKit data

1This package is undergoing a new direction.
2Please submit issues and pull request to terrillo/rn-apple-healthkit

とのことで、rn-apple-healthkitを使えばいいみたいです。

導入編

導入は4ステップです。

まずはライブラリを追加。

1% npm install rn-apple-healthkit

次にリンク。

1% react-native link rn-apple-healthkit

3番目にInfo.plitにパーミッション関係のメッセージを入れておきます。これがないとアプリが落ちるはずです。

1<key>NSHealthShareUsageDescription</key>
2<string>Read and understand health data.</string>
3<key>NSHealthUpdateUsageDescription</key>
4<string>Share workout data with other apps.</string>

最後に、iosディレクトリ以下のXcodeプロジェクト開いて、CapabilitiesからHealthKitをONにしましょう。READMEにも書いてあります。これがないと動きません。

利用編

権限のリクエスト

HealthKitへのアクセスをする前に、ユーザーに許可を求めるステップが必要です。ひとまずサンプル的に書くため、起動後に実行できるよう、React Nativeのルートコンポーネントと同じ場所に書いておきました。

 1import AppleHealthKit from 'rn-apple-healthkit';
 2const PERMS = AppleHealthKit.Constants.Permissions;
 3
 4const options = {
 5 permissions: {
 6 read: [PERMS.StepCount, PERMS.Weight, PERMS.SleepAnalysis],
 7 },
 8};
 9
10AppleHealthKit.initHealthKit(options, (err, results) => {
11 if (err) {
12 console.log('error initializing Healthkit: ', err);
13 } else {
14 console.log(results);
15 }
16});

データの取得

体重

例えば体重ならこんな感じでgetWeightSamplesにオプションを渡すと指定した期間のデータが返ってきます。

 1import AppleHealthKit from 'rn-apple-healthkit';
 2const UNITS = AppleHealthKit.Constants.Units;
 3
 4const options = {
 5 unit: UNITS.gram,
 6 startDate: new Date(2018, 4, 1).toISOString(), // 5月1日以降
 7};
 8AppleHealthKit.getWeightSamples(options, (err, results) => {
 9 if (err) {
10 console.log(err);
11 } else {
12 console.log(results);
13 }
14});

余談ですが、JavascriptのDateはmonthの範囲が0~11であることをすっかり忘れていて、最初次のように書いていてデータが取れずしばらくハマリました。

1new Date(2018, 5, 1) // これだと2018年6月1日になる

getWeightSamplesのコードのresultsにはこんな感じでオブジェクトが入ってきます。（Hugoの処理のせいか、変な{1}っていうのが入るのはなんだろう…？あとで直します）

1[
2 {
3 startDate: "2018-05-08T07:09:51.974+0900",
4 endDate: "2018-05-08T07:09:51.974+0900",
5 value: 58799.9992370605
6 }
7]

単位指定しないとポンドで来ちゃうからgramに変更してます。

睡眠

睡眠はほぼ同じような感じで取れました。

 1const options = {
 2 startDate: new Date(2018, 4, 1).toISOString(),
 3};
 4AppleHealthKit.getSleepSamples(options, (err, results) => {
 5 if (err) {
 6 console.log(err);
 7 } else {
 8 console.log(results);
 9 }
10});

resultsにはこんな具合で、INBETとかASLEEPといったステータスとその時間が返ってきました。

 1[
 2 {
 3 startDate: "2018-05-07T01:14:00.000+0900",
 4 endDate: "2018-05-07T07:14:00.000+0900",
 5 value: "INBED"
 6 },
 7 {
 8 startDate: "2018-05-07T06:57:00.000+0900",
 9 endDate: "2018-05-07T07:14:00.000+0900",
10 value: "ASLEEP"
11 }
12]

ヘルスケアアプリで見ると

INBED は就寝
ASLEEP は睡眠

となっているようで、眠っているときと寝ようとしているときとでステータスを分けられるようです。

サンプルアプリ

動くと思われるアプリをGitHubに置いておきました。

GitHub - pi-chan/RNHealthKitSample: rn-apple-healthkit sample app

rn-apple-healthkit sample app. Contribute to pi-chan/RNHealthKitSample development by creating an account on GitHub.

itunes.apple.com →https://itunes.apple.com/jp/app/id1164801111?mt=8

Apple Watchで睡眠を記録して2ヶ月ぐらい経った

Thu, 10 May 2018 06:01:19 +0900

眠るのが得意ではなく、ちゃんと眠れたかもよくわからないのでApple Watchとこちらのアプリを使って睡眠を記録してみました。

使い始めるのはすごく簡単で、アプリを入れてヘルスケアへのアクセスを許可してあげるだけで利用を開始できました。

だけどより凝った設定、パーソナライズした設定をできるようになっていて、検出精度を調整していくことができますし、iPhone操作中は起きているとみなすような設定をしたり、あとからデータを修正したりすることもできて、大変便利です。

僕は睡眠の判定を少し緩めに変えていたような気がします。

アプリでは

入眠時刻
起床時刻
深い睡眠/良質な睡眠の時間
心拍数

などなど、色々な情報を一覧できます。

メイン画面（その日の睡眠）

何時に寝て何時に起きて睡眠の質はどうだったのかがわかる、起動直後の画面です。

この日は夜中に子どもに起こされてトイレに付き合ってあげたあと、しばらく眠れなかった様子がちゃんと記録されています。深い睡眠、14分はきついですね。

履歴画面

ここではマンスリービューで過去の睡眠時間とその割合を一覧できます。日をタップすると画面下から詳細なビューが出てきて深い眠りの割合なんかを確認できます。

7時間以上の睡眠が緑色になるようで、僕の場合は7時間寝られている日は月の3分の1程度だということがわかります。

別の日時ビュー

別の見方のビューも提供されています（が、あまり使わないかな…）

とにかく、欲しい情報は各種ビューで大抵確認できるわけです。

ヘルスケアと同期

Appleのヘルスケアアプリにもデータが同期されているので、別のアプリから活用するなんてことも可能になります。

Circle CIでHeadless Chrome 解決編

Wed, 09 May 2018 06:40:03 +0900

CircleCIでHeadless Chromeを使ったテストが動かないっぽい件で、ひとまずunless使ってGemfileを条件分岐するというお行儀の悪いことをしていましたが、もしかしたら直ったような気がするので、改めてメモしておきます。

前々回の記事と、

Headless ChromeのテストがCircleCI上で動かなかった - PIYO Notes

おとといの記事でHeadlessChromeを使ってテストするようにしたよ、と書きました。 https://blog.piyo.tech/posts/2018-03-28-headless-chrome/ ですが、CircleCIではこんな感じのエラーを吐いて動きませんでした。 Selenium::WebDriver::Error::SessionNotCreatedError: session not created exception: Chrome version must be >= 64.0.3282.0 どうやら、circleciのイメージに元々入っているchromedriverと、gemとしてインストールしている chromedriver-helper が衝突することによって起こるらしいということがわかりました。

[追記あり]再びCircleCIでsession not created exception - PIYO Notes

前回の記事がこのへん。

4/19あたりからCircleCIでまたこのエラーがでるようになりました。 1 session not created exception: Chrome version must be >= 65.0.3325.0 多分、 Gemfile に入れていた chromedriver-helper とDockerイメージに入っているChromeのバージョンが衝突しているのが原因だと思います。以前の調査記事でも書いた内容です。

kenkono1.com →http://kenkono1.com/optimum-ranking/

そもそもの理由はchromedriver-helpergemがインストールするchromeドライバーとCircleCIのイメージに入っているChromeのバージョンに整合性がないのがえらーとなっていた理由です。で、Chromeのアップグレードを色々試みたんですが、どうやらこれでいけそうでした。

1- run:
2 name: Install Latest Chrome
3 command: |
4 sudo apt install libappindicator3-1
5 curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
6 sudo dpkg -i google-chrome.deb
7 sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
8 rm google-chrome.deb

バージョンの整合性は解決したものの、Chrome failed to start: crashedのようなエラーが出たりとか、別のプロジェクトでno such sessionという話も聞いたりしていたので、テスト用にno-sandboxオプションを追加してこれらを回避することにしました。

ログイン - Google アカウント

sites.google.com

テストで一時的に使うのにセキュリティ上の理由はあまりないはずなので、sandbox外で実行するのは問題ないはず。これで起動しないなどのエラーを回避できたので、ひとまずこれで様子をみたいと思います。

iHerbでONゴールドスタンダードなど15%オフ！明日(5/9)までとのこと

Tue, 08 May 2018 06:31:35 +0900

気づくのがギリギリになっちゃったんですが、5/9までOptimum Nutritionのプロテインなどなどが15%オフらしいです。

→ https://iherb.co/4MrevwG1

いつも買ってるものだし、ちょうどなくなってきたので次を買っておこうかな。

↓こんな風に22種類の味をランキングにしているツワモノもいるみたいです。

過去僕は

クッキークリーム
ダブルリッチチョコレート

と飲んできて、クッキークリームは甘すぎ、チョコはバナナとミキサーすればまあ美味しいけど単品はきつい、という感想でした。

今回はアイスのなかではバニラが一番好きなこともあるので、バニラアイスクリーム味にチャレンジしてみようと思います。

Optimum Nutrition, Gold Standard 100%ホエイ、バニラアイスクリーム、5 lb (2.27 kg)

MobXでTodoアプリ[Part3] Storeをデバッグしてみる

Mon, 07 May 2018 06:27:34 +0900

3部作のPart3です。

前回はMobXのStoreをAsyncStorageを使って永続化するmobx-persistを使ってみました。

MobXでTodoアプリ[Part2] データを保存してみる - PIYO Notes

3部作のPart2です。 MobXでTodoアプリ[Part1] MobX導入まで MobXでTodoアプリ[Part2] データを保存してみる MobXでTodoアプリ[Part3] Storeをデバッグしてみる前回MobXを導入してStoreにデータを追加すると画面が更新されるところまでできるようになりました。

GitHub - jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools

アプリケーションとして最低限のところはこれでなんとかなります。あとは開発を円滑に進めるべく、デバッグの方法がわかればOKかと思います。ストアにどんなデータが入っているかを自由に見られるとだいぶ効率が違います。

デバッグ用アプリ

手始めにDebuggerアプリを入れておきます。React NativeはChromeのDeveloperコンソールなんかでもデバッグ可能ですが、スタンドアローンのアプリを入れておくと何かと便利です。

The standalone app based on official debugger of React Native, and includes React Inspector / Redux DevTools - jhen0409/react-native-debugger

GitHub - pi-chan/MobxTodoApp at part3

デバッグ用アプリを起動した状態でここまでのTodoアプリを起動して、デバッグメニュー（iPhoneならcmdキー+dキー）から「Debug JS Remotely」でデバッグを有効にしてみます。アプリとデバッガが接続されますが、↓のようにstateは何も見えていません。

アプリの変更

デバッガでstateを閲覧できるようにしていきます。まずはデバッグ用のライブラリを最初にインストール。

1% npm install mobx-remotedev

といきたいところですが、残念ながらmobx-remotedevのメインブランチでは最新のMobx 4系への対応がありません。開発頻度も落ちているので仕方ないので紹介されていたfork版参照して使ってみます。

1% npm install 'crayonzx/mobx-remotedev#mobx4'

次にデバッガで見たいStoreにデコレータをつけてあげればOK。

1import remotedev from 'mobx-remotedev';
2
3@remotedev
4export default class TodoStore {
5 // ...
6}

これでサーバーの再起動とアプリのリロードしたら↓のようにstateが表示されます。

他にもstate全体を見たりデータの変化（アクション）を見たり、Storeに対して色々できる、見られるようになるので必須と言えそうです。

今日までのソースコードはpart3タグとしてここにおいてあります。

Contribute to pi-chan/MobxTodoApp development by creating an account on GitHub.

MobXでTodoアプリ[Part1] MobX導入まで - PIYO Notes

MobXでTodoアプリ[Part2] データを保存してみる

Sun, 06 May 2018 06:54:41 +0900

3部作のPart2です。

前回MobXを導入してStoreにデータを追加すると画面が更新されるところまでできるようになりました。

3部作のPart1です。 MobXでTodoアプリ[Part1] MobX導入まで MobXでTodoアプリ[Part2] データを保存してみる MobXでTodoアプリ[Part3] Storeをデバッグしてみる以前も書いたように、ここ1年ほどReact Nativeによるアプリ開発を時々行っています。凝ったアプリでなければ割とサクッと作れるのが良いです。

GitHub - pi-chan/MobxTodoApp at part2

前回までの実装だとアプリを起動し直したとき（React Native開発版ではリロードしたときも該当）に作ったTodoが消えてしまいます。今日はこれをキープできるような実装に変えたいと思います。

今日の分のソースコードはここに、前と別のタグを打って置いてあります。

Contribute to pi-chan/MobxTodoApp development by creating an account on GitHub.

GitHub - pinqy520/mobx-persist: persist mobx stores

前回からの変更箇所

まずはmobx-persistというライブラリを導入します。

persist mobx stores. Contribute to pinqy520/mobx-persist development by creating an account on GitHub.

GitHub - mobxjs/mobx-react: React bindings for MobX

1% npm install mobx-persist

今回変更する箇所は2箇所です。作ったストアをAsyncStorageを使って永続化するところと、ストアのうち、どの値を永続化対象にするのか？というところです。

全体の差分が多くないので全部載せちゃう。

hydrate

まずhydrateのところ、ここがストアとストレージを同期するための部分です。

1hydrate('todos', todoStore);

この一行で起動時に読み込んでくれるし、todoStoreに更新があったら保存しておいてくれます。

persist

次にストア側の記述です。ここでは@persistというデコレータを値に付けることで保存対象とします。通常の値であれば@persistと書くだけでOKですが、配列やオブジェクトの場合には@persist('list')などとして、型のようなものを指示しないと動きません。

保存されている様子

リロード後にも残っているのがわかります。

MobXでTodoアプリ[Part1] MobX導入まで

Sat, 05 May 2018 06:58:38 +0900

3部作のPart1です。

以前も書いたように、ここ1年ほどReact Nativeによるアプリ開発を時々行っています。凝ったアプリでなければ割とサクッと作れるのが良いです。

さてReact Native（というかReact）単体だとデータ管理が面倒、バケツリレーが云々という話がよくあります。その問題に対応すべく色々なFluxなフレームワークが存在していて、中でもReduxがよく使われるようになったという流れが2年前ぐらいにあったと記憶しています。

そういう流れで僕もReduxを使ってアプリ開発をしていましたが、ここ数ヶ月MobXというのをよく聞くようになりました。データ管理の用途だったらMobXで十分だよという話をよく見かけたようが気がするので、まずは試そうということでTodo的なアプリを作ってみることにしました。

React bindings for MobX. Contribute to mobxjs/mobx-react development by creating an account on GitHub.

GitHub - pi-chan/MobxTodoApp at part1

結論としてはActionやらReducerやらを書かなくていいのでかなりシンプルになるなあという感想です。最低限動く状態を目指してTodoアプリを作るところをやってみようと重います。

ソースコードはタグを打って公開してあります。

Contribute to pi-chan/MobxTodoApp development by creating an account on GitHub.

MobxTodoApp/TodoStore.js at part1 · pi-chan/MobxTodoApp

準備

アプリを作ったり、MobXを入れたりします。

% react-native init MobxTodoApp
cd MobxTodoApp
% npm install mobx mobx-react

Decoratorを使うためにbabelのプラグインをいれます。

% npm install babel-plugin-transform-decorators-legacy
.babelrcを以下のように変更

1{
2 "presets": ["react-native"],
3 "plugins": ["transform-decorators-legacy"] // この行を追加
4}

ストアを書く

TodoStoreというのを作って、追加と削除をできるようにしてみます。

 1import { observable, action } from 'mobx';
 2
 3export default class TodoStore {
 4 @observable todos = [];
 5
 6 @action.bound
 7 onAdd(todo) {
 8 this.todos = [...this.todos, todo];
 9 }
10
11 @action.bound
12 onDelete(todo) {
13 this.todos = this.todos.filter(t => t !== todo);
14 }
15}

todoはArrayで持つ
onAddではArrayの末尾に新しい項目を追加
onDeleteでは一致するものを削除

入力と一覧の画面を作る

MobxTodoApp/TodoScreen.js at part1 · pi-chan/MobxTodoApp

import { inject, observer } from 'mobx-react';
@inject('todo')
@observer
export default class TodoScreen extends Component {
render() {
// 略
}
}

@observerはプロパティの変更に応じて再描画するための指定で、@inject('todo')のところは、todoというストアをpropsにinjectするよの指定です。ざっくりいうと。ここは僕ももうちょとちゃんと理解しないと、な箇所です。

ともあれ、これでTodoStoreの内容を使えるようになるし、新しいTodoが追加されれば再renderされるようになりました。

renderの中身は省略しますが、適当にテキスト入力があって、todosの内容をFlatListで表示するというシンプルな内容になってます。

Providerで囲む

injectで各storeを使うためにはProviderを使うと便利です。。内部的にはReactのContextの仕組みが使われているようで、Provider配下のコンポーネントで使いたいストアを渡しておくと、配下のコンポーネントにinjectできるようになるという理解をしています。

MobxTodoApp/App.js at part1 · pi-chan/MobxTodoApp

storeを作ってProviderに渡してます。Provider配下には↑で作ったTodoScreenが居ます。

 1const todoStore = new TodoStore();
 2const stores = {
 3 todo: todoStore,
 4};
 5
 6type Props = {};
 7export default class App extends Component<Props> {
 8 render() {
 9 return (
10 <Provider {...stores}>
11 <TodoScreen />
12 </Provider>
13 );
14 }
15}

最低限動いた様子

ステータスバーの下に潜っちゃってるのはご愛嬌。特に永続化していないのでリロードするたびに新たにストアが作られてデータ消えちゃいます。Part2では永続化のことを書いてみようかと思ってます。

nodebrewでnode.js v10を入れる

Fri, 04 May 2018 06:58:23 +0900

nodebrew自体はhomebrewでインストールしました。

まず、nodebrew自体が古いとアレなのでアップデートします。

1% nodebrew selfupdate

次に、v10があるかどうかを一応確認。

1% nodebrew ls-remote
2
3...
4
5v10.0.0
6
7...

ありました。次にバイナリをインストールします。

% nodebrew install-binary …

とこの時点でzshの補完が効くかなと思ったんですが、参照している内容が違うのかv10は見当たりませんでした。

仕方ないので直打ちしてインストールを試みます。

1% nodebrew install-binary v10.0.0
2Fetching: https://nodejs.org/dist/v10.0.0/node-v10.0.0-darwin-x64.tar.gz
3######################################################################## 100.0%
4Installed successfully

アッサリ終わりました。

実は最初、補完に出ないからまだ使えないのかなーと思ってしまったのです。入った入った。

Apple WatchやAirPodsの充電に困ったのでDockを買いました

Thu, 03 May 2018 06:32:18 +0900

Macbookのスタンドを昨日紹介しました。今日はさらに小物の充電周りの話を書きます。

blog.piyo.tech →https://blog.piyo.tech/posts/2018-05-02-macbook-pro-stand/

Apple WatchやらAirPodsやらもっているのですが、最新ではないのでAirPowerのような充電には対応していません。最近はiPadやApple Pencilなども増えて充電周りが困った感じになってしまいました。

色々と調べた結果、Apple WatchとAirPodsとiPhoneを同時に充電できるDockをお手頃な値段で見つけたのでものは試しと思い購入してみました。

amazon.co.jp →ASIN: B07BGXNM18

そして、早速使ってみたのがこちらです。

どうしてもケーブル周りはごちゃっとしがちで整理しきれませんでしたが、Apple Watchの充電がしやすくなったことと、AirPodsの充電場所ができたことでかなり便利になったかと思います。

ちなみにこの製品、iPadにも対応していると書いてありましたが、実際にiPhoneのところにiPadをさしてみるとギリギリささるものの、WatchのDockと干渉してしまい斜めになってしまいます。その上、iPhoneなら支えられる背もたれもiPadでは重くて支えられずにDock全体が倒れてしまいます。iPad対応とはよく言ったもんだ、という感じなのでiPadユーザーの人は注意してください。

ちなみに、DockスタンドなりiPhoneスタンドなりに、Pencil充電用のアダプターをつなぐことでPencilの充電を場所を取らずに充電できます。これはこれで便利です。むしろ、iPhoneの場所をPencil専用にしてもいいぐらい。

これ、ケーブル汚いなｗもうちょっとまとめます。

Gmailやカレンダーやチャットアプリを複数アカウントで使ってるならFranzが便利

Mon, 30 Apr 2018 06:54:32 +0900

個人でも会社でもGoogle関連のサービスを使っていると、双方のアカウントを行き来するような感じなったり、思ってたのと違う方のアカウントでDriveの共有URL開いてしまったり、ブラウザのタブ数が大きく増えてしまったり、まあ色々不便なことがあります。

そこで僕はFranzというアプリを使っています。Franzはチャット、メッセンジャー系のアプリを1つにまとめて管理できるよというのが元々の売りでしたが、（設定を書けば）Webアプリケーションであればなんでも埋め込むことができます。

Franz – a free messaging app for Slack, Facebook Messenger, WhatsApp, Telegram and more

Franz is a free messaging app /former emperor of Austria, that combines chat & messaging services into one application.

meetfranz.com

Franzでは、よく使うサービスをFranzアプリの中にタブのような感じで登録して、常に開いた状態にできるという感じのアプリです。

複数のアカウントでGmailやGoogleカレンダーを使っている場合は、それぞれを別のセッションで独立した状態で立ち上げたままにできるのでいつでもそれぞれのアカウントにアクセスできます。

SlackやFacebookメッセンジャーなどのメッセージアプリは通知をまとめてバッジにすることなどもでき、とりあえずFranzを開けばOKという状態にできます。

という話を先日同僚に勧めたらめちゃくちゃヒットしたのでブログにしました。

ぴーちゃん(@pi_cha_n) に教えてもらった Frantz がめっちゃ便利
仕事用の Inbox やら Calendar やらをまとめるのにも便利だし、プライベート用のちらかった Discord をまとめるのにも便利
— Hirokatsu Endo (@ruzia) April 28, 2018

ついでに、最新バージョンであるバージョン5がベータ版として配布されていることがわかったので新しいのに変えてみました。タブが上にあったのが左側に来てて見慣れないけど、ちょっとシュッとした感じで良い。

上から順に

個人のInbox
会社のInbox
個人のカレンダー
会社のカレンダー
Tweetdeck
Facebook Messenger

を登録してます。

React NativeのPlatform.selectについて

Sun, 29 Apr 2018 06:21:32 +0900

react-native initが生成するコードの↓の部分にある、Platform.selectを知らなかったので調べてみました。いやー、いっつもさっさと削除しちゃってちゃんと見てなかったです。

1const instructions = Platform.select({
2 ios: 'Press Cmd+R to reload,\n' +
3 'Cmd+D or shake for dev menu',
4 android: 'Double tap R on your keyboard to reload,\n' +
5 'Shake or press menu button for dev menu',
6});

ちなみに使い方はこう。

1<Text style={styles.instructions}>
2 {instructions}
3</Text>

単に置くだけ。

ドキュメントによると、

There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.

ということで環境に応じて値を切り替えるときに使えるわけですねー。いやー、いつもifとか三項演算子とかで書いてたー。↓みたいな感じで。

1const apiKey = Platform.OS === 'ios' ? 'key-for-ios' : 'key-for-android';

で、この手のコードって読みづらくなるんですよねー。今後はPlatform.selectで書くのがよさそうだなと思いました。

selectの仕組み

このselect、どういう仕組みかを簡単に説明します。

そもそもimport { Platform } from 'react-native' した時点で、iosなりandroidなりのコードが読まれています。これはReact Nativeの仕組みで環境ごとに別のコードを読み込みわける仕組みによって実現されています。なので、iOSではimportした時点でこのPlatformはiOS用のPlatformなんですよね。

では、これのselect関数を見てみましょう。

1const Platform = {
2 select: (obj: Object) => 'ios' in obj ? obj.ios : obj.default,
3}

selectに渡されたオブジェクトにiosというキーがあればその値を、なければdefaultキーのものを返す、という実装になっています。

従って、最初のコードではinstructionsには単純に文字列が入っていることになるわけです。

React NativeのSectionListの覚書

Sat, 28 Apr 2018 06:42:54 +0900

React Nativeでリストを表示するときはFlatListを使いますが、セクションに分かれているような場合にはSectionListを使います。

0.42まではどちらもFlatListで、結構頑張らないといけなかったのですが、0.34からFlatList, SectionListの2つが導入されました。メモリ使用やパフォーマンスなど色々な面でListViewに勝るようです。

Better List Views in React Native · React Native

Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:

I am an indie app developer focusing on building high-quality productivity and educational apps.

FlatListはグループ分けのないリスト、SectionListはグループ分けのあるリストです。FlatListのデータは単にArrayであればよいですが、SectionListではデータやメタデータをオブジェクトにしたもののArrayになるのでちょっと複雑です（と言ってもListViewの頃に比べたらシンプル）

以下、一画面分の画面イメージとサンプルコード載せときます。あとで自分が困って検索する自信あるので、スニペット的に残しておきます。

 1import React, { Component } from 'react';
 2import {
 3 Text,
 4 View,
 5 SectionList,
 6 StatusBar,
 7} from 'react-native';
 8
 9type Props = {};
10export default class App extends Component<Props> {
11 componentDidMount() {
12 StatusBar.setHidden(true);
13 }
14
15 renderItem({ item }) {
16 return (
17 <View
18 style={{
19 height: 40,
20 justifyContent: 'center',
21 borderTopWidth: 1,
22 borderTopColor: '#EAEAEA',
23 }}
24 >
25 <Text>{item}</Text>
26 </View>
27 );
28 }
29
30 renderSectionHeader({ section }) {
31 return (
32 <View
33 style={{
34 height: 28,
35 backgroundColor: '#F0F0F0',
36 justifyContent: 'center',
37 }}
38 >
39 <Text>{section.title}</Text>
40 </View>
41 );
42 }
43
44 render() {
45 return (
46 <SectionList
47 style={{ flex: 1 }}
48 keyExtractor={item => item}
49 renderItem={this.renderItem.bind(this)}
50 renderSectionHeader={this.renderSectionHeader.bind(this)}
51 sections={[
52 {
53 title: 'グループA',
54 data: ['ロシア', 'ウルグアイ', 'エジプト', 'サウジアラビア'],
55 },
56 {
57 title: 'グループB',
58 data: ['ポルトガル', 'スペイン', 'イラン', 'モロッコ'],
59 },
60 {
61 title: 'グループC',
62 data: ['フランス', 'ペルー', 'デンマーク', 'オーストラリア'],
63 },
64 {
65 title: 'グループD',
66 data: ['アルゼンチン', 'クロアチア','アイスランド', 'ナイジェリア'],
67 },
68 {
69 title: 'グループE',
70 data: ['ベルギー', 'スイス', 'コスタリカ', 'セルビア'],
71 },
72 {
73 title: 'グループF',
74 data: ['ドイツ', 'メキシコ', 'スウェーデン', '韓国'],
75 },
76 {
77 title: 'グループG',
78 data: ['ベルギー', 'イングランド', 'チュニジア', 'パナマ'],
79 },
80 {
81 title: 'グループH',
82 data: ['ポーランド', 'コロンビア', 'セネガル', '日本'],
83 },
84 ]}
85 />
86 );
87 }
88}

keyExtractorを忘れると警告がでます。というか大体忘れて警告が出て、なんだっけ？となる。Reactでkeyを渡す必要があるのと同じ理由でリスト内の各アイテムにkeyが必要です。そのkeyにdataの何を使うかを返す関数を渡しておけばOK。

renderItemやrenderSectionHeaderでそれぞれの要素をどう描画するか指定しています。今回はサボって<View>使ってますが、コンポーネント使っても良さそう。

もうすぐワールドカップですね。

Markdown対応のノートアプリついて

Fri, 27 Apr 2018 06:16:30 +0900

仕事のメモや個人的なメモ、ブログの下書きなどを、ノートアプリで書いています。元々はEvernoteを使っていた部分だけど、あれはMarkdownに対応してなくて文章などを書くのに不便だったのでやめました。

今はQuiverというアプリを利用しています。

yliansoft

happenapps.com

このアプリはPCでの体験はそれはもう100点満点で、Markdown対応、ショートカット、シンタックスハイライト、テーマ、なんならLaTexなんかも書けるということでかなり便利に使っています。

ノートは専用のフォーマットでファイルに書き出されます。ファイルベースなのでDropboxで容易に同期することが可能です。その他、iCloud DriveやGoogle Driveなどの同期対象になっているディレクトリ配下に置くことでファイルを同期できます。

唯一の困りごと

（実用に耐える）アプリがないです。公式アプリがあるもののDropboxベースの同期をするためか動機が非常に遅いです。またDropboxのファイルを更新できないので、Read-Onlyです。PCにいないときに考えたことなどを追記できません。

yliansoft

I am an indie app developer focusing on building high-quality productivity and educational apps.

happenapps.com

仕方がないので今はAppleのメモアプリを併用して、iPhoneではメモに書き、PCでQuiverに書き写すみたいなことをしています。

（Quiverでこの下書きを書いている間に3回ぐらい固まってレインボー出た。たまに起こる。）

気になる乗り換え先

Inkdrop というやつが気になっています。

blog.odoruinu.net →https://blog.odoruinu.net/2016/10/04/inkdrop/

PC版の使い勝手はQuiverに劣らずというかかなりいい感じで使え、iPhoneアプリもあり書き込みにも対応しています。トライアルで触った感想はほぼ「買い」。

だけど1つハードルがありました。それはQuiverのNotebookの移行を考えなければならないこと。インポートプラグインみたいなものがいくつかあるんですが、Quiverフォーマットをそのまま取り込めるものはありません。MarkdownやHTMLにしたものをインポートならできそうでした。

なんとなくそのあたりの方法でインポートを実行してみたのですが、ノートの日時が引き継げなくてそれ以上は断念しました。

バックエンドにはPouch DBとやらを利用しているようで、直接そのDBに書き込むことで対応は可能かもしれないです。ただほとんど知識がないので添付ファイルの扱いなどが簡単には対応できなそうだなーと思いあきらめたとこでした。

何か良いものはないかな

Markdownで書ける
プレビューできる
個別ファイルで管理する必要がない（裏で勝手にやってくれる）
アプリで閲覧・編集できる

Inkdropが大体満たしているんですよねー。移行ツールをがんばって書くのが一番いいのかな…

Hugoブログのシンタックスハイライトに行番号をつける

Mon, 23 Apr 2018 06:02:42 +0900

このブログ、ソースコードを載せることが多いです。載せたコードについて書く時、◯行目とかいいたくなったので行番号を表示したいなと思いました。

でも、Hugoってどうやってソースコード出してるんだろう？ということで調べてみると、元々はPygments、現在はGo実装のChromaというのを使っているようです。

でも、色々設定を変えてみても変わらない。何かと思ったらRobustテーマはhighlight.jsを使っているようでした。

仕組みを変えると大変そうなので、この仕組のまま行番号を出せないかなと思い調べてみると、highlight.jsの行番号拡張みたいなのがあり、すごく楽に使えそうだったので導入しました。

GitHub - yauhenipakala/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

Line numbering plugin for Highlight.js . Contribute to yauhenipakala/highlightjs-line-numbers.js development by creating an account on GitHub.

React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話 - PIYO Notes

まず、ベースのhtmlでスクリプトを読み込むようにします。元々highlight.min.jsがあったのでその次の行に入れました。

1<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

そのすぐ下の<script>タグで実行します。

1<script>
2 hljs.initHighlightingOnLoad();
3 hljs.initLineNumbersOnLoad(); <-- この行を追加
4</script>

ついでにカラーテーマをsolarized-darkからmonokai-sublimeに変更しました。

軽くcssで微調整をして完成です。Before/Afterはこんな感じ。

Before

After

React Nativeでのアニメーションについて整理しとく

Sun, 22 Apr 2018 06:12:18 +0900

React NativeにはUIをアニメーションさせる機能があり、こちらの記事で取り上げたアプリでも一部で使用しています。

自社サービスRemottyのアプリを作り直すためにReact Nativeを習得してリプレイスしました

Animations · React Native

とはいえ、そのときは作ること優先でかなりベタに書くやり方をしました。今回はアニメーションの実装の仕方について整理したり、OSSのライブラリがどのような実装をしているのか、などを見ていきたいと思います。

ベーシックな書き方

公式ドキュメントのアニメーションのページにある最初のサンプルコードが一番シンプルな事例と言えそうなのでそれを持ってきます。

Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.

GitHub - KBLNY/react-native-message-bar: A notification bar alert displayed at the top of the screen for react-native

 1class FadeInView extends React.Component {
 2 state = {
 3 fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
 4 }
 5
 6 componentDidMount() {
 7 Animated.timing( // Animate over time
 8 this.state.fadeAnim, // The animated value to drive
 9 {
10 toValue: 1, // Animate to opacity: 1 (opaque)
11 duration: 10000, // Make it take a while
12 }
13 ).start(); // Starts the animation
14 }
15
16 render() {
17 let { fadeAnim } = this.state;
18
19 return (
20 <Animated.View // Special animatable View
21 style={{
22 ...this.props.style,
23 opacity: fadeAnim, // Bind opacity to animated value
24 }}
25 >
26 {this.props.children}
27 </Animated.View>
28 );
29 }
30}

ポイントは3つかなと思っています。

Animated.Value

アニメーションで変化する値。コンポーネントはこれをstateに持ちます。

styleや色々なpropertyとして使うことができます。

Animated.View

アニメーション可能な<View>で、stateとして持っているAnimated.Valueな値をstyleに持っていて、値の変化に応じてViewが変化していきます。

Animatedには他にも

Animated.Image
Animated.ScrollView
Animated.Text

などがあるそうですが、使ったことないです。Text！？って感じです。

Animated.timing

Animated.Valueな値をどのように変化させるか、というアニメーションの肝を司る命令です。この例ではコンポーネントマウント時に値を変化させるため、componentDidMount()内でstartさせています。

と、ここまでは僕の知ってる書き方で、うんまあそうだねという感じ。

ライブラリを覗いてみる

react-native-message-bar

アプリの上にニュッと出てくるアラートみたいなのを手軽に実装できるライブラリで、先のアプリでは通信の失敗のときなんかに使っています。滅多に見ないはず。

A notification bar alert displayed at the top of the screen for react-native - KBLNY/react-native-message-bar

react-native-message-bar/MessageBar.js at master · KBLNY/react-native-message-bar

メインのコンポーネントを覗いてみます。

 1// 初期設定
 2this.animatedValue = new Animated.Value(0);
 3
 4// 表示するとき
 5Animated.timing(this.animatedValue, {
 6 toValue: 1,
 7 duration: this.state.durationToShow
 8}).start(this._showMessageBarAlertComplete());
 9
10// 非表示にするとき
11Animated.timing(this.animatedValue, {
12 toValue: 0,
13 duration: this.state.durationToHide
14}).start(this._hideMessageBarAlertComplete());

なるほど、Animated.ValueとAnimated.timingが使われていて、最初の例とあまり変わらないですね。

では、このthis.animatedValueがどのように使われるかを見てみます。

 1_apllyAnimationTypeTransformation() {
 2// 略
 3 switch (animationType) {
 4 case 'SlideFromTop':
 5 var animationY = this.animatedValue.interpolate({
 6 inputRange: [0, 1],
 7 outputRange: [-windowHeight, 0]
 8 });
 9 this.animationTypeTransform = [{ translateY: animationY }];
10 break;
11// 略

ここでのポイントは、this.animationValue.interpolateです。inputRangeの区間をoutputRangeの区間に置き換えます。ここでは0〜1を-windowHeight〜0としています。

ここで代入されているthis.animationTypeTransformは↓な感じでAnimated.Viewのスタイルとして使われています。

1<Animated.View style={{ transform: this.animationTypeTransform, ...

transformYは-windowHeight〜0の間で変化するというわけですね。このようにinterpolateを使うと、Animated.Valueの変化を別の区間にマッピングして使うことができます。

このライブラリは設定によって表示位置変えることができます。そのため、設定に応じてアニメーションに必要なパラメータは異なります。それぞれにAnimated.Valueを用いるのではなく、0〜1に変化する1つのパラメータを設定内容とinterpolateによって使いまわすことでシンプルな実装にできています。

もう1個ぐらい見てみましょう。

react-native-mentions

GitHub - harshq/react-native-mentions: Mentions textbox for React Native. Works on both ios and android.

Mentions textbox for React Native. Works on both ios and android. :whale: - harshq/react-native-mentions

react-native-mentions/MentionsTextInput.js at master · harshq/react-native-mentions

メンション候補をサジェストしてくれるUIをもったInputです。

こちらは下からニュッと出て、また下にニュッと消える動きですね。

アニメーションの実装部分を抜粋するとこんな感じです。

 1// 初期設定
 2suggestionRowHeight: new Animated.Value(0),
 3
 4// 表示
 5Animated.timing(this.state.suggestionRowHeight, {
 6 toValue: height ? height : this.props.suggestionRowHeight,
 7 duration: 100,
 8}).start();
 9
10// 非表示
11Animated.timing(this.state.suggestionRowHeight, {
12 toValue: 0,
13 duration: 100,
14}).start();

こちらはシンプルに0からheightまで値を変化させてますね。

render()では、

1<Animated.View style={[{ ...this.props.suggestionsPanelStyle }, { height: this.state.suggestionRowHeight }]}>
2 ...
3</Animated.View>

という感じで値をそのまま使っています。シンプル。

おわり

Animated.Value
Animated.View
Animated.timing

の3つに加えて、

interpolate

辺りを把握しておけば基本的なことは大体できそうな感じがしました。

あとアニメーションが絡む場合はコンポーネントに切り出して、アニメーション絡みのコードをコンポーネントに閉じたほうがよさそうです。と、ライブラリのコードを読んで思いました。初期設定、表示、非表示とそれだけでコード量が増えるんですよね。リファクタリングしたい気持ち。

テキスト入力し忘れをユーザースクリプトで少しばかり回避する

Sat, 21 Apr 2018 06:55:20 +0900

なんてことはない話です。

AWSのOpsworks上での操作において、あるプロジェクトでは運用上コメントを書いてボタンをポチする必要があるケースがあります。先日コメントを書き忘れる事案が発生したので、ユーザースクリプトでちょっと工夫しました。

これで回避できるのか？という感じもしますけどとりあえずはやってみましょう。

まず、ブラウザにTampermonkeyを入れます。ユーザースクリプトを登録したり自分で書いたりできるブラウザ拡張です。

ホーム | Tampermonkey

ホーム

tampermonkey.net

Tampermonkeyをインストールしたらおもむろにスクリプトを書きます。

 1// ==UserScript==
 2// @name name
 3// @namespace http://tampermonkey.net/
 4// @version 0.1
 5// @description try to take over the world!
 6// @author You
 7// @match https://console.aws.amazon.com/opsworks/*
 8// @grant none
 9// ==/UserScript==
10
11(function() {
12 'use strict';
13
14 // Your code here...
15 setTimeout(function() {
16 $('button[data-action="deploy.app"]').prop("disabled", true);
17 }, 5000);
18
19 $(document).on('change', 'textarea#deployment_comment', function() {
20 $('button[data-action="deploy.app"]').prop("disabled", false);
21 })
22})();

今回は

ボタンをdisabledにする
コメントのテキストエリアを変更したらボタンがenabledになる

としました。

画面的にはこんな感じです。右下のボタンはページロード後に追加で表示されるため、表示後にdisabledにしてあげる必要があります。きちんとやるのは面倒だったので適当に5秒待ってから実施しています。

コメントを書かないと右下のボタンを押せません。厳密に言うと文字を入れてから消した場合にもボタンが押せちゃいますが、それはそれでOKとします。特定のプロジェクトにのみ必要な対応なのです。

ユーザースタイルとかユーザースクリプト、個人的にはあまり使わないですが、運用上気をつけないといけないことに対応する用途はいいかもですね。本番サイトに警告を出すみたいなことが柔軟できそうだし。

[追記あり]再びCircleCIでsession not created exception

Fri, 20 Apr 2018 06:55:33 +0900

4/19あたりからCircleCIでまたこのエラーがでるようになりました。

1session not created exception: Chrome version must be >= 65.0.3325.0

多分、Gemfileに入れていたchromedriver-helperとDockerイメージに入っているChromeのバージョンが衝突しているのが原因だと思います。以前の調査記事でも書いた内容です。

Headless ChromeのテストがCircleCI上で動かなかった - PIYO Notes

circleci/ruby - Docker Hub

テスト周りの設定は何も変更していない中でこれが起きました。Dockerイメージが怪しいので見てみました。

すると、こんな感じで最終更新が11 hours agoになっています。これ、怪しいかも？（これ書いてるのは4/19の夜です）

Docker側のChromeのバージョンが上がったような気がします。先日のエラーのときはChrome version must be >= 64.0.3282.0でしたから。

以前まではたまたまgem 'chromedriver-helper'とDocker側が一致していたのだと思います。なので前記事でも試したように、CircleCI側ではchromedriver-helperを使わないように分岐してあげ、CircleCI側でRebuild without Cacheしたところビルドが通るようになりました。

1group :test do
2 gem 'chromedriver-helper' unless ENV.key?('CIRCLECI')
3end

この分岐は基本入れておいたほうが良さそうです。

また、CI側ではcacheを使わずに毎回bundle installするのが無難です。Gemfileにunlessによる条件分岐があるせいで、キャッシュを使うとリポジトリのGemfile.lockを見る（＝chromedriverが入っている状態になる）なので、結局バージョンの不整合が起こり得ます。

追記

もうちょっと詳細にバージョンを調べてみました。

今回使ってたイメージはcircleci/ruby:2.4.3-node-browsersです。

google-chrome

1circleci@6fb99568c11a:~$ google-chrome --version
2Google Chrome 64.0.3282.186

chromedriver

1circleci@6fb99568c11a:~$ chromedriver
2Starting ChromeDriver 2.38.551591 (bcc4a2cdef0f6b942b2bb8049068f65340fa2a69) on port 9515

ChromeDriverの対応

リリースノートには、

1----------ChromeDriver v2.38 (2018-04-17)----------
2Supports Chrome v65-67

とあるので、このバージョンの食い違いが原因でした。もしかするとChromeDriver gem側で入るバージョンが変わったのかもしれないです。

イメージ側のchromeに合わせるのであれば、CIでテストを流す前にchromedriver-updateでダウングレードさせればいけそうでした（ローカルのCircleCIで確認済）。

1- run:
2 name: Downgrade chromedriver
3 command: |
4 bundle exec chromedriver-update 2.37

だけど、Rubyのバージョンアップなんかでイメージ側を変えるときにここの指定バージョン変えるのも面倒ですよねー。なのでひとまずはunlessで逃げることにして、問題でたら考えます。

Rubyで繰り返し予定を扱えるice_cube gemをざっくり紹介

Thu, 19 Apr 2018 06:36:26 +0900

Googleカレンダーみたいな繰り返し予定をRubyやRailsで扱う方法を解説します。

GitHub - ice-cube-ruby/ice_cube: Ruby Date Recurrence Library - Allows easy creation of recurrence rules and fast querying

Ruby Date Recurrence Library - Allows easy creation of recurrence rules and fast querying - ice-cube-ruby/ice_cube

iCalendar spec: 4.8.5.4 Recurrence Rule

ice_cube gemは繰り返し予定用のRubyのライブラリです。ちなみにRailsとは直接は連携しませんが工夫することで使えます。

簡単な使い方

かなりざっくり言うと、ice_cubeは繰り返し予定に関するいろいろな条件を与えたとき、その条件に該当する日付に関する処理を行うことができるライブラリです。

ユースケースで考えたほうがわかりやすいかもしれないですね。

例えば、2018年4月1日以降の毎月1日に繰り返す予定を表すとしましょう。

1schedule = IceCube::Schedule.new(now = Date.new(2018, 4, 1))
2schedule.add_recurrence_rule IceCube::Rule.monthly

これでOK。ではschedule.all_occurrencesで全ての日付を取得してみましょう。

1schedule.all_occurrences
2ArgumentError: All recurrence rules must specify .until or .count to use `all_occurrences'

怒られました。それもそうで、終わりを決められるようなルールがない場合は無限の集合になってしまうからですね。繰り返し回数か終了日を設定するか、日付の問い合わせを期間指定にすることで日付のArrayを得ることができます。

 1schedules.occurrences(1.year.from_now)
 2=> [2018-04-01 00:00:00 +0900,
 3 2018-05-01 00:00:00 +0900,
 4 2018-06-01 00:00:00 +0900,
 5 2018-07-01 00:00:00 +0900,
 6 2018-08-01 00:00:00 +0900,
 7 2018-09-01 00:00:00 +0900,
 8 2018-10-01 00:00:00 +0900,
 9 2018-11-01 00:00:00 +0900,
10 2018-12-01 00:00:00 +0900,
11 2019-01-01 00:00:00 +0900,
12 2019-02-01 00:00:00 +0900,
13 2019-03-01 00:00:00 +0900,
14 2019-04-01 00:00:00 +0900]

1schedule.occurrences_between(Date.new(2018, 5, 1), Date.new(2018, 8, 31))
2=> [2018-05-01 00:00:00 +0900,
32018-06-01 00:00:00 +0900,
42018-07-01 00:00:00 +0900,
52018-08-01 00:00:00 +0900]

1schedule.first(4)
2=> [2018-04-01 00:00:00 +0900,
32018-05-01 00:00:00 +0900,
42018-06-01 00:00:00 +0900,
52018-07-01 00:00:00 +0900]

終わりがある繰り返し

繰り返し回数を指定してみます。

1schedule = IceCube::Schedule.new(now = Date.new(2018, 4, 1))
2schedule.add_recurrence_rule IceCube::Rule.monthly.count(4)
3schedule.all_occurrences
4=> [2018-04-01 00:00:00 +0900,
52018-05-01 00:00:00 +0900,
62018-06-01 00:00:00 +0900,
72018-07-01 00:00:00 +0900]

終了日を指定してみます。

1schedule = IceCube::Schedule.new(now = Date.new(2018, 4, 1))
2schedule.add_recurrence_rule IceCube::Rule.monthly.until(Date.new(2018, 5, 10))
3schedule.all_occurrences.count
4=> [2018-04-01 00:00:00 +0900,
52018-05-01 00:00:00 +0900]

除外日を設定する

Googleカレンダーなんかで繰り返し予定を作って、ある特定の日だけ予定を消そうとすると、このイベントだけ削除みたいなことができます。あれを実現できます。

4月1日から4回繰り返す、だけどその内の5月1日は無しにしてね、という感じでルールを指定します。

1schedule = IceCube::Schedule.new(now = Date.new(2018, 4, 1))
2schedule.add_recurrence_rule IceCube::Rule.monthly.count(4)
3schedule.add_exception_time(Date.new(2018, 5, 1))
4schedule.all_occurrences
5=> [2018-04-01 00:00:00 +0900,
62018-06-01 00:00:00 +0900,
72018-07-01 00:00:00 +0900]

繰り返しが3回しか現れないですね。

シリアライズする

これまでice_cubeのscheduleクラスに色々設定してきた繰り返しルールをyamlやical形式などでテキスト化できます。

このgemを調べるまでしらなかったのですが、繰り返しルールの記述はRFCで定義されているんですね。icalがこの記法でデータを持っているようです。

www.kanzaki.com

例えば先ほど除外日を使ったときのscheduleをyamlやicalにしてみます。

1schedule = IceCube::Schedule.new(now = Date.new(2018, 4, 1))
2schedule.add_recurrence_rule IceCube::Rule.monthly.count(4)
3schedule.add_exception_time(Date.new(2018, 5, 1))

yaml

 1---
 2:start_time: 2018-04-01 00:00:00.000000000 +09:00
 3:rrules:
 4- :validations: {}
 5 :rule_type: IceCube::MonthlyRule
 6 :interval: 1
 7 :count: 4
 8:rtimes: []
 9:extimes:
10- 2018-05-01 00:00:00.000000000 +09:00

ical

1DTSTART;TZID=JST:20180401T000000
2RRULE:FREQ=MONTHLY;COUNT=4
3EXDATE;TZID=JST:20180501T000000

またこれらの形式からscheduleクラスに戻すことも可能です。

1ical = "DTSTART;TZID=JST:20180401T000000\nRRULE:FREQ=MONTHLY;COUNT=4\nEXDATE;TZID=JST:20180501T000000"
2schedule = IceCube::Schedule.from_ical(ical)
3schedule.all_occurrences
4=> [2018-04-01 00:00:00 +0900,
52018-06-01 00:00:00 +0900,
62018-07-01 00:00:00 +0900]

特に編集しないアプリケーションであれば、yamlやicalの形式でDBに保存しておいて、使うときは再びscheduleに変換して使うことが可能です。

ただの紹介になっちゃったので詳しくはREADMEを見てもらうとして、今度は簡単なサンプルアプリを作って例を紹介してみようかなーと思っています。

storybook.jsとは何か？何も知らずに触ってみた。

Wed, 18 Apr 2018 06:49:38 +0900

Vue.jsの文脈でStorybookというものを見つけ、ReactやReact Nativeでも使えるらしいことやGitHubスター数が2万超えで半端ないことを知りました。手始めに触ってみることにしました。

Storybook: Frontend workshop for UI development

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

storybook.js.org

以下の数ステップで準備が整います

 1$ react-native init StorybookExample
 2$ cd StorybookExample
 3$ npm -g i @storybook/cli
 4$ getstorybook
 5
 6 getstorybook - the simplest way to add a storybook to your project.
 7
 8 • Detecting project type. ✓
 9 • Adding storybook support to your "React Native" app. ✓
10 • Preparing to install dependencies. ✓
11
12...

React Nativeのアプリケーションだということを検知してセットアップをしてくれるようですね。getstorybook後にnpm run storybookせい、という指示があるので実行してみましょう。

1$ npm run storybook

すると何やらローカルホストの7007ポートでサーバーが立ち上がった様子。見てみましょう。

よくよく読んでみると、

We’ve added some basic stories inside the storybook/stories directory. A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case.

とあります。ファイルを追加したみたいです。確かにプロジェクトディレクトリに新しいファイルなどが追加されていました。

 1storybook
 2├── addons.js
 3├── index.android.js
 4├── index.ios.js
 5├── index.js
 6├── stories
 7│   ├── Button
 8│   │   ├── index.android.js
 9│   │   └── index.ios.js
10│   ├── CenterView
11│   │   ├── index.js
12│   │   └── style.js
13│   ├── Welcome
14│   │   └── index.js
15│   └── index.js
16└── storybook.js
17
184 directories, 11 files

実行してくれ、とあるので実行します。

1$ react-native run-ios

なんかでた。ブラウザ側を触るとモバイル側も連動してますね。何か連携しているんでしょうか？

なるほど、コンポーネントカタログみたいなやつかな！？

storyを追加してみる

物は試し、stories/index.jsに以下のようなコードで2個ほどコンポーネントを追加してみました。

 1storiesOf('Components', module)
 2 .add('背景色があるView', () => {
 3 return (
 4 <View style={{ flex: 1, backgroundColor: '#FFAAAA'}}>
 5 </View>
 6 )
 7 })
 8 .add('アバターとコメント', () => {
 9 return (
10 <CenterView>
11 <TouchableOpacity style={{ backgroundColor: '#FFF', width: '100%', flexDirection: 'row', padding: 16, backgroundColor: '#EEE' }}>
12 <Image style={{ height: 60, width: 60, marginRight: 16 }} source={{uri: 'https://blog.piyo.tech/images/prof.png'}} />
13 <View style={{ backgroundColor: 'transparent', flex: 1, height: 100 }}>
14 <Text>
15 We've added some basic stories inside the storybook/stories directory. A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case.
16 </Text>
17 </View>
18 </TouchableOpacity>
19 </CenterView>
20 )
21 });

そしてシミュレータをリロードしてみると、うん、追加されてますね。

なるほど、なんとなくわかってきた。

オワリ

なるほどコンポーネントをたくさん作っておいて、スタイルガイド的に使うのかなー？React Nativeアップデートのときとかに便利かもなーなどと思いました。

だけど一人で開発していることが多いからしばらくはなくても大丈夫そうです。

Googleカレンダーの予定を毎朝LINEに通知する

Tue, 17 Apr 2018 06:39:28 +0900

小ネタです。カレンダーアプリを見ればいいだけの話なんですが、どうも見忘れてしまうのでLINEに通知しようと思い立ち実施したよという話です。

今日の予定を毎朝LINEに送ってくれるbotないかな？ありそうなもんだけど
— Hiromasa Ohno（ぴー） (@pi_cha_n) March 15, 2017

IFTTTがいけるかもしれないなと思って調べましたが、Googleカレンダー関係では新規予定の登録や予定開始の15分前になったらといったトリガーしかなく、自分が参照しているカレンダーの予定を一括で取ってきてどうこうみたいなことは難しそう。

なのでGoogleAppsScriptを使ってみることにしました。似たようなことをチャットワーク宛に実現している方がいたのでそちらを参考にしつつ、元のコードが1つのカレンダーにしか対応していなかったのを全カレンダーを対象にしたり、LINE Notifyに対応したりといった改修を行っています。

LINE Notifyのトークン取得

LINE NotifyはLINEにメッセージを通知するため仕組みです。LINE Notify APIにトークンとメッセージを送るとトークンが紐づけられたグループにメッセージが届きます。

本来はウェブサービスなどからOAuthで認証して使うサービスなのですが、開発者向けにパーソナルトークンを発行できるようになっているので、今回のような用途ではパーソナルトークンを使うほうがいいでしょう。

LINE Notify

notify-bot.line.me

このサイトの右上リンクからLINEのIDログインして、画面下にある「トークンを発行する」から進みます。今回の連携に名前を付け、適当送信先のグループを選べばトークンが発行されますのでそれを控えておきます。

送信先グループはLINE Notifyとの1:1のチャットか、グループを選べます。グループを選んだ場合はLINE Notifyアカウントをそのグループに追加しておかなければなりません。

僕の場合は、「今日の予定」という自分（+ LINE Notify）だけのグループを作り、そこに送るよう設定しました。

(※初めて登録したときの流れを忘れてしまっています。もしかしたらログイン以外にも何かしなければいけなかったかもしれません）

Google Apps Script

Googleドライブの適当な場所にスクリプトを置きます。右クリックして「Google Apps Script」を選びます。見当たらない場合は一番下の「アプリを追加」からGoogle Apps Scriptを追加したあと同じ操作をします。

エディタが出るのでこのコードをパッと貼ります。一番上の行にはLINE Notifyで取得したトークンを入れます。

 1var lineToken = "YOUR-LINE-TOKEN";
 2
 3function main() {
 4 var calendars = CalendarApp.getAllCalendars();
 5 var text = Utilities.formatDate(new Date(), 'JST', 'yyyy/MM/dd') + "\n";
 6
 7 for(i in calendars) {
 8 var calendar = calendars[i];
 9 var events = calendar.getEventsForDay(new Date());
10
11 if( events.length > 0 ) {
12 text += "◆ " + calendar.getName() + "\n";
13 }
14
15 for(j in events) {
16 var event = events[j];
17 var title = event.getTitle();
18 var start = toTime(event.getStartTime());
19 var end = toTime(event.getEndTime());
20 text += start + ' - ' + end + " " + title + '\n';
21 }
22
23 if( events.length > 0 ) {
24 text += "\n";
25 }
26 }
27
28 sendToLine(text);
29}
30
31function sendToLine(text){
32 var token = lineToken;
33 var options =
34 {
35 "method" : "post",
36 "payload" : "message=" + text,
37 "headers" : {"Authorization" : "Bearer "+ token}
38
39 };
40 UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
41}
42
43function toTime(str){
44 return Utilities.formatDate(str, 'JST', 'HH:mm');
45}

メニューの「実行」からmainを選ぶとスクリプトが実行されますが、一番最初の起動時はカレンダーの認証が入ります。一旦許可したあとは認証されたものとして、そのアカウントが参照しているカレンダー全てから予定を集めてLINEにメッセージを飛ばしてくれるはずです。

あとは毎朝自動でこのスクリプトが走るようにすれば良いですね。メニュー下にあるツールバーの時計のようなアイコンからトリガーを追加し、希望の時間に設定すればOKです。

参考

Blazer gemでRailsにSQL集計ダッシュボードをつける

Mon, 16 Apr 2018 06:43:45 +0900

◯◯なユーザーのリストが欲しい、といった類の要望をお客さんにもらうことがあります。SQLでデータを引っ張ってくればリストを作れるものの、本番DBに繋いでSQL投げて出てきたものを渡す、ってことを考えると大変です。いずれ見たい情報が増えることを考えるとWeb側にそれ用の画面を用意するのは現実的ではありません。

そこで登場するのが今回取り上げたBlazerというgemです。BlazerはRailsのmountable engineの仕組みで自分のRailsアプリにBlazerの画面を簡単にマウントできるようになっています。Blazerの画面でSQLを書いて実行し、保存しておくことができます。保存済のクエリの画面へ行くと、現在のDBからそのクエリで情報を取り出して一覧にしてくれ、CSVダウンロードも可能です。

さらにBlazerは↓な感じでチャートを表示することもできるらしい。まだ使いこなせてないですが、かっこいいです。

（ちなみに、同様の機能を提供するAdhoqというgemもあります。こちらは日本の永和システムマネジメントさん中心に開発されています）

最低限の導入

ローカルで最低限動くようにするために必要なのはたった3ステップです。

gem追加

Gemfileにgem 'blazer'を追記して、

$ bundle install

インストール

$ rails g blazer:install
$ rake db:migrate

routes.rb更新

mount Blazer::Engine, at: "blazer"

これでlocalhost:3000/blazerでBlazerのダッシュボードにアクセスできるようになります。 blazer_pathというURLヘルパーも使えるようになります。

ちなみにBlazer公式のDemoサイトがこちらです。

Blazer Demo

ここでは実際にクエリを発行して試せるはず。気になったら触ってみるといいと思います。

認証をつける

ベーシック認証、Deviseのresourceを使った認証といった簡易に設定できる認証があります。今回のRailsアプリの場合はDeviseにUserモデルとAdministratorモデルがあるなどして、簡易な方法ではうまく動かなかったこともあって、before_actionを利用する方法を採りました。

READMEのこの部分に該当します。

ankane/blazer: Business intelligence made simple

blazer.yml内のuser_class, user_method, before_actionを次のように書き換えました。

1user_class: Administrator
2user_method: current_administrator
3before_action: :authenticate_blazer_user!

user_classはBlazerの画面のユーザーとなるモデルのクラス、ここではAdministratorを指定しました。user_methodはそのユーザーを返すメソッドで、ここではDeviseのcurrent_administratorヘルパーメソッドを指定します。

最後のbefore_actionが認証の本体で、メソッドのシンボルを指定します。これをapplication_controller.rbに書きます。current_administratorがいなければリダイレクトするよ、となってます。これで管理者として正しく認証できていないときにはリダイレクトされる（＝使えない）ことになります。

1def authenticate_blazer_user!
2 redirect_to root_url unless current_administrator
3end

本番で使う

READMEのこの部分が該当します。

ankane/blazer: Business intelligence made simple

読み取り権限のみの専用ユーザーを作って使おう、という話です。ここでユーザーを作ったら、本番環境のBLAZER_DATABASE_URLにDBのURLをユーザー名、パスワード付で指定します。

僕の場合はpostgresqlだったのでこんな感じになります。

postgres://blazer:your-password@your-db-host-name/your-db-name

おわり

これで、お客さんに〇〇データが欲しい、と言われたときに簡単にデータを抽出できるわけです。こないだ勉強したSQLが火を吹きますね。

O/RマッパーからDB触り始めた人にSQL書き方ドリルがおすすめ - PIYO Notes

tl;dr SQL苦手な人にこの本めちゃくちゃオススメです。特に手を動かさないと頭に入らない人向け。すごく凝ったことはできるようにならないかもしれないけど、少なくともSQLへの苦手意識は払拭されます。 https://www.amazon.co.jp/o/ASIN/4774180661/ 僕とRDBMSとの関わり ↓のような感じの仕事歴で、前半はRDBMSにほとんど接する機会がありませんでした。

改訂第3版すらすらと手が動くようになる SQL書き方ドリル (WEB+DB PRESS plus)

ActivityIndicator · React Native

ダッシュボード機能とチャートについては今度書こう。

WebStormでファイルを保存する度にESLintする

Sat, 14 Apr 2018 06:40:06 +0900

みんなも使ってるESList。自動でFixできるところはどんどん勝手に直して欲しい。WebStormならそんな想いを実現してくれることがわかりました。

（※ちなみにJetBrainsのIDEならどれでも対応しているはずです。RubyMineでも似たようなことができるでしょう）

1. File Watcherを使う

File Watcherという、ファイルを監視する仕組みがあることを知りました。

File Watchers | WebStorm

www.jetbrains.com

File WatcherはWebStormシステムで、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行します。 WebStormは、このような一般的な一般的なサードパーティのツール（コンパイラ、コンプレッサ、プリティファクタなど）のための定義済みのFile Watcherテンプレートを提供します。他のサードパーティのツールを実行するようにカスタムFile Watcherを設定することもできます。（ページ内の概要をGoogle翻訳）

設定のしかた

Preferenceを開く
「File Watcher」と検索
Tools以下のFile Wathchersが見つかる
下にある＋ボタンを押す

変更時に何をするのかを設定する画面となります。

↓画像枠の部分にESLintのコマンドとコマンドの引数、再読込するパスなどを指定します。他にもオプションが幾つかあるので必要に応じて設定します。

これで保存のたびにESLintがかかります。

2. ショートカットを上書きする

ショートカットを上書きすることでWebStormにある「Fix ESlint Problem」というコマンド（アクション？）を保存のたびに呼ぶ方法です。

ちょっと見づらくなってしまってますが、「Fix　ESLint Problem」のコマンドのショートカットを「⌘S」に割り当てています。通常「保存（Save All）」に使われるショートカットです。

これを乗っ取る（＝元のは削除）することで保存したつもりがESlintをかけていた、という状態になります。

終わり

最近はなんとなく2の方を使っています。

FileWatcherの仕組みは他にも活用方法がありそうでいいなーと思ってます。そういえば昔はRails開発でファイルを変更したら自動的に該当箇所をテストするようなことやってたなーというのを思い出したり。

React Nativeでテキスト付きのローディングインジケーターを出す

Thu, 12 Apr 2018 06:05:37 +0900

昨日はReact Nativeやってるよーな話を書きました。今日超具体的なライブラリの小ネタを書きます。長いのはたまにしか書けないね。

読み込み時のクルクルについてです。React Nativeには標準でローディングインジケーターが用意されています。

Displays a circular loading indicator.

GitHub - ladjs/react-native-loading-spinner-overlay: :barber: React Native loading spinner overlay

なんだけど、色や大きさなどちょっとしたオプションしかなく、テキストと一緒に表示させることができません。もちろんTextと一緒に使えばいいし、コンポーネントを作ってもいいし。

でもまあ、これだけ汎用的なコンポーネントはさっさとパッケージを使うのが良いと思います。個人的には部品になるようなUIコンポーネントは積極的に使う派です。

ざっくり探すと2つのライブラリが見つかりました。

1つ目が、react-native-loading-spinner-overlay

:barber: React Native loading spinner overlay. Contribute to ladjs/react-native-loading-spinner-overlay development by creating an account on GitHub.

GitHub - RealOrangeOne/react-native-busy-indicator: A simple, event controlled, busy indicator for react-native

2つ目は、react-native-busy-indicator

A simple, event controlled, busy indicator for react-native - RealOrangeOne/react-native-busy-indicator

Remotty(リモティ) - リモートワークのための仮想オフィス

前者のほうが2018/04/09時点でスター数が700近くと、後者の8倍近くのスター数です。前者のほうが最終更新が古いもののスター数を考えるとこちらでいいかな。react-native-loading-spinner-overlayを試します。

コード

GitHubのREADMEにあるアニメーション画像では、テキストが入っていないので雰囲気がわかりません。そこで文字ありの雰囲気がわかるようにしてみます。

何はともあれインストールとインポート。

$ npm install --save react-native-loading-spinner-overlay@latest

1import Spinner from 'react-native-loading-spinner-overlay';

そして、ひとまず常に表示する形でコンポーネントを追加してみましょう。

 1class MyComponent extends React.Component {
 2 render() {
 3 return (
 4 <View style={{ flex: 1, justifyContent: 'space-around' }}>
 5 <Button title="ボタン" onPress={() => console.log('ボタン')} />
 6 <Spinner
 7 visible
 8 textContent="読み込み中"
 9 textStyle={{ color: 'white' }}
10 />
11 </View>
12 );
13 }
14}

すると、このように表示されます。

背後にボタンを置いていますが、ローディングインジケータのオーバーレイがあるためボタンをタップすることはできません。ユーザーに操作させずに待たせることができます。

オーバーレイの色が薄いと白文字や白インジケータが見にくいかもしれません。

1overlayColor="rgba(0, 0, 0, 0.5)"
2
3// デフォルトは
4// overlayColor="rgba(0, 0, 0, 0.25)"

ちょっと暗くするといい感じです。

簡易に使うには便利です。

（まあ、React NativeのUIライブラリ系は簡易に使うのは便利だけど、ちょっと凝りたくなると結局自前コンポーネントにせざるを得ないってことが多いんですけどね。）

React Nativeで自社サービスのiOS/Androidアプリをリプレイスした話

Wed, 11 Apr 2018 06:30:37 +0900

前置き

僕が所属しているソニックガーデンではRemottyというツールを自社で開発し、普段の業務に使っています。リモートワークをするためにオフィスと言ってもいいような場所で、業務中は常にオンラインとなり、リアルタイムチャット（対面の会話の代替）とトピックベースの掲示板（メールなど非同期コミュニケーションの代替）の両方を備えたオフィスとなるようなツールです。

www.remotty.net

オフィスにいられない間にもチャットや掲示板に反応できるように、iOSとandroidそれぞれにネイティブアプリのクライアントアプリがあり、それぞれを別の開発者が担当していました。iOS版はその当時新卒2年目だった若者が作ったものを僕が引き継ぐ形でメンテしていました。

もともと自社向けに開発していたプロダクトではありますが、働き方改革の流れなどの関係もあってここ1年〜2年ぐらいの間に有償で使ってくださるお客さまが出てきました。

そうなってくると自社では必要のない機能も、お客さんの組織体制によってはないと困るものがでてきます。オフィスを代替するようなツールなので働き方にモロに影響するんですよね。

そういった経緯から本体であるWeb側に大きめの変更が入るようになります。アプリに影響のないように開発をするものの、全く新しい機能については流石に影響なしというわけにはいかなくなりました。

とは言え、Remottyのスマホアプリはそれを主な業務として開発しているわけではなかったこともあって、iOS/android両方に大幅な変更をするのはとても時間がかかるだろうということがわかりました。

そんなとき、React Nativeに興味を持ってアプリを書き始めていたCTOにそそのかされる形で、僕がReact Nativeを習得して一人で両対応版を開発していこうということになりました。

前置き終わり。

Getting Started

ES5系しか知らないし、WebのReactならほんのちょっとわかるって状態だったので、ほんとにできるかなーという気持ちでした。

というわけでいくつかチュートリアルを進めつつ、慣れていくことにしました。基本は公式ドキュメントのはずなので、このGetting Startedから進めていきました。

Introduction · React Native

This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment.

Navigating Between Screens · React Native

ここを一通りやる主な標準コンポーネントを使うとどんな画面になるのかイメージがわきます。画面単位では大体どんな風にすればいいのかはわかってくるようになりました。

ここからアプリとして体をなすまでに乗り越えるべきハードルはまだ幾つかあります。その中で特に画面遷移やデータ管理が特に大きいものなんじゃないかと思います。

画面遷移

今でこそReact NativeのドキュメントにNavigation Between Screensという項目があります、

Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.

「Front-end Developer Handbook 2018」2018年の予測について翻訳 - Qiita

が、アプリを書き換え始める時期にはこのようなページはなかったと記憶しています。ここに登場するreact-navigationは当時ベータ版の初期でした。

画面遷移系のライブラリとしてはreact-native-router-fluxがよく使われていた印象でした。他にもairbnbやwixのような企業のライブラリがありました。

それぞれどのような使い方ができるのかを知るためにスパイクを行うことにしました。スパイクはアジャイルの文脈に登場する言葉で、事前にリスクや仕様を把握したりする作業のことです。

結果どれも使ってみてしっくりこず、ベータ版だったreact-navigationを使ってみました。そしたらこれがなぜか手に馴染む。使いたかったタブとスタックのナビゲーションがシンプルに書けたこと、遷移のコードがシンプルだったこと、などからベータだけどこれでいいんじゃね？となりました。

結局react-navigationが公式のようになっていることを考えると良い選択をしたなと思います。ただまだベータ版使ってるんだよなあ。更新に追随するのが少し大変です。

データ管理

次はデータ管理です。WebでReactを使ったちょっとしたサイトを作ったことがあり、パラメータの引き回しやデータ更新の反映が面倒なことはわかっていました。ですのでこのアプリを開発する前からReduxを使ってみようと考えていました。

Reduxはその当時でもReactのプロダクトでよく使われているような雰囲気がありました。関連するQiita記事なども多くみられたため躓くことはないだろうと採用に至りました。

こちらも最初は小さめのサンプルアプリを書くなどして手触りを知ってから使い始めました。素のReactでプロパティを引き回していたことを考えると劇的に簡単になったなぁと当時は思ったと記憶しています。

しかし今思えばReduxは大きすぎるフレームワークだったなと思います。やりたかったのはデータを一元管理して更新があったら再描画することだけです。最近ではその役目にはMobXのほうが適しているだろうという声もあります。

この辺。

そもそも「Front-end Developer Handbook」とは概要原文はこちら。何が書いてあるの？フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。 PDFでダウ...

GitHub - fullstackreact/react-native-oauth: A react-native wrapper for social authentication login for both Android and iOS

その他必要になった技術要素

さて、ここからは個別の話なのでダイジェストでお送りし、気が向いたら個別に詳細を書いてみようと思います。

APIリクエスト

Web版Remottyとやり取りをするためのアプリなので当然RemottyのWeb APIを叩きます。API呼び出しをまとめてApiClientを作って中でfetchを呼ぶようにしました。

1class ApiClient {
2 getComment(args) {}
3 postNewComment(args) {}
4}

OAuth

Web側のRemottyはOAuthに対応しています。過去のiOS/androidのアプリもそれぞれOAuthで認証してアクセストークンを取得していました。

OAuthにはこちらのライブラリを利用しました。

A react-native wrapper for social authentication login for both Android and iOS - fullstackreact/react-native-oauth

[Question] Android: My own providers are not supported yet? · Issue #102 · fullstackreact/react-native-oauth

2017年4月頃の時点ではiOSは動く状態だったものの、android側のネイティブ実装が不足している状態で、自前のOAuthプロバイダーでは認証できない状態でした。

そこでこんなissueを立てて質問したところやりとりをしてくれて、無事対応したバージョンを使えるようになりました。

I've implemented iOS app for my own oauth provider with rn-oauth. It works as I expected. But on Android, it doesn't. I got following error on OAuthManager#authorize(). 04-09 22:22:55.143 5149 5189...

GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications

データ永続化

RemottyはWebが主体となるサービスであるため、端末に情報を保存しておく必要はほとんどありません。都度最新の情報をWeb APIで取得するのを基本としています。

ただ、認証情報だけは別です。毎度ログインが必要なのでは使い物になりませんので、Remottyではアプリ内の領域にアクセストークンのようなものを保存しています。

具体的にはRedux管理下にあるstoreを保存できる仕組みである、redux-persistを利用しました。redux-persistは環境に合ったストレージを指定することで色々な環境で使えます。React NativeではAsyncStorageが使われます。

Push通知

Remottyではアプリを起動していない状態やバックグラウンドのときのプッシュ通知はもちろん、アプリがフォアグラウンドにいるときにコメントなどをリアルタイムに同期する仕組みにおいてもプッシュ通知の仕組みを使います。

iOS、androidはそれぞれ異なる仕組みなのですが、JS層でうまいことラップしてくれるライブラリがあり、それを導入してアプリ側の処理を上手いこと一本化できました。

React Native Local and Remote Notifications. Contribute to zo0r/react-native-push-notification development by creating an account on GitHub.

GitHub - jsdf/react-native-htmlview: A React Native component which renders HTML content as native views

リッチテキスト

Remottyはマークダウン形式に対応しています。また、本文中のURLはリンクになるなど、プレーンテキストよりはリッチな表現ができます。

これをアプリで表現するには実はまだ課題があるものの、最低限のラインを満たすためにRemottyではWeb APIでHTMLに変換済みの文字列を返し、アプリ側ではHTMLとして描画するようにしました。

その際こちらを使うようにしました。

A React Native component which renders HTML content as native views - jsdf/react-native-htmlview

GitHub - harshq/react-native-mentions: Mentions textbox for React Native. Works on both ios and android.

最近また新しくなっていそうなので、アップデートしてみようかな、、。

メンション

Remottyでは@ユーザーidで宛先を指定すると通知を飛ばす機能があります。Slackにあるようなアレですね。

アプリからもメンションする際にメンバーのidが補完されないと不便なので、テキスト入力欄にはメンション補完が欲しいなあと。ちょうどよさそうなライブラリがあったので入力に応じてインクリメンタルに絞り込んでいく機能をつけました。

Mentions textbox for React Native. Works on both ios and android. :whale: - harshq/react-native-mentions

Add a prop for top View style by pi-chan · Pull Request #10 · harshq/react-native-mentions

レイアウトを整えるために必要なプロパティを受け付けてくれないコンポーネントだったので、プルリクをなげて取り込んでもらいました。

画像添付

Remottyのチャットや掲示板には画像を添付できます。アプリからは画像のみを許可しています。

画像をアップロードするのはなかなか複雑で、色々なライブラリを組み合わせて実装しました。

画像選択

GitHub - react-native-image-picker/react-native-image-picker: :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera. - react-native-image-picker/react-native-image-p...

GitHub - bamlab/react-native-image-resizer: 🗻 Resize local images with React Native

リサイズ

🗻 Resize local images with React Native. Contribute to bamlab/react-native-image-resizer development by creating an account on GitHub.

GitHub - itinance/react-native-fs: Native filesystem access for react-native

ファイルアクセス

Native filesystem access for react-native. Contribute to itinance/react-native-fs development by creating an account on GitHub.

GitHub - wkh237/react-native-fetch-blob: A project committed to making file access and data transfer easier, efficient for React Native developers.

アップロード

A project committed to making file access and data transfer easier, efficient for React Native developers. - wkh237/react-native-fetch-blob

itunes.apple.com →https://itunes.apple.com/jp/app/remotty/id979526900?mt=8

流れとしては

react-native-image-pickerで画像選択
リサイズするかしないからの選択シートを表示（リサイズする場合3へ、そうでなければ5へ）
react-native-image-resizerでリサイズし、リサイズ済画像をアプリ領域に保存
react-native-fsを使ってファイルからリサイズ済の画像をbase64として読み込む
react-native-fetch-blobでmultipart/form-dataとしてAPIにPOST

としてます。アップロード範囲を切り取りできるようにもしたいなーと思いつつただでさえ複雑な処理がパンクしそうなので保留しています。

CodePush

CodePushはMicrosoftが提供するVisual Studio App Centerの機能の一部で、React Nativeのアプリの中に埋め込まれているJS側のコードを置き換えられる仕組みを提供するものです。

React Nativeアプリはネイティブコードからなる部分とその上で動くJSのコードがあり、CodePushにより後者のコードを置き換えられます。つまりネイティブコードを変更しない限りアプリストアに新しいバージョンをリリースせずにアプリを更新できるようになります。

UIの微調整などはCodePushでとても簡単に修正できますし、リリース後に見つかった不具合を審査を待たずして修正することなんかもできます。

個人的な課題感

さて最後に個人的に課題に思っていることがあるので、書いてみます。

android版の苦労と課題

開発するうえでの苦労という観点と、ユーザー体験という意味での課題という観点があります。

まず開発するうえでの苦労です。僕個人がiPhoneユーザーということもあり、iOSファーストで開発していました。するといざandroidで動かそうにもなかなか動かなくて困ることがありました。起動しないとかビルド通らないとかね。またReact Native自信が提供する機能や、各種ライブラリの対応状況などをみた限りでもiOSの対応状況のほうが充実していたように思えます。

そのためandroid版の開発はハマりが発生することが多かったような気がします。android側に対応するためにプルリクを出す、forkして一時的にそちらを使う、そもそも動かないからライブラリを捨てる、などということをよくしました。

もう1つのユーザー体験という意味では、これはまあほぼ僕の責任なんですが、androidを常用していないiPhoneユーザーが一人で作ったアプリなので、androidアプリっぽくありません。

戻るボタンの挙動など、androidユーザーに指摘されるまで気づきもしませんでしたし、キーボードが出たときのアプリの表示なんかもiOSと違う癖もあったりして、androidらしくは全然できませんでした。

かといってUIを分けきってしまうと両対応する旨味がなくなってしまうので悩ましいです。フロント側を特に凝りたい、こだわりたいようなアプリでは、ReactNativeに対応するにしても画面は別にしていくんでしょうね。と思っています。

JSワカラン

ES2015等新しい仕様への不慣れがありました。書きながらだんだん慣れていきましたが、ベストプラクティスから程遠いみたいなところもまだまだありそうです。

Reduxが、、

Remottyのアプリで使うにはReduxはオーバースペックでした。前述の通りMobXが適切だったかなと。これは時期的なものもあるとは思うので失敗とは思っていませんが、次に作るアプリはMobXにします。

終わり

できあがったRemottyのアプリはこちらです。

play.google.com →https://play.google.com/store/apps/details?id=net.remotty.android&hl=ja

弊社社長のリモートワークに関する書籍も出ていますよ。

リモートチームでうまくいく

Forestry.io to TinaCMS Migration Guide

forestry.ioでHugoブログにCMS機能を一瞬で追加した

Tue, 10 Apr 2018 06:29:00 +0900

Hugoのブログを更新するときには基本的にはローカルPCを使っています。僕の場合はNetlifyを絡めて、

記事更新
Gitへpush
Netlifyでビルド
Netlifyで最新バージョンが配信

という流れで配信まで行っています。

記事の新規追加はこれで十分なのですが、タイポの修正のようなちょっとした修正までPCを使うのは非常に面倒だなと思っていました。

NetlifyにはCMS機能を提供するような仕組みがあることは知っていました。しかし、2018/04/09現在Gitリポジトリとして使っているBitbucketには対応していません。

このあたりでやりとりがあります。

当初はこれを待ってからでいいなと思ってたんですが、検索機能を作るときに参考にしたブログがforestry.ioというサービスの記事で、よく見たらCMS機能があるじゃないですか。簡単に使えるならいいなと思い、早速使ってみました。

ログインからサイト追加まで

こちらからサインアップしましょう。

The Forestry.io team is now focused on building TinaCMS. Migrate your Forestry site to Tina with our step-by-step guide and enjoy enhanced visual editing features.

forestry.io

Bitbucketログインにも対応しています（最近はGitLab対応しているところが増えてきね）。

ログインが終わると空のダッシュボードに来ます。Add Siteに進みます。

続いてサイトの種類を選びます。Hugoかjekyllが選択できるようですね。今回はHugoを選んでいます。

続いてソースを指定します。置き場所はBitbucketを選び、リポジトリとブランチを指定します。

これでしばらく待つとインポートが完了します。

記事の登録や編集

ダッシュボードにサイトが追加されました。

続いてサイトダッシュボードに入っていくと、こんな風になってます。記事の一覧がでていたり、config.tomlに書いているようなサイト設定を確認・変更できるようになっていたりします。

では、ADD NEWから記事を追加してみましょう。ADD NEWするとダイアログが出て、タイトルとPATHを決めろとなります。

また、ここでテンプレートを指定できます。記事のdescriptionやタグ、アイキャッチなどのメタデータを設定するのですが、これのフィールドを予めテンプレートとして追加しておくことができます。

元々入っていたタイトル、日付、下書きの3項目に加え、タグ、description、thumbnailの3項目を追加しておきました。

最後に本文を書いて公開状態にしてPUBLISHすれば公開となります。少し時間がかかりますが、プレビューなんかもできてまずまずいい感じです。

とは言えやはり本文を新たに書く場合にはローカルのエディタとローカルのサーバーのほうが確認の手間も含めて楽です。CMSは微修正を中心に活用します。

Algoliaを使ってブログに全文検索をつける（検索ページ編）

Sun, 08 Apr 2018 08:57:21 +0900

前回の記事ではHugoのブログに全文検索機能をつけるために、検索インデックスとしてのJSONの出力方法や、Netlifyでのビルド時に自動的にインデックスが更新されるようなWebTaskの利用について書きました。

Algoliaを使ってブログに全文検索をつける（検索index作成編） - PIYO Notes

Hugoに移行して以来かなり満足度が高いブログ活動ですが、記事機能がないのが惜しいなと思っています。検索の用途としては自分が昔書いたことを発掘するのがまず第一です。案外助けられることが多いんです。もちろん、Google検索で site: オプションを使うなどしても実現できるのはわかっています。ただ、やはり自分でやってみたいという気持ちがあったので今回チャレンジしました。すでにファーストバージョンは完成していて、画面右上から検索用のページへ移動できます。リアルタイムな絞り込み検索を試せます。

community.algolia.com →https://community.algolia.com/instantsearch.js/v2/getting-started.html

今回はインデックスを利用してページ上に検索ボックスや検索結果を表示するページを用意する手順について書いていきます。

全体の流れ

Algoliaの公式ドキュメントに沿ってinstantSearch.jsを使う形で進めていきます。概ね簡単なのですが、オプションが多くて迷う点がありました。僕はこうしたよ的な観点で書いていきます。

流れとしては、

アセットの読み込み
検索ページを作成
JSで検索の設定を記述
検索結果の調整

という感じです。

アセットの読み込み

npmで導入する方法とCDNを指定する方法の2種類提供されています。今回は静的サイトのためCDNを利用しました。

現在利用している、HugoのRobustというテンプレートではページ全体をrobust/layouts/_default/baseof.htmlに記述しています。これをオーバーライドするために、プロジェクトルートのlayouts/_default以下にbaseof.htmlを作成し元ファイルの中身をコピーした上で、CDNの記述を追加します。

 1<html>
 2 <head>
 3 ...
 4 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.3/dist/instantsearch.min.css">
 5 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.3/dist/instantsearch-theme-algolia.min.css">
 6 ...
 7 </head>
 8 <body>
 9 <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.3"></script>
10 ...
11 </body>
12</html>

検索ページを作成

検索をどこで実施できるようにするかというのはちゃんと考えるべきことなんですが、今回は簡単に実施するために検索用のページを用意することにしました。

通常の投稿はposts以下に配置しています。検索ページ通常のブログ投稿とは異なりますのでpages以下にsearchとして作りました。

ページのMarkdownに直接HTMLやJavascriptを書く形で検索ページを用意しました。

 1---
 2title: xxx
 3date: xxx
 4tags: xxx
 5---
 6
 7<div id="search-box">
 8 <!-- 検索ボックス用の空DOM -->
 9</div>
10
11<ul id="hits">
12 <!-- 検索結果用のDOM、各結果をliで置くためulにしている -->
13</ul>
14
15<div id="pagination">
16 <!-- ページネーションがここに -->
17</div>
18
19<script>
20 // ここに検索用のJSを記述
21</script>

実際に完成した画面との対応がこんな感じです。

JSで検索の設定を記述

先ほどのページ内、<script>タグの中にinstantSearch.jsの設定を書いていきます。

検索ボックス
検索結果
ページネーション

の3要素のみのシンプルな形にしました。

前述の公式ドキュメントに色々なパターンが載っていたり、リファレンスを見るとオプションがかなり豊富だったりとたくさんの設定がありそうです。

ここで指定するapiKeyはAlgoliaダッシュボードのsearch-only API Keyを使います。

 1<script>
 2// instantSearchを初期化
 3var search = instantsearch({
 4 appId: '3BFGDTL653',
 5 apiKey: '3f41e36d23c8180ba83e5157b43eb3cd',
 6 indexName: 'BlogPosts',
 7 urlSync: true
 8});
 9
10// 検索ボックスをDOMに設定
11search.addWidget(
12 instantsearch.widgets.searchBox({
13 container: '#search-box',
14 placeholder: '記事を検索',
15 poweredBy: true
16 })
17);
18
19// 検索結果をDOMに設定
20// 結果には<li>を使うように
21search.addWidget(
22 instantsearch.widgets.hits({
23 container: '#hits',
24 templates: {
25 empty: '見つかりませんでした。',
26 item: '<li><code>{{ dateString }}</code> <a href="{{permalink}}">{{ title }}</a></li>'
27 }
28 })
29);
30
31// 検索結果をページネーションするための設定
32search.addWidget(
33 instantsearch.widgets.pagination({
34 container: '#pagination',
35 maxPages: 20,
36 scrollTo: false
37 })
38);
39
40search.start();
41</script>

ここまででサイト上で検索を実施できるようになりました。すごく簡単でした。

検索結果の調整

最後は検索結果の調整です。

先ほどまでの状態だと、結果の順序がバラバラだったり関係なさそうなものまでヒットしたり、なんか欲しい結果と違うなあという感じになってしまっていました。

このあたりのロジックをAlgoliaのダッシュボードから変更できるので、ある程度納得できる状態になるまで調整を試みました。

対象のアプリのダッシュボードへ入り、左メニューのIndices、RANKINGタブ、と進みます。

基本設定

基本設定として、どの項目を検索対象とするのか、優先度はどの順番なのかという設定をします。インデックスをアップロード・登録した時点では特に何も入っていないので、この項目は100%設定すべきです。

本ブログの場合は、

title
tags
content

を対象とし、この順に優先度が高い、としました。

詳細設定

最後にタイポの許容値などを少し厳し目に設定しました。検索結果がいまいち、というのはここの微調整で少し良くなったと感じます。

僕が設定したのはTypo Torelanceの項目で、それ以外は既定のままにしました（項目が多くてよくわからん）。

要は、タイポをどれだけ許容するかという話で、基本はfalseにして無効としました。最初は、1タイポを許す文字数や2タイポを許す文字数を多めに設定してなどとやってましたが、まあタイポない前提でいいだろうということでfalseとしたわけです。

おわり

というわけで完成！

記事検索 - ぴよログ

Algoliaを使ってブログに全文検索をつける（検索index作成編）

Sat, 07 Apr 2018 08:28:22 +0900

Hugoに移行して以来かなり満足度が高いブログ活動ですが、記事機能がないのが惜しいなと思っています。検索の用途としては自分が昔書いたことを発掘するのがまず第一です。案外助けられることが多いんです。

もちろん、Google検索でsite:オプションを使うなどしても実現できるのはわかっています。ただ、やはり自分でやってみたいという気持ちがあったので今回チャレンジしました。すでにファーストバージョンは完成していて、画面右上から検索用のページへ移動できます。リアルタイムな絞り込み検索を試せます。

Hugoは静的サイトなので、検索のような動的な処理はHugo単体ではできません。

調べているとJSを使う方法や外部のサービスを使う方法など幾つかみつかりました。

ドキュメントにも挙がっていたAlgoliaというサービスが気になったのでさらに調べてみると、forestry.ioの記事で手順が紹介されていました。これを追体験してみることにしました。

Forestry.io to TinaCMS Migration Guide

The Forestry.io team is now focused on building TinaCMS. Migrate your Forestry site to Tina with our step-by-step guide and enjoy enhanced visual editing features.

forestry.io

検索インデックス用のJSON

HugoのCustom Output Formatsの仕組みを用いて、サイトのビルド時にAlgoliaに登録するためのJSONを生成します。RSSを出力するときと同じような方法で比較的簡単に作ることができました。

Custom Output Formats | Hugo

config.toml

AlgoliaはJSON形式で検索インデックスを登録できます。なんとなく触った感じ指定のフォーマットがないので、記事タイトル、本文、タグ当たりを含めたらいいと思います。

forestry.ioの設定をベースに、config.tomlに次のような設定を追加しました。

1[outputFormats.Algolia]
2baseName = "algolia"
3isPlainText = true
4mediaType = "application/json"
5notAlternative = true
6
7[params.algolia]
8vars = ["title", "content", "date", "publishdate", "description", "permalink", "thumbnail"]
9params = ["tags"]

元記事と異なるのは、paramsからcategoryとexpiryDateを削除しdescriptionを追加したことと、varsのsummaryをcontentに変えたことです。

最後にoutputsにalgoriaを追加して完成です。

1[outputs]
2home = [ "HTML", "RSS", "algolia" ]

JSON用のテンプレート

ファイルを生成するときに使うテンプレートが必要です。layouts/_default/list.algolia.json としてファイルを作り、中身はこのようにしました。

{{/* Generates a valid Algolia search index */}}
{{- $hits := slice -}}
{{- $section := $.Site.GetPage "section" .Section }}
{{- $validVars := $.Param "algolia.vars" | default slice -}}
{{- $validParams := $.Param "algolia.params" | default slice -}}
{{- range $i, $hit := where .Data.Pages "Section" "posts" -}}
{{- $dot := . -}}
{{- if or (and ($hit.IsDescendant $section) (and (not $hit.Draft) (not $hit.Params.private))) $section.IsHome -}}
{{/* Set the hit's objectID */}}
{{- .Scratch.SetInMap $hit.File.Path "objectID" $hit.UniqueID -}}
{{/* Store built-in page variables in iterable object */}}
{{- .Scratch.SetInMap "temp" "date" $hit.Date.UTC.Unix -}}
{{- .Scratch.SetInMap "temp" "publishdate" $hit.PublishDate -}}
{{- .Scratch.SetInMap "temp" "dateString" (substr $hit.PublishDate 0 10) -}}
{{- .Scratch.SetInMap "temp" "content" ($hit.Plain | truncate 2000) -}}
{{- .Scratch.SetInMap "temp" "title" $hit.Title -}}
{{- .Scratch.SetInMap "temp" "permalink" $hit.Permalink -}}
{{- .Scratch.SetInMap "temp" "description" $hit.Description -}}
{{- .Scratch.SetInMap "temp" "thumbnail" $hit.Params.thumbnail -}}
{{/* Include valid page vars */}}
{{- range $key, $param := (.Scratch.Get "temp") -}}
{{- if in $validVars $key -}}
{{- $dot.Scratch.SetInMap $hit.File.Path $key $param -}}
{{- end -}}
{{- end -}}
{{/* Include valid page params */}}
{{- range $key, $param := $hit.Params -}}
{{- if in $validParams $key -}}
{{- $dot.Scratch.SetInMap $hit.File.Path $key $param -}}
{{- end -}}
{{- end -}}
{{- $.Scratch.SetInMap "hits" $hit.File.Path (.Scratch.Get $hit.File.Path) -}}
{{- end -}}
{{- end -}}
{{- jsonify ($.Scratch.GetSortedMapValues "hits") -}}

ずらっと書いてもしょうがないのですが、いくつか元記事とは異なる箇所があります。

本文を全部含めてしまうとAlgoliaの1データあたりのデータ上限を超えてしまうので、contentは.Plainを2000文字でtruncateするようにしました。また、サムネイルもを含めるようにしました。

また、tagのページなどが含まれてしまうので、whereをつかって"Section"が"posts"のものに絞り込んでループを回しています。

これでビルドするとjsonが作られます。ローカルではhttp://localhost:1313/algolia.jsonにアクセスすると確認ができます。

Algoliaの準備

続いてAlgoliaに登録しましょう。

Home

18,000+ organizations trust Algolia to build intuitive, adaptive, high-performing experiences with a unified AI search & retrieval platform spanning agentic, generative, and search.

www.algolia.com

Algoliaは

Algolia is the most reliable platform for building search into your business.

ということで、検索機能を提供してくれるサービスです。ここに先ほどHugoで生成したJSONを元に検索対象のデータを登録していきましょう。

なにはともあれユーザー登録を済ませます。無料で使えるライセンスがあるので僕はそれを選択しました。

無料版の制約は

登録可能なデータの上限
データ操作回数の上限
algoliaのロゴを表示

といったもので、ブログ用途には十分です。

続いて、NEW APPLICATIONからアプリケーションを登録します。名前を適当にいれればOK。

するとインデックスの登録や検索に使うためのAPI Keyが発行されます。

後ほどこれらを使用します。

Algoliaへインデックスを登録

Hugoを手元でビルドしてアップロードしている人の場合はAlgoliaへの登録も手元から行えばいいのですが、Netlifyのようにビルドお任せサービスを使っている場合にはそうはいきません。幸い、生成されたalgolia.jsonはどこからもアクセスできますので、ビルド後のWebhookでAlgoliaへアップロードする仕組みをトリガーしてあげなければいけません。

やることはごくシンプルで、書き出されたJSONを読み取ってAlgoliaのAPIでデータを登録していくだけなので、自分で書くことは比較的容易です。各種言語に対応したクライアントライブラリも存在します。

ですが、それをどこで実行するのか、それ用のサーバーを別途用意するのか。それとも自分用に動かしているGoのサーバーに機能を追加するのか。今回は元記事を参考に、サーバーレスでタスクを動かせるWebtaskを利用して実施することにしました。

元記事に詳細な手順があるので、ここでは手順を簡単に紹介しておきます。

WebTaskでサインアップする
$ git clone https://github.com/forestryio-templates/serverless-atomic-algolia する
$ npm install serverless -g && npm install で必要なものをインストール
$ serverless config credentials --provider webtasks でログインする
config/secrets.yml.stubファイルをconfig/secrets.ymlとしてコピーする
config/secrets.ymlをAlgoliaのダッシュボードの自分のアプリの設定に書き換える
config/index.jsの一部を書き換え。Algolia内のIndex名や、サイトのJSONのURLを記載。
$ serverless deploy

最後のデプロイでこんな感じの↓URLが発行されます。

https://wt-60952c750afexxxxxxxxxxxxxxxx-0.sandbox.auth0-extend.com/yyyyyyyyyyy

ここにアクセスすると実際にコードが動くわけですが、僕の場合は2つほど依存関係のエラーが起こりました。追加でライブラリを追加し再度デプロイすることでエラーが解消してAlgolia側にデータが登録されることを確認できました。

$ npm install --save source-map-support
$ npm install --save babel-runtime

Algoliaに登録されたデータの様子。340recordsと表示されています。管理ページ内で検索を試みることもできます。

あとはさきほどのWebTaskが定期的に実行されればOKですね。僕の場合はNetlifyのビルド後のWebhookに登録して自動で走るようにしています。

これで検索インデックスの準備はOKです。次回はブログ上に検索ボックスを配置して検索するところを紹介したいと思います。

Rails周りで最近知ったこと 2018/04版

Fri, 06 Apr 2018 18:11:53 +0900

String#squish

ActiveSupportで定義されているらしい。

1def squish
2 dup.squish!
3end
4
5def squish!
6 gsub!(/[[:space:]]+/, " ")
7 strip!
8 self
9end

halt_callback_chains_on_return_false がDeprecatedになった件でプルリク見てたら書いてあってみつけた。

deprecate halt_callback_chains_on_return_false instead of `halt_and… · rails/rails@4e63ce5

1ActiveSupport::Deprecation.warn(<<-MSG.squish)
2 ActiveSupport.halt_callback_chains_on_return_false is deprecated and will be removed in Rails 5.2.
3MSG

ヒアドキュメントの余計な空白とか消すのに使うんだね。

window_opened_by

Capybaraでリンクをクリックしたときに別タブが開いて、みたいなときに使えるメソッドがあった。

Method: Capybara::Session#window_opened_by — Documentation for jnicklas/capybara (master)

within_windowと組み合わせて使える。

Method: Capybara::Session#within_window — Documentation for jnicklas/capybara (master)

こんな感じ。

1scenario do
2 visit root_path
3 window = window_opened_by { click_lick '新しいタブで開く' }
4 within_window(window) do
5 expect(page).to have_content '新しいタブだよ'
6 end
7end

remote_ip

接続元のIPでアクセス制限するみたいなコードを書く時に、request.remote_ipを使ってました。環境構成がシンプルなときはそれでいけてました。

remote_ip (ActionController::Request) - APIdock

最近触ったアプリケーションが、CloudFrontを通ったりなんだりいろいろ経由してからRailsに到達する構成だったので接続元（ユーザーの環境）のIPがremote_ipで取れないことがありました。

調べてみると、経由した順にrequest.headers['X-Forwarded-For']にカンマ区切りで入っていることが判明。環境に合わせて取り出せるように、こんな風にしてIPを取り出せることがわかりました。

1def client_ip
2 @client_ip ||= (request.headers['X-Forwarded-For'].to_s.gsub(' ', '').split(',').first || request.remote_ip)
3end

HTTP_X_FORWARDED_FORに入ってるんですねー。HTTPの仕様、一通り知らないといかんな。。。

ブログのビルド用にOGPの情報をJSONで返すサーバーも作った

Wed, 04 Apr 2018 19:41:48 +0900

前回の続きです。

Hugoでブログリンクの見た目をはてなブログっぽくする - PIYO Notes

ブログのビルド用にGoのサーバーをVPS上で動かした話 - PIYO Notes

リンクの見た目をいい感じにするためにOGPのJSONのサーバーを作って、Data-Driven Contentで表示するようにしたよ、というのが前回の話です。

echoのサーバーに機能追加

先日Hugo + Netlifyでブログを再構築したよという記事を書きました。Amazonのアフィリンクを簡単に置くためにショートコードを使っていて、記事のビルドの際にはAmazonの情報をを取ってくるサーバーが必要になります。

otiai10/opengraph: Golang Open Graph Parser

すでに動かしているGoのサーバーに機能を追加しました。/ogp?url=http://xxxxxとリクエストすると欲しいサイトのOGPをJSONで返してくれるようにします。

依存ライブラリのインストール

Goはまだ触り始めたばかりでよくわからないんですが、元々参考にしてたコードがdepというもので依存ライブラリの管理をしていたので、そのまま踏襲して使いました。

Go製でOGPを取得できるライブラリって探して見つけた↓を使いました。

$ dep ensure -add github.com/otiai10/opengraph

で、↑だとリリースが少し古くてDescriptionがうまく取れないことがあったのでmasterを参照すべく、version = "1.0.0""の行を削除し、branch = "master"の行を追加し、再度 $ dep ensureしました。

[[constraint]]
name = "github.com/otiai10/opengraph"
branch = "master"

これで準備OKです。

ルーティングとハンドラ

↑と呼ぶのが適切かどうかはさておき、次はURLと対応する処理を書きました。

Go言語のechoについては以前ちょろっと書いたので省略しますが、とても簡単にかけました。

まずはURLとその処理関数を追加する部分。

 1// importに追加
 2import(
 3 ...
 4 "github.com/otiai10/opengraph"
 5)
 6
 7func main() {
 8 ...
 9 e := echo.New()
10 e.GET("/ogp", getOgp)
11 ...
12}

処理の実装がこんな感じ。

 1func getOgp(ctx echo.Context) error {
 2 url := ctx.QueryParam("url")
 3 if len(url) == 0 {
 4 return ctx.String(http.StatusBadRequest, "Url is empty")
 5 }
 6
 7 og, err := opengraph.Fetch(url)
 8 if err != nil {
 9 return ctx.String(http.StatusInternalServerError, fmt.Sprintf("Error: %s", err.Error()))
10 }
11 og = og.ToAbsURL()
12 return ctx.JSON(http.StatusOK, og)
13}

クエリパラメータで渡ってくるurlを取り出して、先ほどのライブラリに渡してOGPの情報を得ます。それをJSONとして返すだけです。

例えばこちらの記事の情報を取得するには、サーバー/ogp?url=https://blog.piyo.tech/posts/2018-03-27-deploy-go/ とします。すると↓のようなJSONが得られます。

 1{
 2 "Title":"ブログのビルド用にGoのサーバーをVPS上で動かした話 - ぴよログ",
 3 "Type":"article",
 4 "URL":{
 5 "Source":"https://blog.piyo.tech/posts/2018-03-27-deploy-go/",
 6 "Scheme":"https",
 7 "Opaque":"",
 8 "User":null,
 9 "Host":"blog.piyo.tech",
10 "Path":"/posts/2018-03-27-deploy-go/",
11 "RawPath":"",
12 "ForceQuery":false,
13 "RawQuery":"",
14 "Fragment":""
15 },
16 "SiteName":"ぴよログ",
17 "Image":[
18 {
19 "URL":"https://goo.gl/NSXeuF",
20 "SURL":"",
21 "Type":"",
22 "Width":0,
23 "Height":0,
24 "Alt":""
25 }
26 ],
27 "Video":[
28
29 ],
30 "Audio":[
31
32 ],
33 "Description":"ブログのビルド用にGoのサーバーをVPS上で動かした話",
34 "Determiner":"",
35 "Locale":"",
36 "LocaleAlt":[
37
38 ],
39 "Favicon":"https://blog.piyo.tech/images/favicon-16x16.png"
40}

あとは前回の記事のとおり、Data-Driven ContentでこのJSONを使うだけですね。

簡単にAPIサーバーを作ることができたおかげで思ったとおりにブログいじりが進みました。

GoogleのURL短縮サービスで作ったURLはサービス終了後も生き続ける

Tue, 03 Apr 2018 06:30:16 +0900

先日Google URL Shortenerのサービス終了が発表されました。今まで生成した大量のURLをどうしよう、戦慄している人も多いと思われます。

ニュースの見出しだけ見て「サービス終了まじか！」とならないように、原典をあたりましょう。

Google URL Shortener links will no longer be available [updated]

Understand how you will be impacted by our decision to turn off the serving portion of Google URL Shortener.

developers.googleblog.com

結論から言うと、既に作ったURLはサービス終了である2019年3月30日以降も従来通りリダイレクトされます。

原典にもその旨きちんと記載があります。

all existing links will continue to redirect to the intended destination.

また、ログイン状態で作られたURLのリストやアナリティクスデータはCSVでダウンロードできます。

右上に「DOWNLOAD CSV」ボタンがありますね。サービス終了までの間はCSVフォーマットで↑の画像と同等の情報をダウンロードすることが可能です。

とは言え、リダイレクトもいつまで続けてくれるか正直わからないと思うので、そもそも使わないでおいたほうが良いでしょう。

Hugoでブログリンクの見た目をはてなブログっぽくする

Mon, 02 Apr 2018 19:41:48 +0900

これまでHeartRails Captureを使ってきたブログ内リンクを自前の実装とショートコードに置き換えました。

以前使っていたはてなブログのリンクの表示形式が気に入っていたので、それをリスペクトする形でほぼ同じような見た目で表示できるようにしました。

ある記事内のリンクの見た目はどうなったのか。BeforeとAfterで見比べてみましょう。

Before

After

新旧の違い

新旧で見た目が異なるのはもちろんですが、より詳しい情報を得られるように仕組みも変更しました。

Heartrails Captureを使ったリンクではブラウザで表示したときに見える画面のキャプチャを表示していましたが、今回のリンクではOGPを利用します。

最近は多くのサイトでOGPの画像やDescriptionが設定されていることが多いです。Hugoに移行した時からOGPを使って表示したいなと思っていました。

ショートコードとHTML

ショートコードは例えばこんな感じにしました。

{{< link url=“https://blog.piyo.tech/posts/2018-03-27-deploy-go/" >}}

ショートコードに対応したHTMlは以下のようになってます。~~（ほぼはてなブログと一緒）~~

 1{{- $url := .Get "url" -}}
 2{{- $json := getJSON .Site.Params.OgpJsonBaseUrl $url -}}
 3{{- $title := $json.Title -}}
 4{{- $siteName := $json.SiteName -}}
 5{{- $description := $json.Description -}}
 6{{- $favicon := $json.Favicon -}}
 7{{- $image := index $json.Image 0 -}}
 8{{- $imageUrl := $image.URL -}}
 9{{- $urlInfo := $json.URL -}}
10{{- $host := $urlInfo.Host -}}
11
12<div class="embed-wrapper">
13 <div class="embed-wrapper-inner">
14 <div class="embed-content with-thumb">
15 <div class="thumb-wrapper">
16 <a href="{{ $url }}" target="_blank">
17 <img src="{{ $imageUrl }}" class="thumb">
18 </a>
19 </div>
20
21 <div class="entry-body">
22 <div class="entry-title">
23 <a href="{{ $url }}" target="_blank">{{ $title }}</a>
24 </div>
25 <div class="entry-content">
26 {{ $description }}
27 </div>
28 </div>
29 </div>
30 <div class="embed-footer">
31 <a href="{{ $url }}" target="_blank">
32 <img src="{{ $favicon }}" alt="" title="{{ $host }}" class="favicon">
33 {{ $host }}
34 </a>
35 <a href="http://b.hatena.ne.jp/entry/{{ $url | safeURL }}" target="_blank"><img src="https://b.hatena.ne.jp/entry/image/{{ $url | safeURL }}" class="bookmark-count"></a>
36 </div>
37 </div>
38</div>

HugoにはData Driven Contentの仕組みがあります。これはAmazonのAdvertising APIのときにも利用したのですが、JSON APIから戻ってきた値をベースにしてHTMLを組み立てられるというものです。

Data Templates | Hugo

コードのこの部分で、JSON APIを呼び出してOGPをJSONで取得します。

1{{- $json := getJSON .Site.Params.OgpJsonBaseUrl $url -}}

OgpJsonBaseUrlについては、Hugoのconfig.tomlにこのように書いておきました。

1[params]
2 OgpJsonBaseURL = "https://myapi.xxxxx.yyy/ogp?url="

今回はURLに対応するOGPをJSONで返すサーバーを自前で用意しました。 config.tomlにはその自前サーバーのパスを書いておき、ショートコードの中でURLを渡してAPI呼び出します。そして得られたJSONの中身をもってHTMLを組み立てるということを行いました。

ちなみに、OGPをJSONで取得する方法は、最初FacebookのかOpen Graphオブジェクトデバッガーあたりからできるのではないかと考えていました。ですがどうもそんなものがないのか探し方が悪いのか、見つかりませんでした。

次回はOGPのJSONを返すサーバーについて書きまーす。

echoで書いてるブログの用サーバーにベーシック認証をかけた

Sun, 01 Apr 2018 19:41:48 +0900

VPSでビルド用のサーバーを動かしているという話を書いたかと思います。

ブログのビルド用にGoのサーバーをVPS上で動かした話 - PIYO Notes

main.go · master · longkey1 / amazon-product-json · GitLab

自分しか使わないのでベーシック認証を書ける形に変更しています。

その前に：echoについてちょっと

雑にいうと、expressとかsinatraとかっぽい書き方でサーバーを書けるGoのライブラリっぽいです。

最小に近いサンプルはこんな感じで、e.GETにパスとリクエストハンドラみたいなのを書いてあげればOKというシンプルな感じです。

 1func main() {
 2 e := echo.New()
 3 e.GET("/hello", func(c echo.Context) error {
 4 return c.String(http.StatusOK, "Hello")
 5 })
 6 e.GET("/world", func(c echo.Context) error {
 7 return c.String(http.StatusOK, "World")
 8 })
 9 e.Logger.Fatal(e.Start(":1323"))
10}

実際、Advertising API用のコードもかなりシンプルです。

↓は参考にさせてもらった元のコードです。この部分でasinを受け取るリクエストを処理してます。

ベーシック認証

公式にドキュメントにちゃんと書いてあります。めちゃくちゃシンプル。

Basic Auth Middleware | Echo - High performance, minimalist Go web framework

まず、importにmiddlewareを使うべく一行追加。

1import (
2 // 略
3 "github.com/labstack/echo"
4 "github.com/labstack/echo/middleware" // この行
5)

続いてmainでmiddlewareを使う旨と、usernameやパスワードを書いておいてあげます。

 1func main() {
 2 e := echo.New()
 3 // 略
 4 e.Use(middleware.BasicAuth(func(username, password string, c echo.Context) (bool, error) {
 5 if username == "joe" && password == "secret" {
 6 return true, nil
 7 }
 8 return false, nil
 9 }))
10 // 略
11}

という感じで設定できましたー。

あとは使う側がusername:password@hostnameでアクセスすれば良いです。

Railsのroutes.rbでconstraintsを使う

Sat, 31 Mar 2018 18:27:30 +0900

ルーティングのマッチングの優先順位のせいか期待通りのコントローラーで処理できないことがあります。そんなときにconstraintsオプションでroutesのパラメータのフォーマットを制限できます。たまーに使います。

たまーにしか使わなくて、なんで書いてあるんだっけ？と忘れていたので、思い出せた今回メモがてらに書いておきますよ。

例だよ

例えばこんな感じのroutes.rbになっているとします。

1 resources :messages, only: %i(index show)
2 namespace :messages do
3 resources :unreads, only: %i(index)
4 end

postd.cc →https://postd.cc/how-dhh-organizes-his-rails-controllers/

↑の例のようにnamespaceを切ると登場しうる書き方かなと思います。

で、3つのルーティングができます。

messages_path GET /messages(.:format) messages#index
message_path GET /messages/:id(.:format) messages#show
messages_unreads_path GET /messages/unreads(.:format) messages/unreads#index

1個めと2個めは割と問題ないのですが、3個目が曲者です。↑のルーティングの意図としてはhttp://localhost:3000/messages/unreadsなどとアクセスした場合にはunreads#index側にいってほしいはずです。

ですが、/messages/unreadsのunreadsの部分が、’/messages/:id’の:idの部分とマッチしてしまい、messages#show側で処理しようとしてしまいます。デフォルトでは:idの箇所は数値でも文字列でもなんでもいいことになっているので、unreadsという文字列のパラメータが渡ってきたとして判断しちゃうんですね。

こうするよ

これを想定通りに動かすためにconstraintsを使います。今回は:idの部分が数値である場合にmessages#showにいってほしいので、その条件を書きます。

1 resources :messages, only: %i(index show), constraints: {id: /\d+/} # <= この部分
2 namespace :messages do
3 resources :unreads, only: %i(index)
4 end

constraintsには正規表現でパターンを指定できます。今回は数値にマッチする場合、としました。これ以外の/messages/hogehogeは他で処理しますので、今回のルーティングだと/messages/数値と/messages/unreads以外はNo Routeになるわけですね。

constraintsについて詳しくは Rails のルーティング | Rails ガイドに記載があります。

Headless ChromeのテストがCircleCI上で動かなかった

Fri, 30 Mar 2018 18:27:30 +0900

おとといの記事でHeadlessChromeを使ってテストするようにしたよ、と書きました。

blog.piyo.tech →https://blog.piyo.tech/posts/2018-03-28-headless-chrome/

ですが、CircleCIではこんな感じのエラーを吐いて動きませんでした。

Selenium::WebDriver::Error::SessionNotCreatedError:
session not created exception: Chrome version must be >= 64.0.3282.0

どうやら、circleciのイメージに元々入っているchromedriverと、gemとしてインストールしているchromedriver-helperが衝突することによって起こるらしいということがわかりました。

chromedriver-helper を消す

となるとGemfileの:testのブロックからchromedriver-helperを消せばいいじゃないと思ったのですが、そうすると今度はローカルでのテストが困ります。

Macではhomebrewを使ってchromedriverをインストールすることが可能ですが、僕の場合はうまくテストから接続できず断念しました。

1$ brew install chromedriver
2$ brew services start chromedriver # サービスとして起動

Gemfile書き換え

さらに調べてみるとGemfileを条件付きにしてしまうという方法を見つけました。ローカルではchromedriver-helperを使うが、CircleCIでは使わないようにします。確かにこの方法を取ることができればCircleCI上でchromedriverがコンフリクトすることはありません。

Has ChromeDriver been updated on the Ubuntu 14.04 (Trusty) image?

↓このようにENV['CIRCLECI']がないときだけchromedriver-helperをインストールするようにします。

1group :test do
2 gem 'chromedriver-helper' unless ENV.key?('CIRCLECI')
3end

また、この変更をpushしたあとはCI上のキャッシュを破棄する必要があるので「Rebuild without Cache」を実行しましょう

ある程度動くようになった、でも…

軒並み失敗していたテストのうち、ほとんどが通るようになりました。ですが、一部のテストはまたドライバー周りで失敗していそうでした。エラーは大体こんな感じです。

Failure/Error: accept_confirm { click_link '削除' }
Capybara::ModalNotFound:
Unable to find modal dialog
# ./spec/features/hogehoge.rb:39:in `block (5 levels) in <top (required)>'
# ./spec/features/hogehoge.rb:38:in `block (4 levels) in <top (required)>'
# ./spec/rails_helper.rb:106:in `block (2 levels) in <top (required)>'
# ------------------
# --- Caused by: ---
# Selenium::WebDriver::Error::TimeOutError:
# timed out after 2 seconds (no alert open
# (Session info: headless chrome=61.0.3163.91)
# (Driver info: chromedriver=2.32.498513 (2c63aa53b2c658de596ed550eb5267ec5967b351),platform=Linux 4.4.0-116-generic x86_64))
# ./spec/features/hogehoge.rb:39:in `block (5 levels) in <top (required)>'

どうやら、ブラウザのconfirmダイアログを確認するところでエラーになっているようです。2秒待ったけどダイアログ出ないよ、という感じかな。

ローカルではこれらのテストはパスしているので、driverのバージョン違いがありそうです。

ちなみにchromedriveのバージョンは次の通り。

ローカル→2.37.544337
CircleCI→2.32.498513

バージョンが古いのが怪しいなと思ったのでまずはDockerイメージを変えてみることに。元々2.4系にあげるところだったのもあって、2.3.4→2.4.3とイメージを変更しました。

1jobs:
2 build:
3 docker:
4 # before
5 # - image: circleci/ruby:2.3.4-node-browsers
6 # after
7 - image: circleci/ruby:2.4.3-node-browsers

そしたらなんかうまくいくじゃないですか。ということでイメージに入っているchromedriverのバージョンが古そうだという当たりがつきました。

ですがCIのためだけににRubyのバージョンもあげるのはプロジェクトによっては困るかもしれません。

chromedriverだけを上げる方法はないものか。CircleCIの設定ファイルでアップデートする方法を探してみます。

（Dockerのイメージを専用に作れば何にでも対応できるはずなんですが、ちょっと手間がかかりすぎるのでそこまではやめておく方針です。Dockerから調べないといけないので）

イメージを変えたらGemfileの分岐は不要に

ちなみ、イメージ変更後にGemfileのunless ENV.key?('CIRCLECI')を外して動かしたら全部通っちゃいました。

これはたまたまgemのchromedriverとDockerイメージのchromedriverが一致しているだけかもしれませんが、ひとまず不要となりました。

なんとか2.3.4のイメージで動かしたい

ローカルで試す

CircleCI 2.0からはDockerに対応しているので、わざわざCircleCIにコードをPushしなくてもローカルで動作を確認できます。DockerとCircleCI CLIを入れれば割と簡単に使えるので、設定を色々いじるときはローカルを使うのがいいです。

手順は公式のこれ。

Using the CircleCI Local CLI - CircleCI

結果は不発に

CircleCIのフォーラムとかstackexchangeとかを色々あさってChromeをアップデートする方法を色々試してみました。configを変えては$ circleci build .circleci/config.ymlを何度も走らせる。。。1回15分20分かかるので結構な時間がかかりました。

で、結局はどれもchromeがcrashするからテストできないというエラーで不発に終わりました。

unknown error: Chrome failed to start: crashed
(Driver info: chromedriver=2.32.498513 (2c63aa53b2c658de596ed550eb5267ec5967b351),platform=Linux 4.9.87-linuxkit-aufs x86_64)

エラーを見るにchromedriverのバージョンは変わらないですね。なので実は更新ができていないんだと思われます。深追いするには利用しているDockerイメージをローカルで動かして調べてみたりするのかなー。

僕個人的には2.4.3のイメージを使えば大丈夫だったので深追いはせず一旦は諦めました。

以下、やってみてだめだったことを一応書いておきます（すべて.circleci/config.ymlに書いて試した内容です）。

参考にした情報とのセットで記載します。

https://superuser.com/questions/130260/how-to-update-google-chrome-in-ubuntu

1- run:
2 name: Chrome
3 command: |
4 wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
5 sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
6 sudo apt-get update
7 sudo apt-get --only-upgrade install google-chrome-stable

https://discuss.circleci.com/t/session-not-created-exception-chrome-version-must-be-62-0-3202-0/19258/8

1- run:
2 name: Install Chrome
3 command: |
4 sudo apt-get update
5 sudo apt-get install google-chrome-stable

https://discuss.circleci.com/t/session-not-created-exception-chrome-version-must-be-62-0-3202-0/19258/10

1- run:
2 name: Install Chrome
3 command: |
4 curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
5 sudo dpkg -i google-chrome.deb
6 sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
7 rm google-chrome.deb

Hugoで記事内のリンクを新しいタブで開く方法

Thu, 29 Mar 2018 19:21:13 +0900

HugoではMarkdownで記事を書いていますが、そのままだと記事内のリンクをクリックしたときに現在のタブで移動してしまいます。

離脱が！！

かといってマークダウンの記法にはtarget blankする記法がありませんよね？なのでHugoのドキュメントを当たってみました。

gohugo.io →https://gohugo.io/getting-started/configuration/

調べてみてわかったんですが、Hugoでは内部でGo製の「Blackfriday」というライブラリが使われているみたいです。

russross/blackfriday: Blackfriday: a markdown processor for Go

ドキュメントにもConfigure Blackfridayという見出しがあるのでそこに言ってみるといろいろな設定があります。

その中にhrefTargetBlankという項目がありました。

default: false
Blackfriday flag: HTML_HREF_TARGET_BLANK
Purpose: true opens external links in a new window or tab.

まさに欲しかったオプションです。これをHugoのconfig.tomlでtrueにしてあげることでリンクが新しいタブで開くようになりました。

[blackfriday]
hrefTargetBlank = true

このページのリンクもちゃんと新しいタブで開きますよ。

RailsのFeatureテスト環境をHeadless Chromeに変更した

Wed, 28 Mar 2018 18:30:12 +0900

Poltergeist detected another element ...に対応するために RailsのFeatureテスト環境をHeadless Chromeに置き換えました。

Capybara + PhantomJSのフィーチャテストでドロップダウンメニューがクリックできないので色々調べてみると、ドロップダウンメニューが画面外に描画されちえるらしいことが判明。

うろ覚えだけど、ウィンドウサイズを1920x1080とかにして実行してたら、↓のようなクリックできなかったよ、といエラーが出てました。

Firing a click at co-ordinates [21xx, 40] failed. Poltergeist detected another element with CSS selector ''

x座標が画面幅越えてるっていうね。このレイアウト崩れのようなものはPhantomJSに起因するらしいので重い腰をあげてHeadless Chromeに乗り換えました。

最初に参考にしたのはこちらのSpeeeさんの記事。

tech.speee.jp →http://tech.speee.jp/entry/2017/06/15/135636

さらに細かい点で対応を調べたかったのでさらに詳しいGitLabの記事も見ながら進めました。

about.gitlab.com →https://about.gitlab.com/2017/12/19/moving-to-headless-chrome/

変えてみてどうだったか

PhantomJSとHeadless ChromeではCapybaraのドライバーで提供される機能が違うのでそのままでは動かない箇所がある、というのは↑の記事でも書いてある通りです。特にGitLabさんはいろんな工夫をしててすごい。けど僕の場合はそこまですることもないなーということで、同等のテストをするような別の方法に置き換えて回避する作戦でいきました。

削除ボタンなんかで、「削除してもいいですか？」みたいなconfirmを出している箇所はテストコード側に対応が必要なので面倒でした。一度テストを流してみないと気づかないし。

ただ、レイアウトがおかしくてクリックできないみたいなことはなくなりました。変なことにはまらなくてよくなったのは快適です！！

ブログのビルド用にGoのサーバーをVPS上で動かした話

Tue, 27 Mar 2018 18:50:47 +0900

そのサーバーをインターネットからアクセスできるところに動かしていると書きました。

blog.piyo.tech →https://blog.piyo.tech/posts/2018-03-20-renewal/

ローカルで動かしていたWebサーバーをインターネット上に公開する必要がありました

のところ。

サーバー

以前もリンクを貼ったこちらのコードを使わせてもらいました。

longkey1 / amazon-product-json · GitLab

Go言語のechoというWebフレームワークが使われていて、URLにASINを含めてリクエストするとAdvertising APIの結果がJSONとして返ってきます。

ショートコードが生成するHTMLはこのJSONに合わせて作っています。

デプロイ

Goはほとんど使ったことがないのでよくわかっていないのですが、サーバー上にバイナリを置いてデーモンぽく起動させておいて、元々動いてるNginxで外からのリクエストをこのGoのサーバーに振ってあげればいいだろうなーと想像して適当にデプロイしました。デプロイ先は普段から使っているConohaのVPSです。

環境構築にはAnsibleを使っています。秘伝のPlaybookに今回のサーバー用の設定を追記してプロビジョニングしました。

実施したのは

ファイルの置き場所を作る
ビルド済のサーバーバイナリをコピーする
サーバーのconfig.tomlをコピーする（APIキーなどを記載）
systemd用の定義ファイルを配置
起動スクリプトを配置
停止スクリプトを配置

です。

後半3つを軽く説明します。

systemd 定義ファイル

バイナリのコマンドをサービス化するためにsystemdの仕組みを使いました。

Wikipediaによると、

systemdはシステム管理デーモン、ライブラリおよびユーティリティの一式であり、管理および設定における中心的プラットフォームとしてLinuxコンピュータオペレーティングシステム用に設計されている。

だそうです。

コマンドをサービス化する件に関してはこのリンクが一通り網羅しているので細かいことは省略します。

Systemdを使ってさくっと自作コマンドをサービス化してみる - Qiita

今回は起動スクリプト、停止スクリプトをも別途用意したのでその部分に関して書きます。

まず作った定義ファイルはこちら。

[Unit]
Description=hugoapi
After=syslog.target network.target
[Service]
Type=forking
EnvironmentFile=-/etc/default/hugoapi
WorkingDirectory=/home/user_name/hugoapi
ExecStart=/usr/local/bin/hugoapi-server-start.sh # 起動スクリプト
ExecStop=/usr/local/bin/hugoapi-server-stop.sh # 停止スクリプト
User=root
Group=root
KillMode=none
Restart = always
[Install]
WantedBy=multi-user.target

色々設定がありますが、どうせ自分用だし細かいことは気にせずに動かしてます。ExecStartやExecStopにシェルスクリプトを指定しています。

起動・停止スクリプト

↑の定義ファイルに指定しておいたスクリプトはこんな感じになってます。

まずは起動スクリプト。

1#!/bin/bash
2[ -d $RUN_DIR ] || mkdir -p ${RUN_DIR}
3cd $RUN_DIR
4./hugoapi_linux_amd64 -c ./config.toml > $LOG 2>$ERROR_LOG &
5echo $! > ${PID_FILE}

ワーキングディレクトリに移動してコマンドを起動し、pidファイルをつくります。

続いて停止スクリプト。

1#!/bin/bash
2[ -f ${PID_FILE} ] && kill -9 $(cat ${PID_FILE})
3[ -f ${PID_FILE} ] && rm ${PID_FILE}

pidファイルに書いてある番号のプロセスを停止し、pidファイルを削除します。

これだけなんだけど、systemdの定義ファイルに書くには長いのでスクリプトに分離しました。これを適当な場所に置いて定義ファイルにパスを書いておいたというわけです。

おわり

これで無事GoのサーバーをVPS上で動かすことができました。

Go、なかなかサクッとデプロイできてよかったです。

O/RマッパーからDB触り始めた人にSQL書き方ドリルがおすすめ

Sun, 25 Mar 2018 22:25:22 +0900

tl;dr

SQL苦手な人にこの本めちゃくちゃオススメです。特に手を動かさないと頭に入らない人向け。すごく凝ったことはできるようにならないかもしれないけど、少なくともSQLへの苦手意識は払拭されます。

改訂第3版すらすらと手が動くようになる SQL書き方ドリル (WEB+DB PRESS plus)

SQL 第2版ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

僕とRDBMSとの関わり

↓のような感じの仕事歴で、前半はRDBMSにほとんど接する機会がありませんでした。

CADっぽいデータを扱うWindows上でMFCアプリケーション（4年）
簡易なiOSアプリやらWin上の変換プログラムやら、一部Railsやら（3年）
Rails中心（3年）

Winアプリケーションの頃はデータの保存はバイナリをシリアライズしたりXMLっぽいテキスト形式だったり。基本ファイルへの保存。

後半になってからRailsを触りだしたのでそこで初めてDBと関わることになりました。Railsには通常ActiveRecordがいるのであまり意識することなくDBを扱えてしまいます。

サービスの立ち上げがメインの仕事なので、複雑なデータや大量のデータは現れにくいというのがこれまでの個人的な感覚です。大体はActiveRecordの範囲で割となんとかなってしまいます。SQLを学ぼうとしても実感が沸かないという壁があって、なかなか学習を進められませんでした。

ここが難しいのは、割となんとかなっているという感覚は知らないからなんとかなっていると思っていただけかもしれないということ。実はもっと効率の良いクエリが書けるとか、そもそももっと良い設計があったとか、そんな場面は多々あったのだと思います。

最近は開発しているアプリケーションで扱うデータ複雑になってきたこともあり、SQLに苦手意識があることをなんとかしたいなと課題に思っていました。

ちなみにDB関連ではだいぶ易しいと思われる、

d.hatena.ne.jp →http://d.hatena.ne.jp/tkawa/20120325/p1

を読んだこともありましたが、「うんうんわかったそれで？」という感じで実感は相変わらず伴いません。読めないこともないけど、書けないという感じ。

という流れから冒頭の本に出会ったわけです。

どんな本か

ドリル形式

ドリルと名がつくだけあって、例題に沿って進む形式です。回答用のJAVAアプリケーションが入っていて、問題の解になるSQLを書いてポチッとすると正誤判定をしてくれます。採点が自動なのは便利です。

逆に言うと、SELECTとは何で〜、みたいな細かい説明はありません。とりあえず書こうぜという感じです。人によりますが、僕はこちらの形式がとても好きです。

全編を通して共通のデータベースを利用していて、「上司」から降ってくる様々な要望を満たすデータを提出するという仕事を課せられているという設定です。あれこれテーブルをJOINしてGROUP BYして欲しいデータを返してあげるみたいなことを繰り返すので、データの集計に慣れます。

書き方重視

クエリの書き順を重視しています。書き順を重視することは、イコール、クエリがどのように実行されていくのか、データの固まりがどうなっているかを意識することにつながります。ここを徹底させられるので知らず知らずのうちに書けるようになります。

脱力系の猫がかわいい

かわいいです。

一通り終えて

多段JOINのあるクエリなどをスラスラ書けるようになったという実感があり、苦手意識は払拭されました。少なくとも読んで理解しようという気が起きるように（ｗ）なりました。

また、↑にも書きましたが、データの集計に慣れるっていう感覚はSQLを直接書いてみたいとわからない感覚だったな、と思っています。ドリル前は元データと欲しいデータがうまく繋がっていなかったです。

今後のモデリングやデータベースの設計に明らかに役に立ちそうなので、やってよかったです。3〜4時間もあれば終わるはずなので、時間もかからないし超オススメです。

ブラウザからPATCHメソッドのリクエストが飛ばないときは

Sat, 24 Mar 2018 23:03:19 +0900

tl;dr

プロキシサーバーでPATCHがブロックされているかもしれないから、PUTに切り替えたら動いたよ。

経緯

仕事で開発しているRailsアプリケーションでのできごとです。あるお客さんの社内のPCのIEから、あるデータを一部修正するするためのボタンが動かない、という連絡をもらいました。ユーザーのステータスを更新する機能のようなものというイメージを持ってもらえたらいいです。

この機能はボタンを押したらAjax的にリクエストを投げて戻ってきたら画面を更新するということをやっていました。最初はIEを疑いましたが、同様にAjaxな削除ボタンは動くらしくIEのせいではないことがわかりました

次に調べたのはRails側のログですが、該当のリクエストに相当するログが一切なかったのでサーバーにリクエストが到達していないことがわかりました。

いくつか似たような機能のうち動かないものを列挙してもらったところ、それらの共通点として全てがPATCHメソッドのリクエストを投げていることがわかりました。

Railsではリソースのupdateアクションに対応するメソッドはPUTまたはPATCHです。一部更新というような機能の際はPATCHを使うようにしていました。

この辺の話題は同僚の@tkawaさんがだいぶ前に書いてくれてます。

まずは一箇所だけPATCH→PUTと変更してみたところ、該当部分が動くようになったことがわかり、やはりPATCHが原因だったことがわかりました。

どうやらそのPCは外部へのアクセスが厳し目の設定になっているらしいです。原因が完全にはわかっていないものの、プロキシサーバーあたりが怪しいと推測するに至りました。

結論

環境によってはPATCHを使わないほうが良い。

Macの文字ビューア（絵文字と記号）を事実上無効にする

Fri, 23 Mar 2018 15:46:13 +0900

Macでコード書いたりアプリ切り替えたり色々してると、こいつが出る時ないですか？

このウィンドウは「Control ＋ Command ＋スペースバー」の同時に押すことで表示されます。色んなショートカットを駆使している関係で時折誤爆して表示されてしまっているようです。

表示時にはフォーカスがないため「Command + w」や「Esc」で消すことができず、大変鬱陶しく思っていました。今日いよいよ対策を打ちました。

そして事実上無効に

このウィンドウの正体は「編集」メニューにある「絵文字と記号」というもので、ほとんどのアプリのメニューにあります。

これの一番下。

ところでMacには各アプリのメニューにある項目に対してメニュー名とキーの組み合わせでショートカットを指定できる機能があります。

この「絵文字と記号」メニューに対してもっと別の、頑張らないと押せない組み合わせのショートカットキーを変更することで事実上無効にしてやりました。

Macの「システム環境設定」から「キーボード」の設定へ移動しショートカットを選びます。続いて左側からアプリケーションを選び、下部の+ボタンを押します。

すると次のような入力欄が出るので、

アプリケーション：全アプリケーション
メニュータイトル：絵文字と記号
キーボードショートカット：（押すのが難しい組み合わせ）

として追加します。

これだけだとメニューが英語のアプリケーションに対応できないので、もう1つ設定を追加してメニュータイトルをEmoji & Symbolsとしたものも追加しておくとよいです。

僕は「Control + Shift + F12(fn + 音量↑)」にしました。ファンクションキー系は普段使わないので誤爆することはないだろうなと思います。

GitHub用ブラウザ拡張のOctotreeがプルリク確認にも便利

Thu, 22 Mar 2018 15:53:22 +0900

OctotreeはGitHubでソースコードのツリーを表示してくれるブラウザ拡張です。便利ですよね。 ChromeだけじゃなくてFirefox、Safari、なんとOperaにも対応。GitHubだけじゃなくBitbucketも実験的に対応しているらしい。すごい。

buunguyen/octotree: Code tree for GitHub Octotree - Chrome ウェブストア

しばらく気が付かなかったんですが、プルリクの画面だと変更されたファイルがツリーで表示されてるじゃないですか。

Change option verbiage · buunguyen/octotree@ef12824

どうやら半年ちょい前にREADMEが更新されてるので、そのあたりに機能追加されたんだな。

どんな感じ？

Port to Microsoft Edge by Jack-Q · Pull Request #488 · buunguyen/octotree

例えば↑のリンクのページを開くとこんな風に追加削除の行数も含めて出てます。

これに気がついてからは、個人的にはめちゃくちゃ便利に使っています。

業務でコードレビューするときに、複数のファイルを追いかけながら詳細を確認したいとき、Octotreeがないと上下にスクロールしなきゃいけません。Octotreeを入れておくと見たい箇所に的確に飛べて、元の場所にも戻りやすくて快適になりました。

Hugo + Netlifyでブログを再構築

Wed, 21 Mar 2018 00:37:25 +0900

2つほど前の記事でRailsで作ったよと書いて早1年。Railsで作った時点で満足し、その間ほとんど新しい投稿をすることもなく過ぎてしまった。心機一転ブログを再開する気持ちになったものの、なんか盛り上がらないなーということでまずは引っ越しからはじめました。

今までWordpressを自分でホストしたり、ブログサービスを使ってみたり、CMSごと作ったりと色々やってきて、次も違うやり方をしたいなと思いスタティックサイトジェネレータとNetlifyを使うことにします。

スタティックサイトジェネレータにはGo言語製のHugoを選びました。Rubyのより早そうだし。

The world’s fastest framework for building websites | Hugo

データエクスポート

各記法への対応

引っ越しということで、過去データがあるのでそれを移行しなきゃいけません。はてなブログ時代のはてな記法が残っているのをなんとかする必要があります。

例えばこのへん。

Amazonアソシエイト
Twitter
ブログカード

はてなの記法はすごく便利なんだけど、独自だから移行のときにめんどくさいんですよね。

[asin:XXXXXXXXXXXX:detail]
[https://twitter.com/pi_cha_n/status/835146845626118146:embed]
[http://hogehogehoge.com/:embed:cite]

Rails製のブログでは画面出力のときにマークダウンの本文の中からこの手の記法を正規表現で見つけてはHTMLに置換するというのをやっていました。

Hugoのマークダウンには素のHTMLを書くこともできます。Railsブログから移行用のデータを出力する際、上の記法をHTMLに変換したうえで出力するというスクリプトを書きました。

URLが変わらないように

元のRailsブログのURLはhost名/posts/{slug}となっていました。Hugoでもその構造にできそうだったので、pathを維持したまま移行することにできました。

幸い元の記事のPathには、各記事ごとに持つ文字列（=slug）を使うようにしていたので、それをそのまま記事のファイル名とすることで対応できました。

スクリプトはこんな感じ

 1Post.all.each do |post|
 2 File.open("#{post.slug}.md", 'w') do |f|
 3 title = post.title.gsub(/@|:/, '')
 4
 5 f.puts('---')
 6 f.puts("title: #{title}")
 7 f.puts("description: #{title}")
 8 f.puts("tags: [#{post.tag_list.join(',')}]")
 9 f.puts("date: #{post.published_at}")
10 f.puts('---')
11
12 f.puts
13
14 # 各記法をよしなに変換する
15 f.puts convert(post.content)
16 end
17end

そうするとメタデータ（？）の部分がこのようになります（例）。

1---
2title: 快適な目覚めのため、カーテンを自動で開閉する
3description: 快適な目覚めのため、カーテンを自動で開閉する
4tags: [生活]
5date: 2017-03-03 22:18:00 +0900
6---
7
8（あとは内容が続く）

続いてコンテンツの変換部分

Twitter

Hugoにはショートコードという仕組みがあります。大体はてな記法のようなものですが、自分で新しくつくることができ、出力されるHTMLも自由に書けるため自由度が高いです。

この先また移行、となると面倒なんだけどひとまずおいておきましょう。

例えばTwitterの場合はTweetのIDがあればこんな風に

{{< tweet 877500564405444608 >}}

書くことでHugoのデフォルトの状態でもTweetが展開されます。

（これ、コードブロックの中に書くと展開されちゃうのが不便だ。。。）

ブログカード

はてなブログカードはリンクを貼るときにただの文字だけじゃなくて、メタデータや画像込みで表示してくれる機能です。

はてなのブログカード

画像付、いいですよね。簡易でもいいのでなんとか実現したい。Rails製ブログのときにも使っていたHeartRailsのサービスを使って実現します。↓こんなのですね。

blog.piyo.tech →https://blog.piyo.tech/posts/blog-with-rails5/

ざっくりいうとこんな感じで変換できます。

1def convert(content)
2 screenshot = "[![](https://capture.heartrails.com/200x150/shadow/border?\\1)](\\1)\n[\\1](\\1)"
3 content = content
4 .gsub(/\[(.+):embed:cite\]/, screenshot)
5 .gsub(/\[(.+):embed\]/, screenshot)
6 .gsub(/\[(.+):title\]/, screenshot)
7end

Amazonアソシエイト

Amazonは難しかったです。はてなの場合はasinを書くだけで商品情報を貼り付けることができましたが、あれははてなブログ側でProduct Advertising APIを使って情報を取得してくれているのだと思います。asinだけではAmazonへのリンクを作るのは難しかったはず。

ということでググってみると、同様の仕組みを実現している方がいました。

blog.longkey1.net →https://blog.longkey1.net/2017/10/01/hugo-amazon-shortcode/

簡単にいうと、、

Advertising APIのXMLをJSONに変換して返すWebサーバーをローカルに立てる
Amazonアソシエイト用のショートコードを用意して、asinを渡す
ショートコードのHTMLでWebサーバーにリクエストを送る
戻ってきたJSONの情報を用いてHTMLを組み立てる

というようなことを行っているようでした。HugoはJSON APIの戻り値をそのまま画面に出せるような仕組みがあります。

ショートコードやHTMLは自分用に少しいじりましたが、概ねこの方法でやってみました。

{{< amazon asin=“B01ERLNK72” >}}

と書いておくと、↓のように展開されます。すごく良いですね。

【新しいモデルがあります】めざましカーテン mornin’ (モーニン) 太陽の光でスッキリ目覚める MN-C01 2017年度グッドデザイン賞受賞