悦楽舎 © 2002 hoshi
//
top about works others
2020/05/05 (2022/04/06加筆)

blog設置しました(7年ぶり4回目)

SNS時代に個人サイト内blogをなんで復活させたのかとか、記事を快適に書くためにmarkdown-itの改変とかいろいろ

(2022/04/06 2年近く放置したOGP問題を解決したので加筆。Eleventyに移行したので記事の内容は古いです)

便利なMarkdownチートシートは健在

othersを大リニューアルしました！

エアコミケ98に合わせて記事公開するつもりが、公開後もソースをゴリゴリ直してました。

最終的にテンプレートと同じのを自作というありがちな方法で完成したので、文章も再々構築しました。


同人サークル「悦楽舎」代表、及びサイト管理人のhoshi(@hoshi903)です。よろしく(挨拶は基本)

昔のblog……と、最近の悦楽舎Web

  • [2002年頃]CGIの日記: 普通の日記、毎日書くことがなくなり放置
  • [2005年頃]はてなダイアリー: ネットで見つけた記事にコメント付けて紹介するやつ(流行ってた)、飽きて放置
  • [2009年頃]巨大CGI(別鯖): 作品情報(ニコニコ動画)だったり技術的なのも書き留めたりしてた、鯖が不安定で更新不可になり放置

と、blogっぽいものは昔置いてました。


blog(日記)はメモ帳にHTML手打ちで乗り切れないコンテンツで、何かを利用する必要(と更新し続ける気力が必要)で、外部サービスを使っても面倒な感じになった(し、遷移したらそこはもう個人サイトじゃないよね)(とか、今も容量50MBでxreaに巨大CGI設置不可とか)という感じです。


当時、何故そんな厄介なものを設置していたのか……CGIの掲示板やチャットなど誰も使っていなくても一通りセットであるのが昔の個人Webサイトで……（遠い目


で、jQueryだのレスポンシブだのの時期が来て、サイト自体を「個人サイト & 悦楽舎」から作品情報中心の「悦楽舎Web」にリニューアルしました(2012年頃)(旧コンテンツは全部無かったことに)


そして最近、10周年記念タオルや、GB向け自作ソフト「ココちゃんGB」、GCゲーム「風タク」のModなど、音楽以外のモノを置く場所に悩みました。

サークル活動やCD情報に特化しすぎて、解説が必要だったりファイルを公開する場所が無いんですね！(今更)

othersこと4代目blog設置の目的/目標

  • 慣れている(&自分が気に入っている)今のデザインのまま「悦楽舎Web & 個人サイト」に寄せる
  • 3DCGや自作ソフトやModやゲームができたとき、その解説や関連ファイル公開をする
  • 技術的なメモ(Medium、note、Qiitaなどのサービスの自分用)(特別な機能もないしぶっちゃけblogや自作でいいよね)


サイト全体としても

  • 外部の各種サービス終了に備えてサイトに作品群の再集結(安定の時代逆行ムーブ)
  • xreaレンタルサーバーを使い続けられる(node.js導入は現実的じゃないらしくてつらい)


ついでに、管理人個人は

  • ええ加減素のjavascript以外のモノも覚えて使う
  • 文章を書く能力を上げる(特に速度、修正回数が多い)
  • アイドルの一番星
  • 雀豪


告知で時々twitterへのリンク、曲の試聴はbandcampの埋め込みと、その辺のサービスが終わったら微妙にやべーなとか、せっかくWeb開いてくれてるのにtwitterに誘導すんのはどうなん？とかぼんやり考えてます。twitterにはろくなこと書いてないし


個人サイトに拘るのは、情報はなるべく簡潔で一箇所にまとまっていたほうが嬉しいだろうというのと、過去に日記やイラストの毎日更新を挫折した自分は現代のSNS PRバトルに繰り出して毎日アウトプットし続けるのは天地がひっくり返っても無理かな、と

毎日動画投稿とか何人体制なんでしょうね、自慢じゃないですが15秒3本立てのアニメMAD作るのにそれぞれ30分+3時間+2日かかりました

あと、このサイト自体がずっと技術実験場なので何か作る時の題材としてちょうどいいとか(今回のも)

構築

Vue.jsでのblogの作り方を調べると公式の構築例があります。

前述の通り、外部サービスを使うと面倒が押し寄せてきた経験や、(昔の)xreaを信仰しているのでButterCMSは嫌です(我儘)


とりあえず、VueとMarkdownのスターターキットが見つかり、Nuxtは静的ファイルの生成が出来るので最初(blog設置直後)はコレの魔改造版が動いていました（


公開後、色々弄ってNuxtがなんとなくわか(り、息抜きの麻雀でボロ負けして雀豪は到底無理と悟)ったので、1からNuxtとmarkdown-itで動くblogを自作する方向に一気に進みました。

結局今どんな感じで動いてるのか

記事一覧コンポーネント、記事へのルーティング、Markdownからの記事生成コンポーネントだけ作ってサクッとできました。


依存関係もこんな感じ

package.json
{ // 中略
  "dependencies": {
    "frontmatter-markdown-loader": "^3.4.2",
    "highlight.js": "^10.0.2",
    "markdown-it": "^10.0.0",
    "nuxt": "^2.12.2"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2"
  }
}

Webにありがちな新たなる小手先の技術が一切登場せずシンプルなものがシンプルなままストレートに完成して感動すら覚えます……

もしかしたらNuxtを選択すべきじゃないアレかもしれないが応用から始めて基本を学ぶ全飛ばし逆走学習法なので容赦してほしい


因みにothersのファイル群は新たに借りた容量20倍(1GBまで)のhoshi.s1007.xrea.comに置いてます。

容量50MBでMP3も置けない！みたいな持ちネタを散々披露してきましたが、今2MBくらいなのでサイト全体をNuxtにしても全然いけます（

【おまけ】Netlify

スターターキットに出てきたNetlifyが気になってました。

静的サイトホスティングサービスで、連携したGitHubリポジトリにPushがあれば自動でビルドしてdeployしてくれるすごいヤツです。

手順は割愛して試した結果です。( github.com/hoshi903/lf_test -> 903.netlify.app )


「NuxtでビルドしてFFFTP開いてファイル選んでアップロード」する必要がなく「git push」して待っていれば変わってる！という経験はとても素晴らしくみなさまにも一度お試しいただきたく（ｒｙ

独自ドメインが使えて証明書も発行してくれたりといい感じですが、自分が乗り換えてないのは開いた時にちょっと遅いので……(特にサイズの大きいwebフォント)


比較対象がクソ早いxreaで(&サイト表示1秒未満を心がけてるクソ管理人で)なければ即採用です！おすすめです！たぶん

後記

最初はJavaScriptにファイル構造というのがそれなりに謎で、そこからジェネレーションギャップを埋めつつ進めて普通のバックエンド開発になったのかなという理解になりました。やっぱりJavaScriptはJavaの亜種になったのかな（

とりあえず、微妙に余ってたサブドメインも有効利用したし(hoshi.903.ch)、デザインもちゃんと共通にできたし、構築はだいたい目標通りです。


これ以降も、自作ソフトやModの記事、エアコミケ98やVket4の告知の詳細、画像がたくさんあるページ(?)などを追加していくと思います。

必要そうな感じになってきたらタグ機能とか一覧のソート機能とか追加します。


ではでは(〆の死語)


……ここで記事が終われていればどんなに良かったことか、続きます。(初版5/5→追記5/11、5/12、12/20)


【追記】aタグをいい感じにする

Webにありがちな小手先の技術、続々登場です！！(ブチ切れ)

Markdown-it v10.0.0 で aタグに target="_blank" rel="noopener" が付くように改変します。

/markdown-it/lib/rules_inline/link.js 137行目
// この行を
token.attrs  = attrs = [ [ 'href', href ] ];

// 書き換える
token.attrs  = attrs = [ [ 'href', href ], [ 'target', '_blank' ], [ 'rel', 'noopener' ] ];

付録のチートシートにリンクの使い分け方を載せておきます(同じタブで開きたい時はaやn-linkタグを書く)

/markdown-it/lib/rules_inline/image.js 140行目
// この行を
token.attrs    = attrs = [ [ 'src', href ], [ 'alt', '' ] ];

// 書き換える
token.attrs    = attrs = [ [ 'src', (適当なbase64ダミー) ], [ 'data-src', href ], [ 'alt', '' ], [ 'class', 'lazyload' ] ];

応用してimgタグはlazysizesの基本形にしました。


周辺のjsファイルもHTMLタグに結びついた似たようなソースコードっぽいです。

改変するならいくつやっても同じなんで他のタグもカスタマイズしてキミだけの最強のmarkdown-itを作ろう！（


(22年4月追記) 今はeleventy-plugin-external-linksとeleventy-plugin-lazyimages使ってます。

【追記】コードにファイル名を付けていい感じにする

さっきから黒いエリアに付いてる白いラベルです。これもMarkdown-itを改変します。

/markdown-it/lib/renderer.js の default_rules.fence の中身
// fileNameを保持出来るように改変する
var fileName = '';

if (info) {
  langName = info.split(":")[0];
  fileName = info.split(":")[1];
}
同上 if (info) {} のほうのreturn
// returnは
return  '<pre><code' + slf.renderAttrs(tmpToken) + '>'
      + highlighted
      + '</code></pre>\n';

// 三項演算子でなんだかなあという形にする
return  fileName ?
      '<pre><div><small>' + fileName+ '</small></div><code' + slf.renderAttrs(tmpToken) + '>'
      + highlighted
      + '</code></pre>\n':
      '<pre><code' + slf.renderAttrs(tmpToken) + '>'
      + highlighted
      + '</code></pre>\n';

あとは適当にCSSをキメてヨシ！

githubにnode_modulesは上げないのでNetlifyで楽々更新とか出来なくなってしまった


(22年4月追記) ハイライトはprism.jsに、ラベル出すのはeleventyのaddPairedShortcodeを使うようにしました。

【追記】hタグをいい感じにする

長い記事を書いていてページ内ジャンプが欲しくなったので追加します。

/markdown-it/lib/rules_block/heading.js 42行目
// この行を挿入
if(level < 4){
  token          = state.push('paragraph_open', 'p', 1);
  token.attrs    = [ [ 'id', state.src.slice(pos, max).replace(/<("[^"]*"|'[^']*'|[^'">])*>|\s+/g,'') ] ];
  token.map      = [ startLine, state.line ];

  token          = state.push('paragraph_close', 'p', -1);
}

hタグにid付spanタグが一緒に追加されるようになったので、後はaタグでジャンプ


/markdown-it/lib/rules_block/hr.js 41行目
token.attrs    = [ [ 'noshade', '' ] ];

【追記】ページ遷移をいい感じにする

ふわっと消えるとかそういう微妙な効果を入れるんじゃなくて、nuxt-linkタグで記事から記事へ飛んだ時にスクロール位置が記憶されてる(記事の途中から表示してしまう)やつを修正します


Nuxt(2.7以上?)はpageTransitionが勝手に効くので利用します


nuxtタグをtransitionタグで囲う

Layouts/***.vue
<transition name="page">
  <nuxt/>
</transition>

CSSでアニメーションの始点の効果だけ設定

CSS
.page-enter { display: none;} /* Scroll位置対策 */

こうしておけば記事のDOMが消えてから再描画されるのでスクロール位置も吹き飛びます。

怒りにまかせてかなり乱暴な書き方したけど意外と大丈夫だった(検証漏れあるかも)


【追記】アニメーションをいい感じにする

Vueのtransitionタグは死んだ、もう動かない


例: タイトルの右スライド書き直し

HTML
<!-- 在りし頃のtransitionタグ -->
<transition name="right-fade">
  <div v-show="showOther" class="big">
    <span><i class="fa fa-fw fa-pencil"></i>others.</span>
  </div>
</transition>

<!-- Nuxtで諦めた版 -->
<div class="big anime right-fade">
  <span><i class="fa fa-fw fa-pencil"></i>others.</span>
</div>
CSS
/* 在りし頃のtransitionタグ用CSS */
.right-fade-enter-active { transition: all .5s ease .15s;}
.right-fade-enter { transform: translateX(-30px);}

/* Nuxtで諦めた版 */
.anime.right-fade {
  animation: rightslide .5s ease .15s backwards;
}
keyframesはそのまま
@keyframes rightslide {
  0% {transform: translateX(-30px); }
  100% {transform: translateX(0px); }
}


【追記】OGPをいい感じにする(2年越しで)

ルーティングがこんなにも簡単にできるなんて、ﾜﾀｸｼとても感動いたしましたわ。

headタグの中身も変わってて素晴らし...OGP出て来ねぇじゃん、クローラーがjs実行しない...？そうか...


選択肢は3つで、

  1. SSRに作り変える(現状nuxt.config.jsを書き換えるだけで動いた)
  2. クローラーが進化するのを待つ
  3. SPAを維持したままOGP埋め込みする仕組みを自作する(いくつかやってる記事が出てくる)


まだ記事は少ないし個人サイトなので2番です（

クローラーがjsを実行するようになればちゃんとOGPが出るように出来てるはずなので待ちます。


(22年4月追記) EleventyでSSG化して解決しますた。早くなったしファイル数も減って管理しやすい。最高。

無料ホームページスペースXREAの容量って

昔のさ～、s54.xrea.comだから、50MBしかなくてさ～、つら......

えっ

1GB増量は2013年の新サーバー(s600以降)だけじゃなかったの？2017年のマイグレで全アカウント増量されたのか？？いつから容量が50MBしか無いと錯覚していた？？？ここの表記は何？？？？一体どうなｔｔ

　／|＿＿＿＿＿＿＿＿＿ _ _
〈　 To BE CONTINUED…//// |
　＼|￣￣￣￣￣￣￣￣~ ~ ￣


【おまけ】Markdownチートシート

書こうと思った時に忘れてていつもQiitaとかに辿り着いていませんか？俺がそれ


罫線

↓

***
---

ヘッダー

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

文字装飾

太字になるやつ

太字になるやつ

斜体になるやつ

斜体になるやつ

取り消し線が付くやつ

**太字になるやつ**
__太字になるやつ__
*斜体になるやつ*
_斜体になるやつ_
~~取り消し線が付くやつ~~

改行

(HTML書くとそのまま動く)

<br>

文字の色、サイズ変更

昔流行った虹色文字も今はCSS3で楽に書けていいね(全く使わないけど)

薄い文字

クソデカ感情

完全にミジンコ

#FF3C28

<span style="color: #000000; background: -webkit-linear-gradient(0deg, #0000FF, #FF0000, #00FF00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">昔流行った虹色文字も今はCSS3で楽に書けていいね(全く使わないけど)</span>
<font color="lightgray">薄い文字</font>
<big>クソデカ感情</big>
<small>完全にミジンコ</small>
<img src="https://via.placeholder.com/16/FF3C28/FFFFFF/?text=%20" class="inline">`#FF3C28`

リンク

(改変済) そのままでも target="_blank" rel="noopener" が付く状態にしたので、以下のように使い分け

「target="_blank"」の判定も自動になったので使い分けとか考えずMarkdownで書けばおｋ


新しいウィンドウで開く blog内は同じウィンドウで開きます。

同じウィンドウで開く(nuxt-linkによる遷移) SPAじゃないから使えない。

同じウィンドウで開く(属性なしのaタグ)

[新しいウィンドウで開く](/blog/20200505_c98/ "エアコミケ98の記事")
<n-link to="/blog/20200505_c98/">同じウィンドウで開く(nuxt-linkによる遷移)</n-link>
<a href="/blog/20200505_c98/">同じウィンドウで開く(属性なしのaタグ)</a>

折りたたみ

クリックで開く

summary下は空白行必須

<details><summary>クリックで開く</summary>

summary下は空白行必須
</details>

リスト

  • リストを作成するときは頭に+、 -、*のいずれかを付けます
  • インデント(スペース2つ)を入れて続けると段落が付きます
    • 頭につける記号を変えると別のリストとして生成されます
      • おおきくすってせーの
      • あ・え・い・う・え・お
      • あお
  • ｼﾞｬｰﾝ！
+ リストを作成するときは頭に`+`、 `-`、`*`のいずれかを付けます
+ インデント(スペース2つ)を入れて続けると段落が付きます
  - 頭につける記号を変えると別のリストとして生成されます
    * おおきくすってせーの
    + あ・え・い・う・え・お
    - あお
+ ｼﾞｬｰﾝ！

頭に数字がつくほう

  1. ナリタウマレタママブライアン
  2. ライスシャワー
  3. ズガイコツマルダシ
1. ナリタウマレタママブライアン
2. ライスシャワー
3. ズガイコツマルダシ
  1. オーラス東家、35000点
  2. 南家、35000点(1で始めても自動で数字を割り振ってくれます)
1. オーラス東家、35000点
1. 南家、35000点(1で始めても自動で数字を割り振ってくれます)
  1. 数字を途中から
  2. 始めることもできます
57. 数字を途中から
1. 始めることもできます

ソースコード

インライン code


インデント(スペース4つ)

// Some comments
line 1 of code
line 2 of code
line 3 of code


    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

囲う感じのやつ(バッククオートは Shift + @ で出る)

Sample text here...

```
Sample text here...
```

(改変済) ファイル名ラベルを付けることが出来ます。 シンタックスハイライトも可能(highlight.js導入済)

test.js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
``` js:test.js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

引用

引用です

不等号を重ねると入れ子になります

スペースを挟んでても機能します

> 引用です
>> 不等号を重ねると入れ子になります
> > > スペースを挟んでても機能します

テーブル

(たぶん使うときまで後回し)


Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files. 
| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files. 
Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

画像

Markdownで貼ることも出来るが、サイズ調整すらなくて一切融通がきかない

Dojocat

![Dojocat](https://octodex.github.com/images/dojocat.jpg "The Dojocat")

画像に適用されてるCSS
img{
  max-width: 100%;
}

で、Webエンジニアは何かに付けてす～ぐflexboxを使い出す(くらい、CSS3のこれで本当に革命が起きた)(clearfix？知らない子ですね)

3枚の場合

Minion Stormtroopocat Dojocat 
<div class="flex">
  <img src="https://octodex.github.com/images/minion.png" alt="Minion">
  <img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat">
  <img src="https://octodex.github.com/images/dojocat.jpg" alt="Dojocat">
</div>

2枚の場合

Droctocat Spidertocat 
<div class="flex">
  <img src="https://octodex.github.com/images/droctocat.png" alt="Droctocat">
  <img src="https://octodex.github.com/images/spidertocat.png" alt="Spidertocat">
</div>

画像の追加SCSS
div.flex{
  display: flex;

  > img{
    flex : 1 1 auto;
    width: 0%;
  }
}

動画

改めてgif、APNG、mp4(h.264)を比較したがmp4が圧倒的に有利、動画は素直にvideoタグ使うべき

(22年4月追記) コーデックはh.264よりAV1のほうが良い感じ(容量が更に1/3になった、けどiOS対応いつ？)


(自動再生) 

<video src="/img/20200505_blog/hand.mp4" playsinline muted autoplay loop></video>

(手動再生) 

<video src="/img/20200505_blog/hand.mp4" playsinline muted controls loop preload="auto"></video>

(以上、無音mp4。59frames、99KB)

gifアニメ、59frames、603KB 
<img src="/img/20200505_blog/hand.gif">
APNG、59frames、2.8MB 
<img src="/img/20200505_blog/hand.png">


Markdownだけで記事が全部書ける......そんなふうに考えていた時期が俺にもありました


Back to others