福岡へ4泊5日で働きながら旅をしてきた(2) ご飯篇

福岡へ旅行行った時のごはんをまとめました

食べたもの

ざっくり説明するとこのような感じです。

お店	住所	食べたもの
博多天ぷらたかお	福岡県 福岡市博多区 住吉 1-2-1 キャナルシティ博多 4F シネマストリート	天ぷら、昆布明太、白ご飯、浅漬け
炉ばた しんがり	福岡県福岡市中央区舞鶴1-9-3	胡麻鯖の刺身、あぶり明太子、白ご飯、厚焼き卵、味噌汁
天神わっぱ定食堂	福岡県福岡市中央区今泉1丁目11-7 今泉ＫＹビル	博多定食
うなぎ料理 古蓮	福岡県柳川市三橋町下百町31-6	せいろ蒸し
博多魚がし 市場会館店	福岡県福岡市中央区長浜3丁目11-3	海鮮丼
中州屋台橫丁	福岡県福岡市博多区中洲 那珂川 通り	ラーメン、焼き鳥
おおやま KITTE博多店	福岡県福岡市博多区博多駅中央街9-1 KITTE博多B1F	もつ鍋
柳橋食堂	福岡県 福岡市中央区 春吉 1-10	Aセット(ミニ海鮮丼+あら煮込み)

博多天ぷらたかお

キャナルシティ内の天ぷら屋さん。福岡初のごはんはこの店。揚げたての天ぷらを都度運んでくれるお店。昆布明太と浅漬けがお代わりし放題。白いご飯と昆布明太の組合せが美味しい。

ちなみに東京にもあります。

炉ばた しんがり

親不孝通りにあるおしゃれな外観のお店。一人分の注文がちょっとしづらいメニューだったので量が少なそうなものを少しづつ注文しました。胡麻鯖の刺身美味しかったです。

この店のあぶり明太子はちょっと辛めだったのでビールだけでは太刀打ちできませんでした。ということで白いご飯をお願いしました。結果、明太子、白ご飯、ビールの無限ループ。最後は厚焼き卵のコンボを決めて福岡初日の夜を終えました。

天神わっぱ定食堂

二日目のお昼。食堂で博多定食を注文。豚汁が美味しい。そしてここでも明太子が。東京にいると明太子はたまにしか食べないのですが博多にいるとものすごい頻度で食べる事になります。うちの近所にもこういう定食屋が欲しいなあ。

うなぎ料理 古蓮

柳川へ川下りを体験しに行った後、船頭さんにおすすめされたお店。ちなみに柳川で消費されるうなぎの量は、年間100万匹以上だそうです。

あと歴史好きで立花宗茂を知っている人ならわかると思いますが、そのうち大河ドラマで放送されるようになるかも知れないのでそうなったら柳川はちょっとした人気スポットになるかも?

博多魚がし 市場会館店

中央卸売市場鮮魚市場の中にあるお店。市場で水揚げされたネタを用いた寿司や海鮮丼などを提供するお店が揃っています。複数店舗があるのですが博多魚がしを選択しました。海鮮丼美味しい。玄界灘のポテンシャルを味わいました。

ちなみに魚がし以外にもお店があって地元の人は他のお店をチョイスしていたのでもし次回行くときは他の店にも行ってみたいと思います。

中州屋台橫丁

ラーメンと焼き鳥を堪能しました。味に関しては美味しいですがお値段がちょっと観光価格かな？天気も良かったので気持ちよくお酒を飲めました。

お客さんの割合は中国人と韓国人と日本人が1:1:1 ぐらいかな？

おおやま KITTE博多店

もつ鍋を一人で食べたいので一人向けのお店に行きました。モツがぷりぷりしてて柔らかいです。おおやまは他にも福岡市内に何店舗かありますがお一人様向けかどうかは店舗によって異なるかも？ちなみに東京にもあります。

柳橋食堂

柳橋連合市場という博多の台所的な地域があるのですが、ここにも海鮮丼を食べられるお店があります。宿泊場所によっては海鮮市場まで距離がある場合はこちらを利用するのも良いと思います。

まとめ

というわけで行って来たお店を五月雨式にまとめました。また福岡に行ったらまとめたいと思います。

福岡へ4泊5日で働きながら旅をしてきた

あらすじ

私は現在東京でフリーランスのエンジニアをしていますが、いつか海外を旅しながら働きたいという願望があります。拠点を日本に残しつつ、労働ビザではなく、観光ビザで3ヶ月ごとに旅する国を変えたい。

なんですが拠点を東京に残した場合は維持費が結構かかります。東京以外の選択肢が必要なので福岡を視察をする為に4泊5日で行って参りました。

旅の概要

ざっくり説明するとこのような感じです。

日程	天気	内容
9月24日(日)	晴	成田->福岡、チェックイン、市内を散策
9月25日(月)	快晴	4h作業、太宰府、柳川、STAND BY ME
9月26日(火)	快晴	2h作業、糸島
9月27日(水)	曇り時々雨	4h作業、市内を散策、awabar
9月28日(木)	晴れ	チェックアウト、お土産購入、福岡->成田

旅の目的は3つ

• 実際に旅行しながら稼働を確保するのはどこまで可能なのか?
• 地方で車を運転する
• 福岡は移住先として検討するための情報を入手する

実際に旅行しながら稼働を確保するのはどこまで可能なのか?

週3程度の勤務の場合、この日程だと16時間稼働すればOK。なんですが仕事の状況がそこまで切迫していなかったので今回は10時間程度の稼働に切り上げました。意外と作業に集中できたので旅行先で稼働するのはアリだと思いました。

地方で車を運転する

車を運転したかったのは私が地方への移住を検討しているにも関わらずペーパードライバーだからです。去年ぐらいから移住を検討していて2016年の8月ごろに免許を取得していたのですが運転をしたのは夏らしさを求めておじさん2人が南伊豆へ旅した記録 2017の一回だけです。

色々ありましたが無事生きて帰ることができました。

福岡は移住先として検討するための情報を入手する

まったく福岡に人脈がないので「立ち飲み BAR に行ってなんか話しかけてみるか」ぐらいの気持ちでしたので、正直あまり成果を期待していなかったのですが、意外にも色々な情報を入手する事ができました。

飛行機と宿泊先

飛行機と宿泊を計画。日程に関してはいつ、どれぐらい滞在するか特に決めていなかったので、安い航空会社を検索。3週間後の成田、福岡間のジェットスターが安かったのでこれにしました。金額は17440円です。

宿泊先は Airbnb を利用しました。Airnbn を利用するのは初めてです。4泊で25602円です。内訳は以下の通りです。

内訳	金額
¥ 4900 × 4 泊	¥ 19600
清掃料金	¥ 3000
Airbnbサービス料（VAT込み）	¥ 3002

利用した部屋はこちらです。利用した理由は金額が安すぎず高すぎず、相場にマッチしていると感じたこととレビューには非常に便利な立地であるとの記述があったからです。実際にその通りで素晴らしい立地でした。おすすめです。お値段はシーズンによっては上記の金額と違うと思います。

www.airbnb.jp

事前に調査した事

以下の動画、記事を見ました

• 福岡県のオシャレスポットPR動画「HAKATag CLAPS The Deepest Fukuoka City Guide」 - YouTube
• Y氏は暇人
• http://hash.city.fukuoka.lg.jp/ijyu-yui

あとは現地で高度の柔軟性を維持しつつ臨機応変に対応する事にしました。

TOPICS

自分の為に細かい事を色々と買いて備忘録を残したいのですが、それをすると長くなってしまうので主要な情報だけ紹介します。ごはんに関しては別の記事にまとめたいと思います。

STAND BY ME

おしゃれなホテルと立ち飲み BAR のお店です。

ホテルに関しては当初はここに泊まる事も考えたのですが、予定していた日程では連続して宿泊できなかったので今回は Airbnb を利用する事にしました。

立ち飲み BAR に関しては地元の人と出張にきた人が半々ぐらいかな？と思いました。ここは1000円でチケット4枚と交換するシステムです。大体のお酒とおつまみがチケット1枚と交換です。例えばよなよなビールですと4杯飲めます。

博多は何故かところどころで価格破壊が発生しています。私は結構東京で呑んだくれていますが本当に千円でべろべろになるせんべろの店には出会った事がありませんでした。

でも福岡ではせんべろのお店に簡単に出会えてしまいます。

働いている女の子にお願いしてポーズをとってもらいました。ブログへの掲載許可を頂いております。

awabar

福岡のコワーキングスペース、スタートアップカフェを見て来ました。ここは小学校を再利用した施設でコワーキングスペースの他にカフェや立ち飲み BAR が運営されています。

働いている女の子にお願いしてポーズをとってもらいました。ブログへの掲載許可を頂いております。

この BAR でお店の人に「東京から来た福岡に移住を検討中のエンジニアです」と伝えたところ、福岡のIT事情やら生活水準などを色々な事を教えてくれました。

そして偶然なのですが私が旅行前に参考に読んだブログのライターさんがそこで働いているというミラクルが発生。実際に東京から福岡に移住してみた感想などを色々質問。有益な情報がいくつか得られました。

• 福岡ではエンジニアが不足している(東京もそうだけど)
• 単価の基準が東京と異なる為スキルがある人材は流出する
• 福岡で一番お金があるクライアントは行政
• 福岡では PHP が多い
• 福岡では割とレガシーなプログラムが多い*1

というわけで福岡に移住する時に一番ネックになりそうなのがクライアントとの報酬を交渉する部分だと思います。震災を機に福岡へ移住したライターさんを紹介してもらいそのあたりの話を聞く事ができました。単価についてはかなりの温度差が推測されるので福岡で仕事を探すのは得策では無いのかも。福岡で仕事を得るには自身で雇用を作り出す気概が必要になりそうです。

• 福岡の家賃は安い
• 福岡の食事は安くてうまい
• 福岡には適齢期の女性が多い

福岡の家賃はとても安く、市の中心エリアでも家賃4万円もあれば十分だそうです、食事も安くて美味しいです。報酬が減ったとしても生活水中が上回る可能性もあります。

また若い女性が多いという話は良く言われているのですが、実際に行政側がIT企業を福岡に誘致したがっているらしいです。IT系の企業は大体男子の比率が高いのでそうなると色々な人たちの問題が一斉に解決するでしょう。そんなわけで今後は福岡でプログラマの求人が増える可能性もあると思います。

ちなみに福岡で一番家賃が高い地域は西新だそうです。これは学区が関係していて自分の子供を良い学校に入れたい場合は住所が関係してくるからだそうです。

• 佐賀県に唐津スイッチという施策がある
• 住居・オフィス提供します
• 利用者は7日以上、3カ月以内の滞在期間中、同市南城内のシェアオフィスで仕事をすることが条件

またまた紹介された別の人から聞いたお話。福岡の人はやたらと人を紹介する習慣があるとかないとか。ちなみに彼はその唐津スイッチという施作を行政と一緒に行っていて、狙いとして地元のクリエイターを刺激するために、外部のクリエイターを誘致したいという思惑などからこのような施作が生まれている模様。

などなど awabar では有益な情報がたくさん聞けました。なんでも福岡のスタートアップの情報が全部この awabar に集まっているとかいないとか。

ちなみに私に色々な人を紹介してくれたスタッフさんは私が旅行前に参考に読んだブログのライターさんでした。彼女のブログは福岡に来る前に一読しておくと良いでしょう。

まとめ

ということで週3で働く在宅ワークのエンジニアは働きながら旅をすると色々な知見が得られるのでオススメです。もし福岡に行く場合はSTAND BY ME と awabar に立ち寄るのをおすすめします。

こちらからは以上です。

*1:文脈的にPHPがレガシーみたいな感じになっていますが私は PHP を否定しておりません。

i18next を使って国際化してみる

github.com

あらすじ

とあるサイトの開発に携わっているのですが、将来的に国際化して海外ユーザーもターゲットとしたい。という話なので予め国際化する準備をしておきたい。

最初は react-intl を試そうとしましたが、どうやら react-helmet との相性があんまり良くなさそう。使えるんだけどインターフェースが複雑。

そんな訳で次に react-i18next を試そうと思ったのですが、そもそも i18next の使い方を覚えたほうがいいなと思ったので練習しました。

やりたい事

• 日本語、英語に切り分けたい
• `{t('key')} と書いたらいい感じになる
• {t('key', 引数)} のように引数を渡したい
• t('some.key)}` のよう書きたい

将来的に国際化したいのですがいきなりそこまで頑張りたくもないです。なんですが Form Validation のところだけは最初から国際化したいのでそこだけ頑張りたいです。

どうせサーバーサイドとのやりとりでエラー文言は英語になるだろうし...

just do it

create-react-app practice-i18next && cd $_
mkdir -p locales/{en,ja}
touch locales/{en,ja}/translation.json
yarn add i18next --save

create locales/en/translation.json

{
  "hello": "hello",
  "world": "world",
  "welcome": "welcome, {{name}}!!",
  "validation": {
    "isNotEmail": "{{email}} is not valid email."
  }
}

create locales/ja/translation.json

{
  "hello": "こんにちは",
  "world": "世界",
  "welcome": "ようこそ, {{name}}さん!!",
  "validation": {
    "isNotEmail": "{{email}} は正しい形式ではありません"
  }
}

edit src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import i18next from 'i18next';
import enLocalesTranslationJson from './locales/en/translation'
import jaLocalesTranslationJson from './locales/ja/translation'

i18next
  .init({
    fallbackLng: 'ja',
    debug: true,
    resources: {
      en: {
        translation: enLocalesTranslationJson
      },
      ja: {
        translation: jaLocalesTranslationJson
      }
    }
  });

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
         <h2>{i18next.t('hello')}</h2>
         <h2>{i18next.t('world')}</h2>
         <h2>{i18next.t('welcome', {name: "田中"})}</h2>
         <h2 style={{color: "red"}}>{i18next.t('validation.isNotEmail', {email: "tanaka@"})}</h2>
      </div>
    );
  }
}

export default App;

動作確認

yarn start

まとめ

react-i18next という公式な react 向けの wrapper があるようですが、なんだか i18next で事足りる気がする。react-i18next を使ったほうがいいのかは後々考える事にします。

Gatsby.js の Tutorial で Error: Unable to find plugin "gatsby-plugin-typography" と言われる場合

結論

プロジェクトのディレクトリに移動して npm install --save gatsby すると良いでしょう。issue あげたら npm の問題であるとの事ですが、gatsby 側からは特に対応しないようです。とはいえ tutorial 試して見て動かないから使うのやめた、という人達が出てきてしまう気がするのでちょっと気になる。まあ Gatsby.js が結構バギーな状態の気がするので初学者が何かするにはそもそも敷居が高い気がするのでしょうがないのかな。*1

Error: Unable to find plugin "gatsby-plugin-typography" in Gatsby.js Tutorial Part Two · Issue #1989 · gatsbyjs/gatsby · GitHub

問題

I tried Gatsby.js Tutorial Part Two but I found the error message.

環境

% node -v
v8.1.0

% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.12.6
BuildVersion:   16G29

再現方法

I typed the following commands.

% cd 
% npm install --global gatsby-cli
% gatsby --version
1.1.6
% gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
% cd tutorial-part-two

At this point, I can run the gatsby develop. But I found the error message when I create the gatsby-config.js.

% cat << EOT > gatsby-config.js
module.exports = {
  plugins: ["gatsby-plugin-typography"],
}
EOT

% npm install --save gatsby-plugin-typography 

the error

% npm run develop

> gatsby-starter-hello-world@ develop /Users/okamuuu/tutorial-part-two
> gatsby develop

success open and validate gatsby-config.js — 0.005 s
(node:76343) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: Unable to find plugin "gatsby-plugin-typography"
(node:76343) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

解決策？

Looks like node_modules/gatsby is almost empty.

% ls -al node_modules/gatsby
total 0
drwxr-xr-x   3 okamuuu  staff   102  9  1 23:51 .
drwxr-xr-x  94 okamuuu  staff  3196  9  1 23:51 ..
drwxr-xr-x   3 okamuuu  staff   102  9  1 23:51 node_modules

So I tried to type npm install --save gatsby. It looks good to me.

%  ls node_modules/gatsby/
README.md       cache-dir       node_modules    yarn.lock
bin             dist            package.json

*1:個人的には結構気に入っていて最近ずっと触っています

React で Latex を含む Markdown を扱いたいので markdown-it-katex を使った

あらすじ

React で Markdown を使いたい場合は react-markdown が存在します。React で latex を使いたい場合は react-katex が存在します。なんだけど Markdown に Latex を含む場合はどうやればいいのか知らないので調べました。

結論

markdown-it とその plugin である markdown-it-katex を使う

Just Do it

準備

create-react-app practice-react-markdown-it-katex && cd $_
getstorybook
yarn add markdown-it markdown-it-katex @storybook/addon-knobs gh-pages

edit stories/index.js

 
 import { Button, Welcome } from '@storybook/react/demo';
 
+import 'katex/dist/katex.min.css'
+import MarkdownIt from 'markdown-it'
+import mk from 'markdown-it-katex'
+
+const md = new MarkdownIt()
+md.use(mk)
+
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => <Button onClick={action('clicked')}><U+1F600> <U+1F60E> <U+1F44D> <U+1F4AF></Button>);
+
+const result = md.render('# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$');
+
+storiesOf('markdown-it', module)
+  .add('katex', () =>
+    <div dangerouslySetInnerHTML={{ __html: result }} />
+  )

yarn run storybook で http://localhost:6006 で動作確認できます(port は各々の環境によって異なる場合があります)

注意点は下記の2点

• markdown-it が parse した HTML はJSX(仮想DOM)ではないので React で使う場合は dangerouslySetInnerHTML を使用します
• katex が使用する CSS は markdown-it-katex を install したときに node_modules/katex/dist/katex.min.css に入っているはずなのでそれを使用します。

storybook で動作確認

とあるプロジェクトで数学の問題を Markdown 形式で記述しているチームがいるのでこの compnent が要件を満たしているかどうかをチェックしてもらいます。

今回は gh-pages に簡単に上げられるので storybook とその addons を使う事にします

edit .storybook/addons.js

 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

edit stories/index.js

 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+
+const stories = storiesOf('Storybook Knobs', module);
+stories.addDecorator(withKnobs)
 
 import { Button, Welcome } from '@storybook/react/demo';
 
@@ -26,3 +30,11 @@ storiesOf('markdown-it', module)
     <div dangerouslySetInnerHTML={{ __html: result }} />
   )
 
+const markdown = '# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$'
+
+stories.add('markdown-it-katex with knobs', () => {
+  const parsedMarkdown = md.render(text('Markdown', markdown))
+  return (
+    <div dangerouslySetInnerHTML={{ __html: parsedMarkdown }} />
+  )
+})

この状態で yarn run storybook を再起動します。右下に KNOBS のタグが追加されているのでここに Latex を含んだ Markdown を入力してもらい、期待動作として正しいのか確認してもらいます。

gh-pages

まず github にある自身の repository を用意しておきます。

yarn run build-storybook を実行して、 storybook-static 配下に storybook を静的ファイルとして生成します。その後 $(npm bin)/gh-pages -d storybook-static を実行します。

これでコンテンツ作成チームに記述した Markdown がきちんと動いているかを確認してもらえるようになりました。

まとめ

というわけで無事 React で作られて Component に Latex を導入することができました。

上記の例だと Latex の記述が先頭と最後尾に $ が入ってくる想定になっていますがそこは各自で適宜調整頂ければと思います。

こちらからは以上です。

github.com

第69回青梅市納涼花火大会に行って来た

あらすじ

とある友人が「夏の思い出作りたいわー」と言い出したのでみんなで花火を見に行くことになりました。そして引率するのが私になったのですが、都内の花火大会は人が多いから引率するの大変そうなのでどうしたものかと思ったら地方で花火を見るという選択肢を思いつきました

8月5日(土)に開催されている花火大会を探す

さて、日程はすでに決まっているのですが、まだどの花火大会に行くのか決まっていません。条件は以下で設定しました。

• 8月5日に開催される
• 東京近郊
• 人あんまりいない

で、第69回青梅市納涼花火大会を発見したのでこれにしました。決め手になってのは打ち上げ数に対して人出が少ないというところです。

名称	打ち上げ数	前年の人出
第69回青梅市納涼花火大会	約3600発	1万4000人
第58回いたばし花火大会	約1万2000発	52万人
第42回江戸川区花火大会	約1万4000発	90万人

花火の数はメジャーな大会に比べて1/3ですがそれでも 19:30-20:40 まで打ち上げるので十分楽しめる本数だと思います。

感想

結果、この花火大会はなかなかの穴場スポットでした。人数が少ないので場所取りも穏やかで、花火までの距離が近くて迫力満点でした。

到着時間が少し遅れたこともあって*1無料開放されている青梅私立第一小学校に入れなかったのですが、その周りに腰掛けてみんなで仲良く、ビール片手に花火を鑑賞してきました。

まとめ

都内の花火大会はなんだかんだで花火との距離が遠いし、人がいっぱいで疲れるから、花火は地方で見るのが正解なんじゃないかな。

こちらからは以上です。

*1:浴衣を着てくる女子がいる場合は大体そうなるでしょう

MacOSX: ターミナルで複数ファイルの文字列を一括置換する

もう何度も同じ事を繰り返すのでMEMO

MacOSX に入っている sed コマンドは Linux のとは少し違うので brew install

brew install gnu-sed --default-names

でこんな感じで実行

find ./src -name '*.html' | xargs sed -i 's/xxx/yyy/g'