Github Pages をお名前.comで取得した独自ドメインに変更しました
ゴール
お名前.comとDozensというサービスを利用して簡単に username.github.io を fascinatedwithtofu.com に変更しました。
やったことをざっとメモします。
独自ドメインの取得（ドメインレジストラの選定）
いくつか検討しました。 要件は以下です。
.com.netといったメジャーかつWhois代行が無料でできるドメイン（cf:.orgは不可）- 2年目以降で契約更新しても大きく金額が変わらないドメイン（cf:
.site.xyzなどといった格安な新gTLDドメインも2年目から2,980円/年だったりと落とし穴あり、後述） - ネット上で使っている人や情報が多い（これ何気に重要）
【ライブレポート】勝井祐二 x U-zhaan x 石若駿 @ 下北沢440 2017/01/08
新年ライブ始め 2017/01/08＠440
結論から言うと、とても良かった。またこの組み合わせを観たいし、来月や再来月の回も行きたい。
このライブは、440 にて勝井氏と U-zhaan 氏が毎月ランチライブと称して演奏している場に、ゲストとしてジャズファンであれば知らない人はいないであろう若手ドラマーの雄、石若氏が参加したというスタイル。
私は Rovo や石若氏の演奏は幾度か観てきたものの、U-zhaan の演奏は動画を少し予習した程度で初めてだったが、タブラという楽器の懐の広さに驚いた。
一曲目がはじまってすぐ、この三人の役割をトリオに当てはめて、
・バイオリンがメロディ
・ドラマーはもちろんリズム
・タブラは音階もあるようだし音域的にもベースのようなものか？
と甘く推測していたが、1曲めの中盤あたりからずっと裏切られていた。
全体的に、タブラが場のスピード感、緊張感、停滞感、場面転換などなどを指揮している役割に見えた。同じ太鼓族である石若氏が隙間をすっと入ってくる。
勝井氏は2人をバックに自由に乗る人といった印象。シンプルで楽しいリフを重ねていく。およそワンコード（ワンモード）の世界のなかで、２−３音のリフを作っているだけといえば単調になりそうなものだが、ディストーションをかけたりドラム＆タブラのリズムパターンが無限の広がりを見せてくれるおかげでまったく飽きない。比較的自由に見える一方で、リズムチェンジやキメのタイミングではリードする側となり気迫ある場面も幾度か。
エレキバイオリンが二胡のような大陸を感じさせる音が全体的に気持ちよかった。（無印良品のような音といえば伝わるかな）中盤のループを多用した曲ではオーケストラさながらの広がりもありこれまた目を瞑って大陸感に浸った。
Rovo x System 7 の時のようなデジタルで計算しつくされたダンスホールのための世界ではなく、大らかに場の空気を織り上げていくような感じで、小さな箱で聴くのに適したものだった。
リズムパターンとしては、基本3+3+2のような8ビートが根底にある中で、強打の4分音符からの展開や緩急を楽しめた。
11拍子のくだりは高度な処理すぎてついていけなかったが、付いていこうと頑張る石若氏が圧倒的に爽やか。U-zhaan氏の解説によると8+8+6とのことだが速すぎてまったくわからなかった。そのやりとりのあとの曲はタブラ始まりからハイハットが重なるが完全にユニゾンとなっており、引きずってるなぁと思ったが、すーっと溶け込んだのはやはりうますぎた。
アンコールでは4ビートに聴こえなくもない場面もあり、リラックスした石若氏の表情が印象的だった。
ちなみに、MCで宣伝されてた石若氏のファーストアルバム Songbook は500枚プレスしたものがすでに売り切れで、実店舗だと新宿・渋谷のタワレコに次プレスが入ってくるらしい。
あと、次回U-zhaan氏が出演するランチライブは3月で（2月はタブラHunting in Indiaのため欠席）、なんとASA-CHANGと共演することが確定。元巡礼メンバーと現役のASA-CHANGとの新しいケミストリーが観られるのはファンとしても嬉しいだろう。ドラムセットは不要とのこと。
どこかに当日の動画落ちてないかなと探したところ、同じく440で、Dr. 千住氏でシンセ入り編成のものがあったので雰囲気だけそうぞ。
hexo に google adsense 設置&バナー編集
Hexo のレイアウトを変えたりしました。
かっこいいな…! と思っていたテンプレートをうまく自分好みにカスタムする能力がなかったため、Landscape ベースで ejs ファイルを見よう見まねで編集しました。
google adsense バナー直下編
本当に置きたい場所に貼るだけなんだということに衝撃を受けました。
Google adsense の申請は完了している前提となります。
以下の2つを参考にさせていただきました。
【Hexo】Hexo环境下设置Google Adsense
HexoにGoogle Adsenseをセットアップする
step1
わかりやすくするためにアドセンスのコードを貼り付けるファイルを_custom_adというディレクトリ配下に置きます。
＊以下すべて hogehoge = テーマ名です。mkdir theme/hogehoge/layout/_custome_ad
この中に、Google adsense の管理画面で生成したコードをそのまま貼り付けます。vi themes/hogehoge/layout/_custom_ad/google_adsense.ejs
|
1
2
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
(以下略)
|
step2
以下の三行を広告を載せたい場所にコピペします。
トップページに置く場合、vi themes/hogehoge/layout/layout.ejs
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<%- partial('_partial/head') %>
<body>
<div id="container">
<div id="wrap">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<!-- ad start -->
<!-- ad end -->
<div class="outer">
<section id="main"><%- body %></section>
<% } %>
</div>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
</div>
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
<%- partial('_partial/after-footer') %>
</div>
</body>
</html>
|
これで完了です。
google adsense 任意の場所編
そうすると、広告がトップのバナー直下に出ます。
さすがに Hexo のようなシンプルなブログを選んだのに広告がバナー下に出るのはおかしいだろうと思い、右カラムに表示します。
step1
themes/hogehoge/layout/_widget 配下に新たに ejs を置きます。vi themes/landscape/layout/_widget/sponsor.ejs
|
1
2
3
4
5
6
7
8
9
10
|
<% if (site.posts.length){ %>
<div class="widget-wrap">
<div class="widget">
<!-- ad start -->
<!-- ad end -->
</div>
</div>
<% } %>
|
step2
ウィジェットの項目に sponsor を追加します。vi themes/hogehoge/_config.yml
|
1
2
3
4
5
6
7
8
9
10
11
|
(省略)
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
- links
- sponsor
（省略）
|
完了です。
あとは、ejs ファイルにこの三行を貼ると、だいたい思った場所に広告が乗ります（テキトーですみません）。
バナーの宇宙的画像を変更する
美しい画像ですが、ちょっと変更してみます。Landscape-plus というサイトを参考にして、背景の色とタイトルバックの色をそれぞれ指定することにしました。
https://github.com/xiangming/landscape-plus
step1
画像指定をコメントアウト
vi themes/hogehoge/source/css/_partial/header.styl
|
1
2
3
4
5
6
7
8
9
10
11
|
（省略）
// background: url(banner-url) center #000
background:
（省略）
（省略）
background:
padding: 5px 10px // 間隔
（省略）
|
ちなみにここで banner-url となっている画像の元ネタは、下記にありますので、この画像を差し替えるとバナー画像が変えられます。 vi themes/landscape-plus/source/css/_variables.styl
|
1
2
3
|
（省略）
banner-url = "images/banner.jpg"
（省略）
|
編集を反映させるときの Tips
画像周りを変更すると、hexo gen -d した後の反映が遅いです。
試したこと1
rm db.json
参考
Hexoで記事生成時に消したはずの情報で生成される
ー＞しばらく待つものの反映されず・・・
試したこと2
hexo clean
Hexo commands
Cleans the cache file (db.json) and generated files (public).
とのこと。こちらはうまく反映されました。めでたし
Cloudup が便利そう
Cloudup というサービスが便利そう
Markdown にも慣れない今日このごろですが、Hexo で画像をスムーズに貼るにはどうしたらいいのか考えていて、この記事を参考にさせていただき Cloudup を利用しはじめました。
キャプチャを貼りたいなと思う場面で一番直感的だと思ったからです。
ざっくりと使用感ご紹介
サインアップ
Cloudup へいってサインアップします。設定することは特にないです。
ログイン後
こんな画面が最初に待ち構えています。
アップロード
ここにアップしたい画像をドラッグアンドドロップするか、クリップボードにコピーしてある場合はペーストをすると即座にアップロードが始まります。
直リンク取得
右上の MORE > DIRECT URL をクリックすると、画像への .png リンクが得られますし、そのままの URL バーのアドレスもそのままシェアできます。
Markdown ですと下のような記述で完了です。
デスクトップアプリの利用
ブラウザだけでなくデスクトップアプリを入れると、トップのメニューバーに Cloudup が常駐して、Paste your clipboard を選択すると即座にアップロードされます
デメリット
Github 上で完結させたい場合は、違う方法がいいという意見もあるようです。Markdownで画像を表示する · GitHub
その他
Wordpress.com の親会社というものがあることすら知りませんでしたが、Automattic 社が Cloudup を買収していたようです。
Automatticがファイル共有サービスCloudupを買収, WordPressに共同編集機能が加わる | TechCrunch Japan
よくわからないけどすごく楽しそうな Cloudup 公式 Youtube
サービスが継続するといいですね。
ちなみに類似サービスで Cloudapp なるものがあるようです。Mac 版デスクトップアプリの見た目も非常に近いです。
