humangas's blog

自分用のメモなので雑です。

はてなブログにSNSアイコンでプロフィールをつくる

タイトル分かりにくいけど、要はこういうこと。サイドバーをなるべくシンプルにしたかったため。

f:id:Humangas:20170909081542p:plain

やりかたの流れ

  1. SNSsvgファイルを手に入れる
  2. それをどっかのサイトに置く(Publicアクセスできる場所)
  3. サイドバーでHTMLを編集して終わり

SNSsvgファイルを手に入れる

適当に画像検索なりすると出て来る。公式に配られている場合もある。

それをどっかのサイトに置く

Cloudupが便利かも

使い方は超簡単で、アカウント作成 -> D&DでファイルをUPするだけ

画像以外のファイルも何でも良い。https://cloudup.com の動画を見てみると利用イメージがよく分かる。

UPしたファイルを選択し右上の MORE > DIRECT URL をクリックすると 直リンクURLが得られるので、それを使う

サイドバーでHTMLを編集して終わり

  1. 自分のはてなブログの管理画面で、デザイン > カスタマイズ を選択
  2. サイドバー > モジュール追加 してHTMLを選択
  3. タイトルは未入力にして以下を貼って終わり
<p style="margin:0px 0px; text-align:left">

<a href="https://github.com/humangas" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="GitHub"></a>

<span style="margin-right: 5px;"></span>

<a href="https://gist.github.com/humangas" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="Gist"></a>

<span style="margin-right: 5px;"></span>

<a href="https://twitter.com/humangas_" target="_blank"><img  src="https://cldup.com/XXX.svg" width="35" height="35" alt="Twitter"></a>

</p>

XXXX.svg のところがさっき手に入れた直リンク

見た目の修正は適当にCSSやらで調整すればいい

(※上のmarginは意味ないが後で調整するかもしれないので、そのままmargin: 0px 0px で置いてあるだけ)

広告を非表示にする

go+html,css,jsをライブリロードするのは、mattn/goemonが一番良かった

TL;DR

goで、webアプリとか作ってる時に、ファイル保存→ WEBライブリロードが出来ないと、苦痛でしょうがない。 それを解決するツールで最適だったのが、mattn/goemonだったという話(私にとっては)。使い方も超簡単。感謝。

使い方

簡単なので、以下をサッとみればわかる。

ポイントを記載しておく

Installation

$ go get github.com/mattn/goemon/cmd/goemon

五右衛門の設定ファイルを出力

$ goemon -g > goemon.yml
$ vim goemon.yml
# watch対象のパスを変えたりする

リロード対象のHTMLには以下を突っ込んでおく

<head>
    ...
    <script src="http://localhost:35730/livereload.js"></script>
    ...
</head>

See also: https://github.com/mattn/goemon#livereload

このポート番号は、goemon.ymlの以下と一致させておく

livereload: :35730

goemon 起動

$ goemon go run main.go

あとは、ひたすら開発しとけばいい。あぁ、楽だ。

オマケ

go専用ツールというわけではないので、markdownファイルだけということもできるもよう

$ goemon -g md > goemon.yml
$ goemon --

その場合は、mdファイルだけ監視しておいて、保存したら、任意のコマンドを流してHTMLにする、で、livereload: とかしとけばいい。

コレ見ればわかる。

jsをmin化したいなら、↓を入れといて、js保存時の処理で流せばいい。

$ npm install -g minifyjs

試行錯誤メモ

goemonに辿り着く前に、色々やってみたりしたので、そんときのメモ

まず、このライブリロードをやりたければ、選択肢は無数にあると思う。以下など。

  1. fswatchをmakeとか自作スリクプと組み合わせる
  2. go製の他のライブリロード系ツールをつかう
  3. gulpで、goもbuildしてしまう

fswatch + make

色々試したりしてみてみたが、ドンピシャがなくて、goemonに出会う前までのしばらくはこれでやっていた。
要は、こういう感じにする。

GO_FILES = $(wildcard *.go)
serve:
    @make restart
    @fswatch -o . | xargs -n1 -I{}  make restart || make kill

※ fswatchでなくても、ファイル監視できるツールならなんでもいいけど。

参考にしたサイト:

あとは、自作スクリプトなりを組み合わせて、別にこれでもそれなりには出来ていたけど、以下ができてなくてめんどくさいなと思ってた。
本質的でないところに時間とられたくもないし。。

気に入ってないところ

  • いちいち、セキュリティ警告がでる:そのアプリの証明書をつくればいけるがめんどくさい
  • ビルドできるのはいいけど、画面描画は手動でやってる。browser-sync的にやりたい。

go製の他のライブリロード

go自体のファイルを監視、ビルドするツールは色々あり、それはそれで使えるツール達だったが、今回の静的ファイル(HTMLとか)との組み合わせだとサッとはできなかった。

  • gin(WebフレームワークのGinとは違うやつ)
  • fresh
  • ReRun

See also: http://www.spidersoft.com.au/2014/live-code-reload-in-golang/

gulpでやる

フロント系リソース(HTML, CSS, JS)の開発だけなら、別にこれでいいと思う。
これは、gulpるで書いた。

ここに、goファイルを保存したらリロードも入れたいわけだ。

プラグインは一杯あるし、var exec = require('child_process').exec; とか使えば、OSコマンドは叩けるのでなんでもできそうだし。

でも、いちいちgulpfileを組むのがめんどくさいし、goの開発したいのに、gulpでつうのも何か気持ち悪い。なので、途中でやめた。

じゃあ、go製のタスクランナーは?

godo という go版gulp的なものがあった。 goで、gulpfileみたいなやつを書く感じ。
正直なんでもできそうな感じはしたけど、それだとmake+fswatchでもいい気がするし、いちいち覚えるまでモチベーションも上がらなかったのでやめた。

まとめ

結局、goemonでサクッとできた。とても気持ちいい。

ところで、goでなんか調べていると、このmattnさんの記事がすごく出て来て勝手にお世話になっている。 で、人追いしてたら、memoとりツールも作られていて、それが自分が欲しかった要件を満たしていて、すごく感激した。

mattn/memo

カスタムも出来るようになっているし、zsh completionと組み合わせると便利すぎた。
これから使っていくと思うけど、自分のMUSTツールになりそう。

広告を非表示にする

gulpる

gulpをさっと試す。HTMLいじったら自動でリロードしてもらうところでま記載。

なぜ、gulpりたいのか?

サクッと、WebUIを持つツール等を作りたい時がある。 そんな時に、サクサクサクッとやりたいわけだ。 フロントには慣れてないが、そういう時によく聞くgulpを使おうとなった。

先に書いておくと、↓がドンピシャだった。感謝!

結論:思いのほか簡単で、すぐにやりたいことが出来、気持ちよかった。

セットアップ

node.jsを入れて、gulpを入れる。 gulpは、nodeのパッケージなので。

$ brew install node
$ npm install gulp -g

-g は、グローバルにインストールという意味。
gulpとか、どこでも使うコマンドは、グローバルに入れておくのが楽。

package.json をつくる。 このファイルには、nodeのパッケージとか記載する。 これがあれば、別環境とかで、npm install とするだけで、環境が復元できる。

pythonで言う、requiretemnts.txtみたいなもんと思えばいいだろう。

$ npm init

勢い系(全部Enter)でOK

ブラウザリロードするために必要なパッケージと、gulp本体を突っ込む

$ npm install gulp --save-dev
$ npm install browser-sync --save-dev 

--save-dev をつけてインスコすることで、さっきのpackage.jsonに記載される。
pip freeze > requiretemnts.txt みたいなことだと思えばいいだろう。

いよいよgulpファイルを書く

gulpは、タスクランナー。gulpfile.jsというファイル名で、自動でやらせたいこととか書いて、gulpコマンドを打てば、それで終わり。
make(= gulp) と、Makefile(gulpfile.js) というざっくり理解でいいだろう。

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "src",
            index: "index.html"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch("src/*.html", ['bs-reload']);
    gulp.watch("src/*.js", ['bs-reload']);
    gulp.watch("src/*.css", ['bs-reload']);
});

これは、src配下のhtml, js, css を監視しておき、ファイルが更新されたら、reloadして。と書いてある。

gulpる

$ gulp

これだけで、監視が始まり、ブラウザが自動で起動する。

あとは、src配下のhtmlなどをゴリゴリ書いては、更新をすれば、見た目をガンガン確かめながら開発を進められる。気持ちよす。

オマケ

npm install やると、node_modules というフォルダが出来て、そこにブツが入ってくる。 開発中は必要だが、コレ自体をgit管理する必要はないので、.gitignoreとかに書いとけばよいだろう。

広告を非表示にする

Material Design Lite(MDL)はさくっとWeb画面つくるのに最適(かも)

何?

サクッとWebツールを作りたい時がある。 画面は、生HTMLでもいい。 そんぐらいの要件。
とはいえ、それだとあまりにダサいので、ちょちょっと気軽に、シンプルなCSSフレームワークは無いかと見ていたところ、これがあった。

Google製である。

https://getmdl.io/

Setup

CDNでやるが楽。ローカルに何もいらない。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

gulpでオートリロードと組み合わせると、開発楽なので、npmで入れるのもいいだろう。

npm install material-design-lite --save

See also: https://getmdl.io/started/index.html

マニュアルがシンプル

あとは、COMPONENTS を見て、HTMLを記載するのみ。

見れば、わかる。

まとめ

Liteというだけあって、軽いし、その分、やれる種類も少ない。
でも、重厚なもんはいらない。サッと装飾したいだけ、みたいな感じの要件のときには、かなり最適なのではと思った。

で、gulpと組み合わせると、より楽できるのである。 その辺はココに書いてある。

最近、なんでもGoで組むことが多いが、ちょいとしたWebアプリつくる際に、先に紙芝居をさっとこれでつくっておいて、あとで、go側実装して、html/templateを画面に組み合わせてアプリ化する。というフローがそれなりにスピーディーにやれるようになってきた。

参考になるサイト

もうちょい細かくは、他でググったほうが、コンポーネントの説明など書いてくれてる以下のようなサイトをざっと眺めるのが早い。お世話になりました。

広告を非表示にする

Terraformで、Digital Oceanする

何したい?

terraformで、手軽に検証サーバを作りたい。Digital Oceanが楽そうだという話

ちょいとしたサーバをテストしたい時、AWSよりもっと気軽に安く試せる環境はないかと思っていたところ「Degital Ocean」を思い出した。

最近、terraformで、vSphere, AWSなどを構築しだしたので、対応してるかなぁと調べると、ドンピシャ対応してたので、やってみることにした。

結論:使えそう。特に、Ansible開発をペペッとやりたいと思っていたので、ちょうど良いかもしれない。

Digital Oceanのアカウント作成

  1. https://www.digitalocean.com/ にアクセス
  2. サインアップしたら、以下をやっておく
  3. Paypal登録($5のプランでいいだろう)※1
  4. 二段階認証設定(少しでも安全を)※2
  5. API > Token > Generate New Token から Tokenを作成する ※3
  6. あとは、terraformでやるので特に設定なし

注釈

  • ※1: はじめに支払って$5使い切るまでストックされてる感じぽい。あと、$10のサービスもついてきた ※2017/03/02現在
  • ※2: Google Authenticator とかでいい
  • ※3: (terraformで構築する時のアカウント認証に必要)

ローカルで秘密鍵を作成する

sshで鍵認証でログインするために、つくっておく(パスフレーズなし)

$ cd ~/.ssh
$ ssh-keygen -t rsa -f digitalocean_2017-03-02.pem

セキュリティ情報を環境変数にして外出しておく

$ cat ~/.zsh.d/digitalocean.sh

export TF_VAR_digitalocean_token='***'
export TF_VAR_ssh_fingerprint=$(ssh-keygen -l -E md5 -f ~/.ssh/digitalocean_2017-03-02.pem | awk '{print $2}' | sed -e 's/^MD5://')

注釈

  • ここで設定するtokenは、先に作成したToken
  • TF_VAR_xxという環境変数にしておくと、terraformから、variable “xxx” {} と設定しているところに勝手に設定してくれる。(設定されてない場合は、実行時に聞かれる)
  • ハマりポイント!: fingerprintは、MD5にしとかないとterraform planする時に怒られた。(もしかすると、鍵を作る前に実行したから?。。今度しらべておく)
  • 鍵関係で構築に成功したり、失敗したりしたので、もしや、鍵作られる前にサーバ実行しに行ってる? と思い、後で依存関係を足した(depends_on = ["digitalocean_ssh_key.default"])。それなのか、↑のMD5なのか、今となっては前後関係がわからん。

ちなみに

↑のファイルは、zsh環境変数の一つとしてロードするが、~..zshrcの最後に↓でロードしているから。 完全にオレオレ仕様なので、適宜読み替えてください。

# Source ~/.zsh.d/*.sh
setopt nonomatch
if ls ~/.zsh.d/*.sh > /dev/null 2>&1; then
  for file in ~/.zsh.d/*.sh ; do
    [[ -r $file ]] && source "$file"
  done
fi
setopt nomatch

早速、実行

ソースは、ここにあるので、git cloneするなりして入手 - https://github.com/humangas/provision-examples/tree/master/examples/example-03/terraform

$ cd /Users/humangas/src/github.com/humangas/provision-examples/examples/example-03/terraform
$ terraform apply

SSHでログイン

applyの最後に、IPが出力されるので、それがサーバのIP

$ ssh root@サーバのIP

後片付け

検証とかテストが終わったら、以下で削除しておく(Digital Oceanは停止してても課金されるので注意)

$ terraform destroy

# 次で、yes を入力

オマケ:imageのIDが分からないんですけど?

Webで、お目当てのサーバとかを選択した時のURL欄を見れば、パラメータに表示されているので、その文字列を使えばよい。

広告を非表示にする

はてなブログでFlickerの画像をつかう(とか、Flickerでリアル名を表示しない、アップロードした画像を削除する方法)

追記:

結論、はてなの写真投稿機能で良かった(リアルタイムプレビューも効くし)。
途中まで書いたのでとりあえず、投稿しておく。


最近またはてなでブログを書き出した(主に自分用のメモ)。
(いつまで続くかは不明。またすぐ止めそうな気はするが…)

で、こんなかんじで記事を書くわけだが、画像を楽に貼り付けたいな。 と改めて思っていたところで、適当にブログのメニューバーを見てると、Flickerを使えることを発見した。

これまでは、はてなの画像投稿からやってたけど、なんか遅いので、写真だけ気軽にブチ込んでおいて、あとで振り返りやすい場所としても使えるかなとFlickerでやってみることにした。

(が、後で改めてはてなの写真を投稿を使ってみたら、そっちのほうがやっぱ手軽で良かったので、せっかくFlickerアカ作ったけど、結局使わないかもしれない)

アカウント作成

なんか米国Yahooのアカウントが必要らしく、それなりにめんどくさそうだが、実際作るのは、Sign up ボタンからウィザードに従って適当に入れれば良い。

その後、確認用のコードを登録したメルアド宛に送付するボタンを押下する。

なんかすんなり届かなかったので、2回ほど押した記憶がある。

で、メールに届いた4,5桁のコードを入力してVerify完了。

これで一応使えるようになる。

使ってみる

簡単で、見たまま

  1. 右上のアップロードできそうな雲のマークを押す
  2. 画像をD&Dするか、普通に選択していってアップロード
  3. 右上のUpload N Photoをクリック

f:id:Humangas:20170826010841p:plain

パッと見、アップロードボタンが分かりづらかった。

あとは、下図のように差し込めば良いだけで、ユーザーで自分を検索すると、Publicな画像が見えるから選択すれば良い。

f:id:Humangas:20170826010812p:plain

オマケ:アップロードした画像を削除する

これもパッと見、わかりにくい。

  1. You > Photostream > 消したい写真を選択
  2. 下図の通りEditボタンをクリック
  3. Delete クリック

f:id:Humangas:20170826011236p:plain

ちなみに、同じくEditから写真を編集する機能もついているようだ。 また、写真毎に公開範囲も変えれるみたい。

リアル名を表示しない

デフォルトだと、アカウント作成時に入力した名前が表示されてしまうので嫌

変更前:(リアル名が表示) f:id:Humangas:20170826011111p:plain

変更後:(ニックネームだけ表示) f:id:Humangas:20170826011648p:plain

  1. 一番右上の自分のアイコン(デフォルトはカメラの画像)選択
  2. Settings 選択
  3. Your profile > edit who can see what リンク選択 f:id:Humangas:20170826011700p:plain
  4. 一番つようそうな下図の権限に変更 f:id:Humangas:20170826011710p:plain
広告を非表示にする

GitBookでMyナレッジベースを作ってみる

最終型はこんな感じ

f:id:Humangas:20170826002847p:plain

コンテンツは、まだ全然ないけど、ここにひたらすら貯めていけば、それなりに使えるブツになるかも。

前に、軽く GitBookを使ってみる で、ローカルでのGitBookの使い方を書いた。

GitBookには、複数のテンプレがあるが、その中のKNOWLEDGE BASEを使うと、個人的なナレッジベースが作れそうだなと思ったんでやってみた。

やりかた

  1. GitBookでアカウント作成
  2. New > KNOWLEDGE BASE 作成
  3. Settings > 自分のGitHubリポジトリを選択(空のやつ)
  4. Syncを押下(エラーが出たら、強制的に同期つーのがあるので、GitBook側で上書き)
  5. Git Cloneして、ローカルとかで適当にいじる -> push

これだけでいい

ちなみに、KNOWLEDGE BASEは、 book.jsonに以下を書くだけでできるので、別に上記手順じゃなくてもいい

"plugins": [
    "theme-faq",
]

また、Git Cloneしなくても、オンラインエディタで直接いじるでももちろんいい。

広告を非表示にする

GitBookをローカルで使う方法メモ

なぜ GitBook ?

見た目が良さげ&epub、PDFなどにも出力できるようなので、使ってみることにした。
どっかで、ちゃんとしたドキュメントを納品しないといけないとかいう場合に使えるかもということで(Wordなんか使いたくない)。

インストール

今回はローカルで使ってみたいので、そのセットアップ手順

$ npm install gitbook-cli -g
$ gitbook --version
CLI version: 2.3.0
GitBook version: 3.2.2

–vesrionを打つと、GitBook本体もインストールされたっぽい。

calibreインストール

pdf, ebupなどに変換する場合に必要なので、インストールしておく。

$ brew install Caskroom/cask/calibre

セットアップ

$ mkdir -p ~/src/work/test-gitbook
$ cd $_
$ gitbook init
warn: no summary file in this book
info: create README.md
info: create SUMMARY.md
info: initialization is finished
$ ls -l
total 8
-rw-r--r-- 1 humangas staff 16  2 27 20:44 README.md
-rw-r--r-- 1 humangas staff 40  2 27 20:44 SUMMARY.md

なるほど、init すると、READMEとSUMMARYが出来る。 適当に、Markdownファイルを足して、SUMMARYに結びつけておけばよし。

ビルド

$ gitbook build
$ gitbook pdf
$ gitbook epub

Serve

$ gitbook serve

他のテーマを使ってみる

GitBookのサイトでCreateしようとすると、デフォルトのBOOK&MANUAL以外にも利用できる模様。 ローカルでやる時には以下のようにやれば良いみたい。

book.jsonを作成する

README.mdとかと同じ階層にbook.jsonを作成する

$ cat book.json
{
    "plugins": [ "theme-faq" ]
}

プラグインをインストールする

book.jsonを読み取ってくれて、勝手にインストールしてくれる。

$ gitbook install
info: installing 1 plugins using npm@3.9.2
info:
info: installing plugin "theme-faq"
info: install plugin "theme-faq" (*) from NPM with version 1.2.1
/Users/humangas/src/work/test-gitbook
└── gitbook-plugin-theme-faq@1.2.1

info: >> plugin "theme-faq" installed with success

あとは、gitbook serve とかで起動してやると、たしかに見た目が変わった。 同じ要領でやれば、他にも拡張できるのだろう。

日本語検索対応

昔は、日本語検索が全然だめだったみたいだが、デフォルトでも引っかかるようになっていた。 とはいえ、中途半端。。

そこで、検索してみると、プラグインがあったので、追加でインスコしてみると、精度がぐっと良くなった。使えるレベルだと思う。 上記のfaqテーマに加えて、日本語検索対応を追加してみる。

$ cat book.json
{
    "plugins": [
        "theme-faq",
        "-lunr",
        "search-languages"
    ],
    "pluginsConfig": {
        "searchLanguages": {
            "lang": "jp"
        }
    }
}

$ gitbook install

GUI

brew search gitbook したら、2つ出てきた。 どちらもインスコしてみたが、以下で良いみたい(公式ぽい)。 もう一つも公式ぽいが、View用なのかな? よくわからん。

$ brew install Caskroom/cask/gitbook-editor

使い方は、見ればわかるという感じだったのでメモなし。

広告を非表示にする

備忘録:Gitで空branchを作成する

masterブランチの内容を引き継がない、別ブランチの作り方

やりたいこと

  • すでにあるリポジトリがある。
  • そのリポジトリにmasterブランチがあり、コンテンツは入ってる。
  • 新たにブランチを切りたいが、masterの内容は引き継ぎたくない(=最初空で作成して、以後独立管理したい)

git clone

$ git clone git@github.com:humangas/humangas.github.io.git

新たにブランチを切って、スイッチ

(master)$ git checkout --orphan blog

不要なファイルとindexを削除する

(blog)$ git rm -rf .
(blog)$ git clean -fdx 

これで空になったので、あとは普通にファイル足すなりしてcommit&pushすればOK

(blog)$ touch README.md
(blog)$ git add -A
(blog)$ git commit -m 'frist commit'
(blog)$ git push origin blog
広告を非表示にする

pip list 時に出る DEPRECATION: を消す

pip 9.0.1 だと、こんな警告メッセージが出る。

$ pip list
DEPRECATION: The default format will switch to columns in the future. You can use --format=(legacy|columns) (or define a format=(legacy|columns) in your pip.conf under the [list] section) to disable this warning.
pip (9.0.1)
setuptools (28.8.0)

Google 翻訳だとこう訳される。まぁ、そのまま読んでも意味は通じる。

除外:デフォルトの形式は将来の列に切り替わります。 この警告を無効にするには、--format =(legacy | columns)を使用するか(pip.confの[list]セクションのformat =(legacy | columns)を定義することができます)

なので、やってみる。

$ echo "[list]\nformat=columns" > ~/.pyenv/versions/361_chrome-headless/pip.conf

$ pip list
Package    Version
---------- -------
pip        9.0.1
setuptools 28.8.0

※ pip.confは、pythonインストール場所へ配置。上記はpyenv + pyenv-virtualenv環境の例

メッセージ通りオプションでもいける。

$ pip list --format=legacy
pip (9.0.1)
setuptools (28.8.0)
広告を非表示にする