tomisawk's tech blog

技術的なこと(プログラミングメイン)のアウトプット場所

Flow導入手順

TODO 書きかけ

Flowをインストー

公式に従って導入する。 https://flow.org/en/docs/install/

yarn add --dev babel-cli babel-preset-flow
yarn add --dev flow-bin
yarn add --dev flow-typed
yarn run flow init

.flowconfigが生成される。生成されたら[ignore]配下に .*/nodemodules/.* を書き加える

[ignore]
.*/node_modules/.*
[include]

[libs]

[options]

.babelrcのpresetsにflowを追加。例えば以下のようになる

{
  "presets": [
    [ "es2015", {"modules": false} ],
    "react",
    "stage-2",
    "flow"
  ],
  "plugins": ["react-hot-loader/babel"]
}

※ 検索するとでてくる transform-flow-strip-types plugin は babel-preset-flow に含まれる、というか現時点ではこれだけを含んでいるので presetsにflowを追加すればそれだけでよい。

flow-typed を使うためにpackage.jsonのscriptsに

"flow-typed": "flow-typed"

を追加

Atomでの環境

Nuclideをインストールする。 設定画面で、Nuclide-Flowにある Use the Flow binary included in each project’s flow-bin を有効するとプロジェクトのflowを使うようになるので設定。

Nuclide有効にすると色々便利になるが、環境がらりと変わっちゃうっぽいのが 若干気になる。あとWindowsはフルサポートじゃないらしい。

tool-bar, language-babel, sort-lines などの推奨パッケージを入れる。

Atomのパッケージを色々追加

古いパッケージアップデート/消去した後に色々なサイトをあさって便利そうなものをとにかく追加した。

現在の状況を記録に残す。

現在のパッケージ一覧(apmコマンドより出力)

apm list --installed --bare
Hydrogen@1.16.0
advanced-open-file@0.16.6
ask-stack@2.2.0
atom-beautify@0.29.26
atom-clock@0.1.8
atom-nodejs-snippets@1.5.0
atom-ternjs@0.18.3
autocomplete-modules@1.6.10
autocomplete-paths@1.0.5
autocomplete-python@1.8.64
bezier-curve-editor@0.7.2
busy-signal@1.4.3
clipboard-plus@0.5.1
color-picker@2.2.5
css-snippets@1.1.0
emmet@2.4.3
ex-mode@0.15.0
expose@0.14.0
file-icons@2.1.7
git-control@0.9.0
git-plus@7.9.3
git-time-machine@1.5.9
highlight-selected@0.13.1
imdone-atom@2.2.6
intentions@1.1.2
japanese-menu@1.13.0
jumpy@3.1.3
key-peek@0.2.12
keybinding-cheatsheet@0.1.1
language-babel@2.65.1
language-haml@0.24.5
language-javascript-jsx@0.3.7
language-markdown@0.23.0
language-restructuredtext@1.1.0
language-scala@1.1.8
language-vb@0.1.0-pre1
linter@2.1.4
linter-clang@4.1.1
linter-coffeelint@1.2.1
linter-eslint@8.2.1
linter-flake8@2.2.1
linter-jshint@3.1.2
linter-ui-default@1.6.1
markdown-table-formatter@2.9.0
markdown-toc@0.4.2
merge-conflicts@1.4.5
minimap@4.28.2
minimap-bookmarks@0.4.2
minimap-git-diff@4.3.1
monokai@0.24.0
nuclide@0.232.0
open-recent@5.0.0
pigments@0.39.1
project-manager@3.3.5
react-redux-snippets@0.1.6
react-snippets@0.7.4
recent-files-fuzzy-finder@0.3.2
regex-railroad-diagram@0.17.0
remote-edit@1.9.0
script@3.15.0
sort-lines@0.14.0
split-diff@1.4.1
tablr@1.8.3
tabs-to-spaces@1.0.3
tag@0.5.0
term3@0.22.1
todo-show@1.11.0
tool-bar@1.1.0
tree-view-finder@0.2.1
vim-mode@0.66.0
vim-mode-clipboard-plus@0.2.0
web-search@0.3.3
which-key@0.3.3

Emacsでのはてなブログ投稿環境を整える

普段メモはemacsのorg-modeにて書いているため はてなブログの記事を書く際にもorg-modeを使って書きたい。 そのための環境を整える。

これらを使う

org-modeの文章 => org-export(ox-pandoc) => Markdown(github flavored) => はてなブログへ投稿

という環境を構築するために必要なものをリストアップ。

Github Flavored Markdown に変換することで、はてなでもプログラムのコード等埋め込めることを 確認できたので当面はこれでいく。 まだまだ調査不足で満足いく環境にはなっていないのでその内再度環境整備したい。

インストー

ox-pandoc

https://github.com/kawabata/ox-pandoc

package.elやel-get等を使って入れる。省略。

pandoc

macOSの場合

brew install pandoc

自分でビルドする方法等他にもたくさんあるが今回使ったのはHomebrewのpandoc.

その他OSの場合/その他インストール方法は http://pandoc.org/installing.html を参照。

hatena-blog-mode

自宅環境用のlocal領域にインストール。cloneする場所は自分の好きなところでOK. 個人的に複数の環境で共有したくない/する必要のない設定絡みは~/.emacs.d/local以下に 配置してgit管理の対象から外すようにしている。

cd ~/.emacs.d/local
git clone https://github.com/fnwiya/hatena-blog-mode

色々探してみたが最終的にはこのページを参考。このページの通り設定する。

http://yanqirenshi.hatenablog.com/entry/2016/07/02/Emacs_%E3%81%8B%E3%82%89%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%81%B8%E6%8A%95%E7%A8%BF_1

使い方

M-x org-export-dispatch(C-c C-e) => p => gMarkdownに変換。必要に応じてMarkdownを修正する。

M-x hatena-blog-write => hatena-new-entry.mdバッファが開くため変換したMarkdownの内容を貼り付ける。

M-x hatena-blog-post => タイトル、カテゴリを入力、下書きかどうかを選択。

色々な記法をテスト

コードを埋め込み

Scala

#+begin_src scala
val a = "hello"
println(a)
#+end_src

val a = "hello"
println(a)

Python

#+begin_src python
import os
a = 'hello'
print(a)
print(os.listdir())
#+end_src

import os
a = 'hello'
print(a)
print(os.listdir())
* レベル1
レベル1テキスト

** レベル2
レベル2テキスト

*** レベル3テキスト
レベル3テキスト

**** レベル4テキスト
レベル4テキスト

***** レベル5テキスト
レベル5テキスト

****** レベル6テキスト
レベル6テキスト

レベル1

レベル1テキスト

レベル2

レベル2テキスト

レベル3テキスト

レベル3テキスト

  1. レベル4テキスト

    レベル4テキスト

    1. レベル5テキスト

      レベル5テキスト

      1. レベル6テキスト

        レベル6テキスト

その他参考

こういうのもある

org-modeの文書をはてな記法に変換するox-hatena.el http://akisute3.hatenablog.com/entry/2013/08/23/150311

初記事

自己紹介

ソフトウェア技術者

Scala/Python/JavaScript等で社内用のシステム開発をやっています。

アウトプットの重要性

「アウトプットが重要」ということは色々なところで言われています。

  • 自分の理解が深まる
  • 書くこと/伝えることの練習になる

といった効用があるらしく、自分もアウトプットしなくちゃいけないな、 と思っていました。

しかしいつもアウトプットできずにいました。 言い訳はたくさんあるのですが、

  • 時間がない(インプットも満足にできてないのにアウトプットできない)
  • 恥ずかしい(間違ったこと書いたらどうしよう)
  • ネタがなくなってすぐに辞めてしまいそう

等が主な理由です。

今回自分のキャリアについて考える機会がありました。 重い腰を上げてアウトプットしようと考えたのは以下の事実に気づいたから。 (いや、知ってはいたが重大なことだと考えていなかった)

「自分がすごいと思った人 = メディアに露出している」

そもそもその人を知ったきっかけは、ブログなり書籍なりでアウトプットをしているからであり、 もしその人がアウトプットしていなければ、その人がどんなにすごい技術を 持っていようが誰も知ることはない、ということ。

このままではいけない、と奮い立ち、今回初めてブログを書くという形でアウトプットをしています。 とにかくスタートしてみて、自分を追い込む作戦です。

行動を起こすまでずいぶんと時間がかかりましたが、 気負わずとにかく継続することを目標に続けてみます。 書くからには、読者へなんらかの「価値」を提供できるようにしていきたいと思います。

今後の書くネタ

今まで自分用に書き溜めていたメモや、調べたことなどについて書いていこうと思います。

  • 〇〇を調べてみた/使ってみた
  • 〇〇のセットアップ方法
  • 便利な小技紹介

あわよくば会社の教育資料の元ネタとしてそのまま使えるようなコンテンツを作りたいと思います。

これを機に新しい技術にも取り組みたい!

以上、これからよろしくお願いします。