Baldanders.info
tag:Baldanders.info,2020-08-09:/
2024-03-16T23:41:38+00:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Public Domain Locked...
tag:Baldanders.info,2020-08-09:/public-domain-locked/
2020-08-09T02:19:22+00:00
2023-01-22T02:42:26+00:00
2018年の著作権法改正により著作物等の保護期間が一律70年に延長されたのを記念バナーを作成しました。
Spiegel
/profile/
<p>2018年の著作権法改正により著作物等の保護期間が一律70年に延長されたのを記念(?)して “Public Domain Locked” バナーを作成しました。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./Locked-500.png"><img src="./Locked-500.png" srcset="./Locked-500.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="" loading="lazy"></a></figure>
<p>各種サイズを揃えてますので,好みのものをご利用ください。</p>
<table>
<thead>
<tr>
<th style="text-align:right">幅(px)</th>
<th>画像ファイル</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">500</td>
<td><a href="./Locked-500.png"><code>Locked-500.png</code></a></td>
</tr>
<tr>
<td style="text-align:right">400</td>
<td><a href="./Locked-400.png"><code>Locked-400.png</code></a></td>
</tr>
<tr>
<td style="text-align:right">300</td>
<td><a href="./Locked-300.png"><code>Locked-300.png</code></a></td>
</tr>
<tr>
<td style="text-align:right">200</td>
<td><a href="./Locked-200.png"><code>Locked-200.png</code></a></td>
</tr>
<tr>
<td style="text-align:right">150</td>
<td><a href="./Locked-150.png"><code>Locked-150.png</code></a></td>
</tr>
</tbody>
</table>
<p>また錠アイコンの画像(<a href="./padlock.png"><code>padlock.png</code></a> 1,024×1,024)も別途用意しています。</p>
<p>これらの画像データは <a href="https://creativecommons.org/publicdomain/zero/1.0/" title="Creative Commons — CC0 1.0 Universal">Creative Commons Zero 1.0</a> の下に公開しています。
複製・改変・再配布など自由に利用できます。
著作(権)者のクレジット表記も不要です。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li>
<p><a href="https://www.aozora.gr.jp/shiryo_pdlocked.html">青空文庫 著作権保護期間延長になった作家名一覧</a></p>
</li>
<li>
<p><a href="https://www.aozora.gr.jp/soramoyou/soramoyou2018.html#000500">これからの20年に向けて</a></p>
</li>
<li>
<p><a href="https://www.aozora.gr.jp/soramoyou/soramoyou2019.html#000507">20年先の種を蒔く――真実は時の娘</a></p>
</li>
<li>
<p><a href="https://creativecommons.org/2018/12/05/join-us-for-a-grand-re-opening-of-the-public-domain/">Join us for A Grand Re-Opening of the Public Domain - Creative Commons</a></p>
</li>
<li>
<p><a href="http://blog.archive.org/2018/12/05/join-us-for-a-grand-re-opening-of-the-public-domain-january-25-2019/">Join us for A Grand Re-Opening of the Public Domain | Internet Archive Blogs</a></p>
</li>
<li>
<p><a href="http://d.hatena.ne.jp/yomoyomo/20181210/reopeningpublicdomain">アメリカにパブリックドメインが帰ってくることを祝してインターネット・アーカイブに寄付した - YAMDAS現更新履歴</a></p>
</li>
<li>
<p><a href="https://current.ndl.go.jp/car/170536">カナダ、著作権法改正により著作権保護期間が著作権者の死後50年から70年に延長 | カレントアウェアネス・ポータル</a></p>
<ul>
<li><a href="https://p2ptk.org/copyright/4286">米国:著作権保護期間延長の流れは止まるも、脅威にさらされ続けるパブリックドメイン | p2ptk[.]org</a></li>
</ul>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2019/01/public-domain-material/">2019年 公有化に関する2つの話題</a></p>
</li>
<li>
<p><a href="https://baldanders.info/noextension/">「著作権の保護期間延長に反対します」に関するブックマーク</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info//cc-licenses/">改訂3版: CC Licenses について</a></p>
</li>
</ul>
「著作権の保護期間延長に反対します」に関するブックマーク
tag:Baldanders.info,2019-07-07:/noextension/
2019-07-07T02:32:48+00:00
2019-11-04T01:56:21+00:00
これ以上の「表現の独占」を食い止めるためにも,これまで掲載した記事や関連するリンクをブックマークとしてまとめておく。
Spiegel
/profile/
<figure style='margin:0 auto;text-align:center;'><a href="https://baldanders.info/noextension/"><img src="https://baldanders.info/images/noextension.png" srcset="https://baldanders.info/images/noextension.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="著作権の保護期間延長に反対します" loading="lazy"></a><figcaption><div><a href="https://baldanders.info/noextension/">著作権の保護期間延長に反対します</a></div></figcaption>
</figure>
<p>2018年の著作権法改正により著作物等の保護期間が一律70年に延長された。</p>
<figure style='margin:0 auto;text-align:center;'>
<table>
<thead><tr>
<th colspan="2">種類</th>
<th>改正前</th>
<th>改正後</th>
</tr></thead>
<tbody style="text-align:left;">
<tr>
<td rowspan="4">著作物</td>
<td>原則</td>
<td>著作者の死後50年</td>
<td>著作者の死後70年</td>
</tr>
<tr>
<td>無名・変名</td>
<td>公表後50年</td>
<td>公表後70年</td>
</tr>
<tr>
<td>団体名義</td>
<td>公表後50年</td>
<td>公表後70年</td>
</tr>
<tr>
<td>映画</td>
<td>公表後70年</td>
<td>公表後70年</td>
</tr>
<tr>
<td colspan="2">実演</td>
<td>実演が行われた後50年</td>
<td>実演が行われた後70年</td>
</tr>
<tr>
<td colspan="2">レコード</td>
<td>レコードの発行後50年</td>
<td>レコードの発行後70年</td>
</tr>
</tbody>
</table>
<figcaption><div><a href="http://www.bunka.go.jp/seisaku/chosakuken/hokaisei/kantaiheiyo_hokaisei/pdf/r1408266_01.pdf">環太平洋パートナーシップ協定の締結及び環太平洋パートナーシップに関する包括的及び先進的な協定の締結に伴う関係法律の整備に関する法律の概要(著作権法関係)</a></div></figcaption>
</figure>
<p>これまで <a href="https://baldanders.info/">Baldanders.info</a> では「著作権の保護期間延長に反対します」キャンペーンに参加してきた。
残念な結果ではあるが,これ以上の「表現の独占」を食い止めるためにも,これまで掲載した記事や関連するリンクをブックマークとしてまとめておく。</p>
<h2 id="著作権の保護期間延長に反対しますに関するブックマーク">「著作権の保護期間延長に反対します」に関するブックマーク</h2>
<ul>
<li>
<p><a href="https://www.jstage.jst.go.jp/article/johokanri/53/3/53_3_131/_article/-char/ja/">グーグル・ブック・サーチ,あるいはバベルの図書館 新しいぶどう酒は新しい革袋に</a></p>
</li>
<li>
<p><a href="https://baldanders.info/blog/000802/">改めて著作権保護期間の延長に反対する</a></p>
</li>
<li>
<p><a href="https://baldanders.info/blog/000309/">「日本文化は、なぜブームで終わるのか」</a></p>
</li>
<li>
<p><a href="https://baldanders.info/blog/000820/">Stop Fast Track TPP</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2018/11/copyright-law-is-revised/">年末年始に施行される改正著作権法に関する覚え書き</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2019/01/public-domain-material/">2019年 公有化に関する2つの話題</a></p>
</li>
</ul>
<h3 id="新しい葡萄酒cr0は独占を望まない">「新しい葡萄酒<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>」は独占を望まない</h3>
<p>(「<a href="https://text.baldanders.info/cc-licenses/01-copyright/">著作権と著作権法 — 改訂3版: CC Licenses について</a>」より抜粋)</p>
<p>著作権の起源は「出版特許」にあると言われている。
時の為政者から出版ギルドへ出版特許を「下賜」することにより,書籍流通の安定と統制を確保しようとしたらしい。
つまり著作権のもとになったものは,著作者のためではなく,もちろん読者(ユーザ)のためなんかではなく,ひたすら出版者の特権として生み出されたものなのである。</p>
<p>それから紆余曲折があって現在の著作権に近いかたちに整備されてきた。
現代の著作権の枠組みは1886年にできた「ベルヌ条約」がベースになっている。
かつての出版特許との違いは,著作権が,著作者と出版社,著作者と著作者,出版社と出版社,の間のパワーバランスを図る手段として機能していることである。</p>
<p>ただ,この時点でもまだユーザは創作・出版のプレイヤーではなかった。
というか,割と最近までユーザは著作権システムの埒外であった。
これが数十年前くらいから変わってきた。</p>
<p>変化のひとつは,プログラムコードを「著作物」として含めたことにより著者とユーザの区別が曖昧になり,著作物であるプログラム・コードを巡る「独占 vs 自由」の抗争が本格化してきたこと。
もうひとつは情報の符号化とそのことによる複製コストの劇的低下により既存の出版・流通による独占が意味を失いつつあること,である。
前者は FLOSS(Free/Libre and Open Source Software)というかたちでコンピュータ・ソフトウェア産業に大規模な構造変革をもたらし,発展を加速させている。
後者は現在進行形で,既存の出版・流通チャネルはこの変化に対して必死に抵抗を試みている<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<p>こうした変化により著作者と出版社(者)とユーザの区別は曖昧になりつつある。
しかし,著作権の枠組みは19世紀から殆ど変わっておらず,一連の「大変化」に適合できてない。</p>
<p>著作者や出版社にとっての著作権システムとは,著作物の「独占」状態を如何にコントロールするかであった。
しかし,ユーザの場合は行動原理が異なる。
それはひとことで言うなら「共有」である。
何故ならユーザはコミュニケーションの手段(メディア)として著作物(=表現)を利用するからだ。</p>
<h3 id="参考図書">参考図書</h3>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/4757102852?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41YkbcP5IyL._SL160_.jpg" width="108" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/4757102852?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">著作権2.0 ウェブ時代の文化発展をめざして (NTT出版ライブラリー―レゾナント)</a></dt>
<dd>名和 小太郎 (著)</dd>
<dd>NTT出版 2010-06-24</dd>
<dd>単行本(ソフトカバー)</dd>
<dd>4757102852 (ASIN), 9784757102859 (EAN), 4757102852 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">名著です。今すぐ買うべきです。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-11-13">2018-11-13</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/4622073455?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41bepOIquwL._SL160_.jpg" width="111" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/4622073455?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">〈海賊版〉の思想‐18世紀英国の永久コピーライト闘争</a></dt>
<dd>山田 奨治 (著)</dd>
<dd>みすず書房 2007-12-20</dd>
<dd>単行本</dd>
<dd>4622073455 (ASIN), 9784622073451 (EAN), 4622073455 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">「コピーライト永久独占を目論む大書店主に挑む〈海賊出版者〉ドナルドソンの肖像。法廷闘争を軸に著作権を史的に考察する。」(帯文より)</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-11-13">2018-11-13</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/B00SM7G6SI?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41ZC-Qu61LL._SL160_.jpg" width="98" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/B00SM7G6SI?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">18歳の著作権入門 (ちくまプリマー新書)</a></dt>
<dd>福井健策 (著)</dd>
<dd>筑摩書房 2015-01-10 (Release 2015-01-30)</dd>
<dd>Kindle版</dd>
<dd>B00SM7G6SI (ASIN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">福井健策弁護士による「<a href="http://japan.cnet.com/sp/copyright_study/">18歳からの著作権入門</a>」の書籍化。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-11-13">2018-11-13</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/4756117074?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/5131GA04AHL._SL160_.jpg" width="108" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/4756117074?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">本の未来 (Ascii books)</a></dt>
<dd>富田 倫生 (著)</dd>
<dd>アスキー 1997-02-01</dd>
<dd>単行本</dd>
<dd>4756117074 (ASIN), 9784756117076 (EAN), 4756117074 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">e-book の未来を予見する試みの書。あるいは本とコンピュータの関係について。<a href="https://www.aozora.gr.jp/cards/000055/card56499.html">青空文庫にも収録</a>されている。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2019-01-02">2019-01-02</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<h2 id="creative-commons"><a href="https://creativecommons.org/" title="Creative Commons">Creative Commons</a></h2>
<p><a href="https://creativecommons.org/" title="Creative Commons">Creative Commons</a> では知的財産権によるコントロールを意図的に制限し,残りの部分を「コモンズ(共有地)」に置くことによって様々な創造的活動を支援できると考えている。</p>
<p>拙文ながら <a href="https://creativecommons.org/" title="Creative Commons">Creative Commons</a> については以下で紹介している。</p>
<ul>
<li><a href="https://text.baldanders.info/cc-licenses/">改訂3版: CC Licenses について | text.Baldanders.info</a></li>
</ul>
<h3 id="creative-commons-に関する参考図書"><a href="https://creativecommons.org/" title="Creative Commons">Creative Commons</a> に関する参考図書</h3>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/B00DI8TMPU?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51zmlOAOaFL._SL160_.jpg" width="106" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/B00DI8TMPU?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">オープン化する創造の時代 著作権を拡張するクリエイティブ・コモンズの方法論 (カドカワ・ミニッツブック)</a></dt>
<dd>ドミニク・チェン (著)</dd>
<dd>ブックウォーカー 2013-06-25 (Release 2013-06-27)</dd>
<dd>Kindle版</dd>
<dd>B00DI8TMPU (ASIN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description"><a href='https://baldanders.info/blog/000643/'>手軽に読める</a>。お薦め。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-09-13">2014-09-13</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/4845911744?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51pDWTdSdlL._SL160_.jpg" width="115" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/4845911744?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">フリーカルチャーをつくるためのガイドブック クリエイティブ・コモンズによる創造の循環</a></dt>
<dd>ドミニク・チェン (著)</dd>
<dd>フィルムアート社 2012-05-25</dd>
<dd>単行本</dd>
<dd>4845911744 (ASIN), 9784845911745 (EAN), 4845911744 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">国内における Free Culture の事例が豊富。取っ掛かりとしてはちょうどよい本。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2015-05-07">2015-05-07</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/B01DJ5VE0W?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51d5+E9anaL._SL160_.jpg" width="113" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/B01DJ5VE0W?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">FREE CULTURE</a></dt>
<dd>ローレンス・レッシグ (著), 山形浩生 (翻訳), 守岡桜 (翻訳)</dd>
<dd>翔泳社 2004-07-22 (Release 2016-03-28)</dd>
<dd>Kindle版</dd>
<dd>B01DJ5VE0W (ASIN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">Free Culture の原典。白田秀彰さんの「<a href='http://orion.mt.tama.hosei.ac.jp/hideaki/freeannotation.htm'>FREE ANNOTATION</a>」も併せてどうぞ。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-11-17">2018-11-17</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/dp/475710152X?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41WPNBY7HZL._SL160_.jpg" width="110" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/dp/475710152X?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">クリエイティブ・コモンズ―デジタル時代の知的財産権</a></dt>
<dd>レッシグ,ローレンス (著), 敬士, 椙山 (著), 圭介, 上村 (著), 紘一郎, 林 (著), 絵美, 若槻 (著), 大洋, 土屋 (著), クリエイティブコモンズジャパン (編集), Lessig,Lawrence (原著)</dd>
<dd>NTT出版 2005-03-01</dd>
<dd>単行本</dd>
<dd>475710152X (ASIN), 9784757101524 (EAN), 475710152X (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-11-13">2018-11-13</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>「<a href="https://www.jstage.jst.go.jp/article/johokanri/53/3/53_3_131/_article/-char/ja/">グーグル・ブック・サーチ,あるいはバベルの図書館 新しいぶどう酒は新しい革袋に</a>」参照。ちなみに「新しい葡萄酒」というのはマタイ伝第9章17節に出てくる言葉で,(旧いユダヤ教に対する)キリスト教を指す。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>こうした抵抗のひとつが「<a href="https://www.eff.org/issues/copyright-trolls" title="Copyright Trolls | Electronic Frontier Foundation">著作権トロル</a>」といった形で現れているわけだ。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
サイトをリニューアルしました
tag:Baldanders.info,2019-07-04:/announce/site-renewal/
2019-07-04T12:33:37+00:00
2019-07-04T12:36:39+00:00
殆どのコンテンツについては自動的に新 URL にリダイレクトされると思うが,廃棄したページあるので,リンク切れはご容赦のほどを。
Spiegel
/profile/
<p>[Baldanders.info]({rlnk “/” }) 開設15周年を記念して(というわけでもないが)サイトのリニューアルを行うことにした。</p>
<p>具体的にはサイトの管理を <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ベースに再構築している。
これに伴い,各コンテンツを移動している。
主なコンテンツは以下の通り。</p>
<table>
<thead>
<tr>
<th>コンテンツ</th>
<th>リニューアル前</th>
<th>リニューアル後</th>
</tr>
</thead>
<tbody>
<tr>
<td>サイト・ポリシー</td>
<td><code>/policy.shtml</code></td>
<td><a href="https://baldanders.info/site-policy/"><code>/site-policy/</code></a></td>
</tr>
<tr>
<td>公開履歴書</td>
<td><code>/spiegel/profile/</code></td>
<td><a href="https://baldanders.info/profile/"><code>/profile/</code></a></td>
</tr>
<tr>
<td>OpenPGP 公開鍵リスト</td>
<td><code>/spiegel/pubkeys/</code></td>
<td><a href="https://baldanders.info/pubkeys/"><code>/pubkeys/</code></a></td>
</tr>
<tr>
<td>旧メイン・ブログ</td>
<td><code>/spiegel/log2/</code></td>
<td><a href="https://baldanders.info/blog/"><code>/blog/</code></a></td>
</tr>
<tr>
<td>戯れ言++</td>
<td><code>/spiegel/remark/archives/</code></td>
<td><a href="https://baldanders.info/blog/"><code>/blog/</code></a></td>
</tr>
</tbody>
</table>
<p>内容が古すぎて <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> に統合できなかったコンテンツ(<a href="https://baldanders.info/spiegel/log/">日記</a>など)については「<a href="https://baldanders.info/spiegel/">旧コンテンツ置き場</a>」に移動した。
「<a href="https://baldanders.info/spiegel/">旧コンテンツ置き場</a>」以外の殆どのコンテンツについては自動的に新 URL にリダイレクトされると思うが,廃棄したページあるので,リンク切れはご容赦のほどを。</p>
<p>「リンクが切れてて読めないぞ」というページがありましたら<a href="#feedback">フィードバック</a>で指摘していただければ善処します。</p>
<p>問題は Flickr 写真を貼ったページなんだよなぁ。
リンクが切れまくっているが,沢山ありすぎて今更いじる気にならない。
まぁ,気が向いたらチマチマ修正していくことにします。</p>
<h2 id="ゼロから始める-hugoをこちらに移転しました">「ゼロから始める Hugo」をこちらに移転しました</h2>
<p><a href="https://text.baldanders.info/">text.Baldanders.info</a> に掲載していた「ゼロから始める Hugo」をこちらのサイトに移転した。</p>
<ul>
<li><a href="https://baldanders.info/hugo/">ゼロから始める Hugo</a></li>
</ul>
<p>理由は,私が <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> を使うようになってから大幅に機能拡張されており,相対的に記事が古びてしまったため最新情報に追従できなくなったため。
記事を全面的に書き直す気力はないので古い記事は古い記事としてこちらで保管することにした。
なので,基本的にメンテナンスしません。</p>
<p>最新情報については <a href="https://text.baldanders.info/">text.Baldanders.info</a> でフォローしていく予定なので,今後ともよろしく。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="https://baldanders.info/blog/000764/">Baldanders.info 10周年だった!</a></li>
</ul>
JSON 形式で Feed を出力する
tag:Baldanders.info,2019-02-19:/hugo/feed-with-json-format/
2019-02-19T13:54:05+00:00
2019-02-19T13:54:05+00:00
Hugo では JSON 形式のファイルも出力できる。
Spiegel
/profile/
<p>今回も小ネタ。</p>
<p>サイトの feed は RSS や Atom といった XML 形式を使うのが普通だが,他サイトの連携を考えるなら JSON 形式で出力できれば色々と便利そうである。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では JSON 形式のファイルも出力できる。</p>
<h2 id="json-形式のファイルを出力するよう設定する">JSON 形式のファイルを出力するよう設定する。</h2>
<p>まずは JSON 形式のファイルを出力できるよう設定ファイル(<code>config.toml</code> など)に以下の記述を追加する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">outputs</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">home</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"HTML"</span><span class="p">,</span> <span class="s2">"RSS"</span><span class="p">,</span> <span class="s2">"JSON"</span><span class="p">]</span>
</span></span></code></pre></div><p>これでサイトのルートディレクトリに <code>index.html</code>, <code>index.xml</code>, そして <code>index.json</code> ファイルを出力できるようになった。</p>
<h2 id="json-ファイルのテンプレートを作成する">JSON ファイルのテンプレートを作成する</h2>
<p>テンプレートファイルを格納する <code>layouts/</code> フォルダの直下または <code>layouts/_default/</code> フォルダに <code>index.json</code> または <code>home.json</code> ファイルを作成する。
中身は例えばこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{
</span></span><span class="line"><span class="cl"> "title": {{ .Site.Title | jsonify }},
</span></span><span class="line"><span class="cl"> "url": {{ .Permalink | jsonify }},{{ with .OutputFormats.Get "RSS" }}
</span></span><span class="line"><span class="cl"> "feed": {{ .Permalink | jsonify }},{{ end }}
</span></span><span class="line"><span class="cl"> "entry": [{{ range $i, $v := first 3 .Data.Pages }}{{ if ne $i 0 }},{{ end }}{{ with $v }}
</span></span><span class="line"><span class="cl"> {
</span></span><span class="line"><span class="cl"> "title": {{ .Title | jsonify }},{{ with .Section }}
</span></span><span class="line"><span class="cl"> "section": {{ . | jsonify }},{{ end }}{{ with .Description }}
</span></span><span class="line"><span class="cl"> "description": {{ . | jsonify }},{{ end }}
</span></span><span class="line"><span class="cl"> "url": {{ .Permalink | jsonify }},
</span></span><span class="line"><span class="cl"> "published": {{ .Date.UTC.Format "2006-01-02T15:04:05-07:00" | jsonify }},
</span></span><span class="line"><span class="cl"> "update": {{ .Lastmod.UTC.Format "2006-01-02T15:04:05-07:00" | jsonify }}
</span></span><span class="line"><span class="cl"> }{{ end }}{{ end }}
</span></span><span class="line"><span class="cl"> ]
</span></span><span class="line"><span class="cl">}
</span></span></code></pre></div><p>これでコンパイルを行うと以下のような内容で <code>index.json</code> ファイルが出力される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"text.Baldanders.info"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"feed"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/index.xml"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"entry"</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"“Article 13” に関するブックマーク"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"remark"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"英語不得手の私としては難儀していたが,ようやく日本語の記事を見かけるようになった。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/remark/2019/02/bookmarks-for-article-13/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-19T13:04:51+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-19T13:05:49+00:00"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"2019-02-17 のブックマーク"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"bookmarks"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"「火星ローバー「オポチュニティ」ミッション終了、15年の活動に幕」他"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/bookmarks/2019/02/17-bookmarks/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-17T12:25:23+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-17T12:25:48+00:00"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"Hugo で Git 情報を取得する"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"section"</span><span class="p">:</span> <span class="s2">"hugo"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Hugo の環境を git で管理している場合はコミット情報等をテンプレートに組み込むことができる。"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"author"</span><span class="p">:</span> <span class="s2">"Spiegel"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"license"</span><span class="p">:</span> <span class="s2">"https://creativecommons.org/licenses/by-sa/4.0/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://text.baldanders.info/hugo/gitinfo/"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"published"</span><span class="p">:</span> <span class="s2">"2019-02-16T13:15:35+00:00"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"update"</span><span class="p">:</span> <span class="s2">"2019-02-16T13:20:26+00:00"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では出力ファイルについてかなり細かく制御することが出来るが,今回はこのくらいにしておこう(笑) そのうち詳しい記事を書くこともあるかも知れない。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/templates/output-formats/">Custom Output Formats | Hugo</a></li>
<li><a href="https://github.com/hugojapan/hugoDocs">GitHub - hugojapan/hugoDocs: Hugo 日本語ドキュメント</a></li>
</ul>
Hugo で Git 情報を取得する
tag:Baldanders.info,2019-02-16:/hugo/gitinfo/
2019-02-16T13:15:35+00:00
2019-02-16T13:15:35+00:00
Hugo の環境を git で管理している場合はコミット情報等をテンプレートに組み込むことができる。
Spiegel
/profile/
<p><a href="https://baldanders.info/" title="Baldanders.info">本家サイト</a>を改装するにあたって <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の環境を見直している。
この作業でやったことをこのセクションで少しずつ紹介していこうと思う。</p>
<p>今回は <a href="https://git-scm.com/">git</a> との連携の話。</p>
<h2 id="gitinfo">.GitInfo</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の環境を <a href="https://git-scm.com/">git</a> で管理している場合は以下のコミット情報等をテンプレートに組み込むことができる。</p>
<table>
<thead>
<tr>
<th>テンプレート変数</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.GitInfo.AuthorName</code></td>
<td>ユーザ名</td>
</tr>
<tr>
<td><code>.GitInfo.AuthorEmail</code></td>
<td>ユーザのメールアドレス</td>
</tr>
<tr>
<td><code>.GitInfo.AuthorDate</code></td>
<td>コミット時刻</td>
</tr>
<tr>
<td><code>.GitInfo.Hash</code></td>
<td>リビジョン値</td>
</tr>
<tr>
<td><code>.GitInfo.AbbreviatedHash</code></td>
<td>リビジョン値(短縮値)</td>
</tr>
<tr>
<td><code>.GitInfo.Subject</code></td>
<td>コミット・メッセージ</td>
</tr>
</tbody>
</table>
<p><code>.GitInfo</code> を有効にするには <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> コマンド起動時に <code>--enableGitInfo</code> オプションを付加するか設定ファイル(<code>config.toml</code> など)に</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">enableGitInfo</span> <span class="p">=</span> <span class="kc">true</span>
</span></span></code></pre></div><p>と設定すればよい。</p>
<h2 id="ページ更新時刻-lastmod-をコミット時刻にする">ページ更新時刻 .Lastmod をコミット時刻にする</h2>
<p><code>.GitInfo</code> が有効であればページの更新時刻を示すテンプレート変数 <code>.Lastmod</code> の値がコミット時刻になる。</p>
<p>テンプレート変数 <code>.Lastmod</code> は,既定ではページの front matter 内の以下の変数にマッピングされている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">":git"</span><span class="p">,</span> <span class="s2">"lastmod"</span><span class="p">,</span> <span class="s2">"date"</span><span class="p">,</span> <span class="s2">"publishDate"</span><span class="p">]</span>
</span></span></code></pre></div><p>配列の順番がそのまま優先順位になっている。
つまり <code>":git"</code> がコミット時刻 <code>.GitInfo.AuthorDate</code> に対応する。</p>
<p>この設定は設定ファイルで変更可能なので,たとえば <code>.GitInfo</code> を有効にしたいがコミット時刻を更新時刻に使いたくない場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">"lastmod"</span><span class="p">,</span> <span class="s2">"date"</span><span class="p">,</span> <span class="s2">"publishDate"</span><span class="p">]</span>
</span></span></code></pre></div><p>などとしてしまってもよい。</p>
<p>ちなみに入力ファイルのタイムスタンプを更新時刻にする場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">frontmatter</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">lastmod</span> <span class="p">=</span> <span class="p">[</span><span class="s2">":fileModTime"</span><span class="p">]</span>
</span></span></code></pre></div><p>などとする。
まぁ今どきファイルのタイムスタンプを更新時刻にするのはオススメではないが。</p>
Hugo におけるサイト内相互参照
tag:Baldanders.info,2018-08-18:/hugo/cross-references-with-shortcodes/
2018-08-18T05:46:11+00:00
2018-08-18T05:46:11+00:00
Hugo 0.45 から ref/relref の仕様が変わったので紹介する。
Spiegel
/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> ではサイト内の相互参照(リンク)を表現するために組み込み <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes | Hugo">shortcode</a> である <code>ref</code> や <code>relref</code> を使うのだが <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 から <code>ref</code>/<code>relref</code> の仕様が変わったので紹介する。</p>
<p>例えば参照したい記事を <code>content/blog/entry.md</code> とする。
他の記事からこの記事を参照したい場合, <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 より前のバージョンでは</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< ref "blog/entry.md" >}}
</span></span></code></pre></div><p>または</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< relref "blog/entry.md" >}}
</span></span></code></pre></div><p>のように作業環境の <code>content</code> フォルダ以下の相対パスを指定すればよかった。
これにより <code>ref</code> コマンドなら <code>http(s)://site.name/blog/entry/</code> に, <code>relref</code> コマンドなら <code>/blog/entry/</code> に展開されていた。</p>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 からは ビルド後のディレクトリ構成で考える。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< ref "/blog/entry.md" >}}
</span></span></code></pre></div><p>あるいは</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< relref "entry.md" >}}
</span></span></code></pre></div><p>といった感じ(サイトのルート・ディレクトリからの絶対パスを指定する場合 <code>blog/...</code> ではなく <code>/blog/...</code> となる点に注目)。
したがって <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.45 より前の古い表記では warning が発生するので注意が必要である。
また <code>relref</code> コマンドを使う際に絶対パスを指定した場合も warning になる。</p>
<p>なお,このルールはテンプレートにも適用される。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{ with .Site.GetPage "/blog/entry.md" }}{{ .Title }}{{ end }}
</span></span></code></pre></div><p>などとすれば任意の記事の情報を取得できる。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/news/0.45-relnotes/">Hugo 0.45: Revival of ref, relref and GetPage | Hugo</a></li>
<li><a href="https://gohugo.io/content-management/cross-references/">Links and Cross References | Hugo</a></li>
</ul>
Chroma Syntax Highlighting
tag:Baldanders.info,2017-09-25:/hugo/chroma-syntax-highlighting/
2017-09-25T13:57:09+00:00
2017-09-25T13:57:09+00:00
今回のアップデートの目玉は純正 Golang 製の Chroma を組み込んで Syntax Highlight に対応したことだろう。
Spiegel
/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.28 がリリースされた。</p>
<ul>
<li><a href="https://gohugo.io/news/0.28-relnotes/">Hugo | Hugo 0.28: High-speed Syntax Highlighting!</a></li>
</ul>
<p>今回のアップデートの目玉は <a href="https://golang.org/" title="The Go Programming Language">Golang</a> 製の <a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> を組み込んで Syntax Highlight に対応したことだろう。
それまでは <a href="http://pygments.org/">Pygments</a> のようなツールを使うか <a href="https://highlightjs.org/">highlight.js</a> のようなスクリプトを噛ませるかだったのだが,ようやく <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> が自前で用意できるようになった<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>Syntax Highlight の設定方法については<a href="https://gohugo.io/documentation/" title="Hugo | Hugo Documentation">マニュアル</a>の以下のページが参考になる。</p>
<ul>
<li><a href="https://gohugo.io/content-management/syntax-highlighting/">Hugo | Syntax Highlighting</a></li>
</ul>
<h2 id="syntax-highlight-を有効にする">Syntax Highlight を有効にする</h2>
<p><a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> Syntax Highlight を有効にするには設定ファイル(<code>config.toml</code> 等)で以下の項目を有効にすればよい。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="na">pygmentsUseClasses</span> <span class="o">=</span> <span class="s">true</span></span></span></code></pre></div>
<p>さらにハイライト表示の CSS ファイルを用意する。
これは <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> コマンドで生成できる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ hugo gen chromastyles --style=tango > chroma-styles.css
</span></span></code></pre></div><p>指定できる <code>style</code> の詳細は以下が参考になる。</p>
<ul>
<li><a href="https://help.farbox.com/pygments.html">Pygments style gallery!</a></li>
</ul>
<p>もちろん,生成した CSS ファイルは HTML の <code><head></code> 要素内で指定すること。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/chroma-styles.css"</span><span class="p">></span>
</span></span></code></pre></div><h2 id="ハイライト表示">ハイライト表示</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> でハイライトを指定するには以下の <a href="https://gohugo.io/content-management/shortcodes/" title="Hugo | Shortcodes">shortcode</a> を使う。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><p>実際の表示は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>行番号を表示するには以下のように指定する</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go "linenos=inline,linenostart=1" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="ln">7</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>特定の行を強調するには以下のように指定する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go "linenos=inline,linenostart=1,hl_lines=5-7" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line hl"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line hl"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line hl"><span class="ln">7</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>一方,設定ファイルで <code>pygmentsCodeFences</code> を有効にすることで GitHub Flavored Markdown の Syntax Highlight も使えるようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">```go
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>いや,簡易的なものなら以前からあったのだが,吐き出すコードがイマイチで使う気にならなかったんだよねぇ。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
2015年の「よかったこと」
tag:Baldanders.info,2015-12-25:/wreath/2015/
2015-12-24T15:00:00+00:00
2019-06-16T02:50:10+00:00
2015年の「よかったこと」
Spiegel
/profile/
<p>このページは2015年の「<a href="http://www.hyuki.com/ring/">よかった探しリース</a>」に参加したときのコンテンツです。</p>
<ul>
<li>今年もちゃんと私の心臓が動いてくれました。
周囲の助けを借りて何とかやってます。
主治医や家族に感謝します。</li>
<li>今年も美味しい食事と美味しいお酒をいただけました。もうたくさん食べるのは難しいですが,おいしい食事ができることは幸せなことです。
今年は2つの酒蔵のイベントに参加できました。
<ul>
<li><a href="https://baldanders.info/spiegel/log2/000830.shtml">オトナの社会科見学: 盛川酒造株式会社</a></li>
<li><a href="https://baldanders.info/spiegel/log2/000838.shtml">「華鳩」蔵開きバスツアー</a></li>
</ul></li>
<li>後半ちょっと体調を崩しましたが,どうにかこうにか仕事を頂いて食いつないでいます。来年もこのまま仕事が続けられますように。</li>
<li><a href="https://baldanders.info/spiegel/log2/000872.shtml">ブログコンテンツを移転</a>しました。また, <a href="http://qiita.com/">Qiita</a> に参加しました。
現在の主な遊び場は以下のふたつ。
<ul>
<li><a href="https://text.baldanders.info/">text.Baldanders.info</a></li>
<li><a href="http://qiita.com/spiegel-im-spiegel">spiegel-im-spiegel - Qiita</a></li>
</ul>
いやぁ Markdown で記述できるのって楽だわ。
もうもどれないかも(笑)</li>
<li><a href="https://golang.org/">Go 言語</a>の勉強を始めました。
仕事以外で言語に興味を持つなんて久しぶりかも。
ただ,(幸いなことに?)仕事が忙しすぎてあまり捗りませんが。
<a href="https://text.baldanders.info/golang/">Go 言語に関する話題はこちら</a>。</li>
<li><a href="https://baldanders.info/spiegel/log2/000852.shtml">ケータイを新調</a>しました。ケータイとなんちゃらは新しい方がいい?</li>
<li>魔窟化していた仕事場の本の蟻塚を<a href="https://text.baldanders.info/remark/2015/0920-diary/">大方処分</a>しました orz よかったのだろうか。</li>
<li>いやっふー! 広島サンフレッチェ年間王者おめでとう!!</li>
<li>今年も天文関連のイベント盛り沢山でしたね。
<ul>
<li>Lovejoy 彗星(C/2014 Q2)の接近</li>
<li>皆既日食1回,部分日食1回(ただし日本では見れませんした)</li>
<li>皆既月食2回(秋の皆既月食は日本では見れませんした)</li>
<li>7月の Blue Moon</li>
<li>ペルセウス座流星群が好条件</li>
<li>Catalina 彗星(C/2013 US10)の接近</li>
<li>ふたご座流星群が好条件</li>
</ul></li>
<li>12月3日に「はやぶさ2」が無事に地球スウィングバイを行いました。
これから小惑星「リュウグウ」へ向かいます。
順調に行けばリュウグウ到着は2018年頃の予定。
旅の無事を祈ります。<br>
そうそう「はやぶさ2」といっしょに打ち上げられたプロキオン(PROCYON)も<a href="https://www.facebook.com/procyon.spacecraft/posts/1633771820194892">同じ日に地球に再接近</a>するらしいです。</li>
<li>金星探査機「あかつき」が12月7日に金星への軌道投入に再挑戦します。今度はうまくいきますように。</li>
<li>姪っ子が高校に進学しました。なんと私の後輩になったようです。めでたい!</li>
<li>一方,甥っ子は来春に高校卒業ですが就職が決まったようです。一安心。</li>
<li>またひとつ歳をとりました。
なんと! 半世紀も生きちゃいましたよ。
あとどのくらい生きられるのかなぁ。
「おめでとう」をくださった方へ,皆さん本当にありがとう。</li>
<li>最後に,いつも私と遊んでくれる友人達に感謝します。来年もよろしく!</li>
</ul>
<h2>以前の「よかったこと」</h2>
<ul class="cloud">
<li><a href="../2003/">2003年</a></li>
<li><a href="../2004/">2004年</a></li>
<li><a href="../2005/">2005年</a></li>
<li><a href="../2006/">2006年</a></li>
<li><a href="../2007/">2007年</a></li>
<li><a href="../2008/">2008年</a></li>
<li><a href="../2009/">2009年</a></li>
<li><a href="../2010/">2010年</a></li>
<li><a href="../2011/">2011年</a></li>
<li><a href="../2012/">2012年</a></li>
<li><a href="../2013/">2013年</a></li>
<li><a href="../2014/">2014年</a></li>
<ul>
<h2>クリスマス関連アイテム</h2>
<ul>
<li><a href="http://astro.ysc.go.jp/izumo/beture.html">ベツレヘムの星リンク集</a></li>
<li><a href="http://www.aozora.gr.jp/cards/001237/card46346.html">サンタクロースはいるんだ</a> : 1897年9月21日 ニューヨーク・サン紙の社説(<a href="http://www.newseum.org/yesvirginia/">原文</a>)</li>
<li><a href="http://www.noradsanta.org/">NORAD Tracks Santa 2015</a>: <a href="https://twitter.com/NoradSanta" title="Twitter"><i class="fa fa-twitter"></i></a> <a href="https://www.facebook.com/noradsanta" title="Facebook"><i class="fa fa-facebook"></i></a> <a href="http://www.youtube.com/NORADTracksSanta" title="YouTube"><i class="fa fa-youtube"></i></a> <a href="https://plus.google.com/105978913392534030365/posts" title="Google+"><i class="fa fa-google-plus"></i></a></li>
<li><a href="https://santatracker.google.com/">🎄Google Santa Tracker</a></li>
<li><a href="http://qiita.com/advent-calendar/2015/calendars">Advent Calendar 2015 - Qiita</a></li>
</ul>
<figure style='margin:0 auto;text-align:center;'>
<div style="position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe class="youtube-player" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" src="https://www.youtube-nocookie.com/embed/nXLNcfNsWAY" allowfullscreen></iframe>
</div>
<figcaption><div><a href="https://www.youtube.com/watch?v=nXLNcfNsWAY">Reindeer Worries : Google Santa Tracker 2015 - YouTube</a></div></figcaption>
</figure>
<h2>クリスマス関連リンク</h2>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/%E3%83%9C%E3%83%98%E3%83%9F%E3%82%A2%E3%81%AE%E6%A3%AE%E3%81%8B%E3%82%89-%E3%82%A4%E3%83%AB%E3%82%AB/dp/B00005EWJM?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00005EWJM"><img src="https://images-fe.ssl-images-amazon.com/images/I/51%2Bt-3PwozL._SL160_.jpg" width="160" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/%E3%83%9C%E3%83%98%E3%83%9F%E3%82%A2%E3%81%AE%E6%A3%AE%E3%81%8B%E3%82%89-%E3%82%A4%E3%83%AB%E3%82%AB/dp/B00005EWJM?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00005EWJM">ボヘミアの森から</a></dt>
<dd>日本クラウン 1995-11-01</dd>
<dd>Music CD</dd>
<dd>ASIN: B00005EWJM, EAN: 4988007114349</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">年末はこのアルバムを聴きながら過ごします。</p>
<p class="powered-by" >reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-11-09">2014-11-09</abbr> (powered by <a href="https://github.com/spiegel-im-spiegel/amazon-item" >amazon-item</a> 0.2.1)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/%E8%B3%A2%E8%80%85%E3%81%AE%E8%B4%88%E3%82%8A%E7%89%A9-%E3%82%AA%E3%83%BC%E3%83%BB%E3%83%98%E3%83%B3%E3%83%AA%E3%83%BC-ebook/dp/B00AF0YG28?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00AF0YG28"><img src="https://images-fe.ssl-images-amazon.com/images/I/41PD5ldEqTL._SL160_.jpg" width="100" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/%E8%B3%A2%E8%80%85%E3%81%AE%E8%B4%88%E3%82%8A%E7%89%A9-%E3%82%AA%E3%83%BC%E3%83%BB%E3%83%98%E3%83%B3%E3%83%AA%E3%83%BC-ebook/dp/B00AF0YG28?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00AF0YG28">賢者の贈り物</a></dt>
<dd>オー・ヘンリー</dd>
<dd>結城浩 (翻訳)</dd>
<dd>結城浩 2012-11-28 (Release 2012-11-28)</dd>
<dd>eBooks Kindle版</dd>
<dd>ASIN: B00AF0YG28</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">クリスマスと言えばこのお話だよね。</p>
<p class="powered-by" >reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-11-09">2014-11-09</abbr> (powered by <a href="https://github.com/spiegel-im-spiegel/amazon-item" >amazon-item</a> 0.2.1)</p>
</div>
Shortcodes で HTML コードを埋め込む
tag:Baldanders.info,2015-10-24:/hugo/shortcodes/
2015-10-24T07:36:04+00:00
2015-10-24T07:36:04+00:00
たとえば記事の中に YouTube の動画や SlideShare の HTML コードを埋め込みたいとする。こういうときは Shortcodes の機能を使うと便利だ。
Spiegel
/profile/
<p>今回は <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の話。</p>
<p>たとえば記事の中に <a href="https://www.youtube.com/" title="YouTube">YouTube</a> の動画や <a href="http://www.slideshare.net/" title="Share and Discover Knowledge on LinkedIn SlideShare">SlideShare</a> の HTML コードを埋め込みたいとする。
<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> では段落単位に HTML コードを記述するとそのまま出力してくれるけど,頻繁に使うコードはテンプレート化して再利用したいだろう。
こういうときは <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の機能を使うと便利だ。</p>
<h2 id="shortcodes-の使い方">Shortcodes の使い方</h2>
<p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> は partial template の一種だけど,テンプレートの中に埋め込むのではなく,記事(markdown)ファイルに埋め込むことができる。</p>
<h3 id="指定した範囲を加工する">指定した範囲を加工する</h3>
<p>書式は以下のとおりである。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< shortcodename >}} ... {{< /shortcodename >}}
</span></span></code></pre></div><p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> の実体は <code>layouts/shortcodes</code> フォルダに <code>shortcodename.hml</code> などとコード名をそのままファイル名にしてで配置する。
たとえば <code>layouts/shortcodes/fig-quote.html</code> というファイルを作成し,以下のコードを書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">figure</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>{{ .Inner }}<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ if .Get "title"}}<span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">></span>{{ with .Get "link"}}<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{.}}"</span><span class="p">></span>{{ end }}{{ .Get "title" }}{{ with .Get "link"}}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><p>これを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-quote title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl"><q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3 </a> was declared a <q>BY-SA–Compatible License</q> for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3" target="_blank">special considerations</a> apply.
</span></span><span class="line"><span class="cl">See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q>
</span></span><span class="line"><span class="cl">{{< /fig-quote >}}
</span></span></code></pre></div><p>このように記述すると,以下のように展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">q</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3 <span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a <span class="p"><</span><span class="nt">q</span><span class="p">></span>BY-SA–Compatible License<span class="p"></</span><span class="nt">q</span><span class="p">></span> for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_blank"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">q</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote>
<q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3 </a> was declared a <q>BY-SA–Compatible License</q> for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q>
</blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<p><code>{{< fig-quote >}} ... {{< /fig-quote >}}</code> で囲まれている部分が <code>.Inner</code> 変数に格納され展開されているのがお分かりだろうか。</p>
<p><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> では <code>.Inner</code> 変数以外に任意のパラメータを持たせることができる。
上の例で言うなら <code>lang</code>, <code>title</code>, <code>link</code> が <code>{{< fig-quote >}}</code> に対するパラメータである。</p>
<p>名前を持たないパラメータでも有効である。
ここではルビ(ruby)を振る <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> <code>layouts/shortcodes/ruby.html</code> を考える。
こんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ruby</span><span class="p">><</span><span class="nt">rb</span><span class="p">></span>{{ .Inner }}<span class="p"></</span><span class="nt">rb</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span> (<span class="p"></</span><span class="nt">rp</span><span class="p">><</span><span class="nt">rt</span><span class="p">></span>{{ index .Params 0 }}<span class="p"></</span><span class="nt">rt</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span>) <span class="p"></</span><span class="nt">rp</span><span class="p">></</span><span class="nt">ruby</span><span class="p">></span>
</span></span></code></pre></div><p>これで例えば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">ruby</span> <span class="err">"ひらがな"</span> <span class="p">></span>}}平仮名{{<span class="p"><</span> <span class="p">/</span><span class="nt">ruby</span> <span class="p">></span>}}
</span></span></code></pre></div><p>と記述すれば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">これで例えば <span class="p"><</span><span class="nt">ruby</span><span class="p">><</span><span class="nt">rb</span><span class="p">></span>平仮名<span class="p"></</span><span class="nt">rb</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span> (<span class="p"></</span><span class="nt">rp</span><span class="p">><</span><span class="nt">rt</span><span class="p">></span>ひらがな<span class="p"></</span><span class="nt">rt</span><span class="p">><</span><span class="nt">rp</span><span class="p">></span>) <span class="p"></</span><span class="nt">rp</span><span class="p">></</span><span class="nt">ruby</span><span class="p">></span> と記述すれば
</span></span></code></pre></div><blockquote>
<p>これで例えば <ruby><rb>平仮名</rb><rp> (</rp><rt>ひらがな</rt><rp>) </rp></ruby> と記述すれば</p>
</blockquote>
<p>と展開される。
パラメータの順番に意味ができるので,多数のパラメータが必要な場合には向かないかもしれない。</p>
<h3 id="指定した範囲を-markdown-ドキュメントとして処理する">指定した範囲を Markdown ドキュメントとして処理する</h3>
<p><code>.Inner</code> 変数の内容を <code>markdownify</code> 関数に渡すことで Markdown ドキュメントとして処理する事ができる。
先程の <code>layouts/shortcodes/fig-quote.html</code> を少し改造した <code>layouts/shortcodes/fig-quote-md.html</code> を作ってみよう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">figure</span><span class="p">></span>{{ end }}
</span></span><span class="line hl"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>{{ .Inner | markdownify }}<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ if .Get "title"}}<span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">></span>{{ with .Get "link"}}<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{.}}"</span><span class="p">></span>{{ end }}{{ .Get "title" }}{{ with .Get "link"}}<span class="p"></</span><span class="nt">a</span><span class="p">></span>{{ end }}<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span></span></span></code></pre></div>
<p>これを使って以下の Markdown 記述を処理してみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-quote-md title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl">The [GNU General Public License version 3](https://www.gnu.org/copyleft/gpl.html) was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other [special considerations](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3) apply.
</span></span><span class="line"><span class="cl">See the full [analysis](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3) and [comparison](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL) for more information.
</span></span><span class="line"><span class="cl">{{< /fig-quote-md >}}
</span></span></code></pre></div><p>結果は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3</a> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<h3 id="shortcodes-を入れ子にする"><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> を入れ子にする</h3>
<p>もうひとつ,以下の内容の <code>layouts/shortcodes/quote.html</code> ファイルを作ってみよう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ with .Get "lang" }}<span class="p"><</span><span class="nt">q</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">q</span><span class="p">></span>{{ end }}{{ .Inner }}<span class="p"></</span><span class="nt">q</span><span class="p">></span>
</span></span></code></pre></div><p>これは <code>.Inner</code> 変数の内容を <code><q></code> 要素で囲むだけの簡単なコードだが,先程の <code>fig-quote-md</code> と組み合わせて</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< fig-quote-md title="Compatible Licenses - Creative Commons" link="https://creativecommons.org/compatiblelicenses" lang="en" >}}
</span></span><span class="line"><span class="cl">{{< quote >}}The [GNU General Public License version 3](https://www.gnu.org/copyleft/gpl.html) was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other [special considerations](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3) apply.
</span></span><span class="line"><span class="cl">See the full [analysis](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3) and [comparison](https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL) for more information.{{< /quote >}}
</span></span><span class="line"><span class="cl">{{< /fig-quote-md >}}
</span></span></code></pre></div><p>と入れ子構造にしてみる。
結果は以下の通り入れ子でも上手く処理されているのが分かる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">blockquote</span><span class="p">><</span><span class="nt">q</span><span class="p">></span>The <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.gnu.org/copyleft/gpl.html"</span><span class="p">></span>GNU General Public License version 3<span class="p"></</span><span class="nt">a</span><span class="p">></span> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
</span></span><span class="line"><span class="cl">Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
</span></span><span class="line"><span class="cl">Other <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3"</span><span class="p">></span>special considerations<span class="p"></</span><span class="nt">a</span><span class="p">></span> apply.
</span></span><span class="line"><span class="cl">See the full <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3"</span><span class="p">></span>analysis<span class="p"></</span><span class="nt">a</span><span class="p">></span> and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL"</span><span class="p">></span>comparison<span class="p"></</span><span class="nt">a</span><span class="p">></span> for more information.<span class="p"></</span><span class="nt">q</span><span class="p">></</span><span class="nt">blockquote</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">></span>via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://creativecommons.org/compatiblelicenses"</span><span class="p">></span>Compatible Licenses - Creative Commons<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure lang="en">
<blockquote><q>The <a href="https://www.gnu.org/copyleft/gpl.html">GNU General Public License version 3</a> was declared a “BY-SA–Compatible License” for version 4.0 on 8 October 2015.
Note that compatibility with the GPLv3 is one-way only, which means you may license your contributions to adaptations of BY-SA 4.0 materials under GPLv3, but you may not license your contributions to adaptations of GPLv3 projects under BY-SA 4.0.
Other <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3#Considerations_for_adapters_applying_the_GPLv3">special considerations</a> apply.
See the full <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility:_GPLv3">analysis</a> and <a href="https://wiki.creativecommons.org/wiki/ShareAlike_compatibility_analysis:_GPL">comparison</a> for more information.</q></blockquote>
<figcaption><div>via <q><a href="https://creativecommons.org/compatiblelicenses">Compatible Licenses - Creative Commons</a></q></div></figcaption>
</figure>
<h3 id="shortcodes-のみで-html-展開する場合"><a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> のみで HTML 展開する場合</h3>
<p><code>{{< shortcodename >}}</code> のみ,または <code>{{< shortcodename />}}</code> で表記すると <code>{{ .Inner }}</code> を持たない <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> を表現できる。
たとえば <code>layouts/shortcodes/fig-youtube.html</code> というファイルを作成し,以下のコードを書く。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">style</span><span class="o">=</span><span class="s">'margin:0 auto;text-align:center;'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">iframe</span> <span class="na">class</span><span class="o">=</span><span class="s">"youtube-player"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%;"</span> <span class="na">allowfullscreen</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube-nocookie.com/embed/{{ .Get "</span><span class="na">id</span><span class="err">"</span> <span class="err">}}"</span> <span class="na">allowfullscreen</span><span class="p">></</span><span class="nt">iframe</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>{{ if .Get "title"}}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/watch?v={{ .Get "</span><span class="na">id</span><span class="err">"</span> <span class="err">}}"</span><span class="p">></span>{{ .Get "title" }}<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}<span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><p>これを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{<span class="p"><</span> <span class="nt">fig-youtube</span> <span class="na">id</span><span class="o">=</span><span class="s">"Kjqff5bkUrE"</span> <span class="na">title</span><span class="o">=</span><span class="s">"「はやぶさ2」地球スイングバイ解説CG / Hayabusa2's Earth Swing-by CG - YouTube"</span> <span class="p">></span>}}
</span></span></code></pre></div><p>と記述すると,以下のように展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">style</span><span class="o">=</span><span class="s">'margin:0 auto;text-align:center;'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">iframe</span> <span class="na">class</span><span class="o">=</span><span class="s">"youtube-player"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; top: 0; left: 0; width: 100%; height: 100%;"</span> <span class="na">allowfullscreen</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.youtube-nocookie.com/embed/Kjqff5bkUrE"</span> <span class="na">allowfullscreen</span><span class="p">></</span><span class="nt">iframe</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.youtube.com/watch?v=Kjqff5bkUrE"</span><span class="p">></span>「はやぶさ2」地球スイングバイ解説CG / Hayabusa2<span class="ni">&#39;</span>s Earth Swing-by CG - YouTube<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><figure style='margin:0 auto;text-align:center;'>
<div style="position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe class="youtube-player" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" src="https://www.youtube-nocookie.com/embed/Kjqff5bkUrE" allowfullscreen></iframe>
</div>
<figcaption><div><a href="https://www.youtube.com/watch?v=Kjqff5bkUrE">「はやぶさ2」地球スイングバイ解説CG / Hayabusa2's Earth Swing-by CG - YouTube</a></div></figcaption>
</figure>
<h2 id="組み込みの-shortcodes">組み込みの Shortcodes</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> にはあらかじめ組み込まれた <a href="https://gohugo.io/extras/shortcodes/" title="Shortcodes">Shortcodes</a> が幾つかある。
この中で一番よく使うのは記事間の相互リンクを張ることのできる <code>ref</code> および <code>relref</code> だろう。</p>
<p>たとえばこの記事の「ブックマーク」節にリンクを張る場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[<span class="nt">このページのブックマーク</span>](<span class="na">{{< relref "#bookmark" >}}</span>)
</span></span></code></pre></div><p>とすると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"#bookmark"</span><span class="p">></span>このページのブックマーク<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span></span></code></pre></div><p>のように展開される。
ちなみに <code>ref</code> は絶対パス, <code>relref</code> は相対パスに展開される。</p>
<p>相互リンクは <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> で管理している記事ならどれでも指定できる。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">[<span class="nt">「ブックマーク」ページの「公式サイト」節</span>](<span class="na">{{< ref "/hugo/bookmark.md#official" >}}</span>)
</span></span></code></pre></div><p>と記述すると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://text.baldanders.info/hugo/bookmark/#official:9bacfa348e5fe42acc9342a16675997d"</span><span class="p">></span>「ブックマーク」ページの「公式サイト」節<span class="p"></</span><span class="nt">a</span><span class="p">></span>
</span></span></code></pre></div><p>のように展開される。</p>
<h2 id="bookmark">ブックマーク</h2>
<ul>
<li>
<p><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</p>
</li>
<li>
<p><a href="https://baldanders.info/hugo/cross-references-with-shortcodes/">Hugo におけるサイト内相互参照</a></p>
</li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
Categories や Tags の一覧ページを作る
tag:Baldanders.info,2015-10-04:/hugo/categories-and-tags-list/
2015-10-04T11:21:54+00:00
2015-10-04T11:21:54+00:00
以前の回で紹介してなかったのだが, Categories や Tags の一覧ページを作る機能があるので紹介する。
Spiegel
/profile/
<p>今回は補足なので簡単に。</p>
<p>「<a href="https://baldanders.info/hugo/section/">Categories, Tags そして Section</a>」の回で紹介してなかったのだが<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>, Categories や Tags の一覧ページを作る機能があるので紹介する。</p>
<p>Categories や Tags の一覧ページを作るには <code>layouts/_default</code> フォルダに <code>terms.html</code> テンプレートを作成する<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。
たとえば中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl">{{ with .Site.LanguageCode }}<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ . }}"</span><span class="p">></span>{{ else }}<span class="p"><</span><span class="nt">html</span><span class="p">></span>{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>{{ .Title }} Cloud -- {{ .Site.Title }}<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="o">></span> <span class="nt">li</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>{{ .Title }} Cloud<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"cloud"</span><span class="p">></span>{{ $plural := .Data.Plural }}
</span></span><span class="line"><span class="cl">{{ range $key, $value := .Data.Terms }}
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/{{ $plural }}/{{ $key | urlize }}"</span><span class="p">></span>{{ $key }}<span class="p"></</span><span class="nt">a</span><span class="p">></span> ({{ len $value }})<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p><a href="https://baldanders.info/hugo/section/">以前の記事</a>の <a href="https://baldanders.info/hugo/section/">Taxonomy</a> の記述に似ているので,それほど難しくないだろう。
これをビルドするとこんな感じにファイルが展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">C:\hugo-env\www>hugo
</span></span><span class="line"><span class="cl">0 draft content
</span></span><span class="line"><span class="cl">0 future content
</span></span><span class="line"><span class="cl">1 pages created
</span></span><span class="line"><span class="cl">0 paginator pages created
</span></span><span class="line"><span class="cl">2 tags created
</span></span><span class="line"><span class="cl">1 categories created
</span></span><span class="line"><span class="cl">in 17 ms
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">C:\hugo-env\www>tree /f .
</span></span><span class="line"><span class="cl">C:\HUGO-ENV\WWW
</span></span><span class="line"><span class="cl">│ config.toml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─archetypes
</span></span><span class="line"><span class="cl">├─content
</span></span><span class="line"><span class="cl">│ └─practice
</span></span><span class="line"><span class="cl">│ hello.md
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─data
</span></span><span class="line"><span class="cl">├─layouts
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ single.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─section
</span></span><span class="line"><span class="cl">│ │ practice.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─_default
</span></span><span class="line"><span class="cl">│ list.html
</span></span><span class="line"><span class="cl">│ single.html
</span></span><span class="line"><span class="cl">│ terms.html
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">├─public
</span></span><span class="line"><span class="cl">│ │ 404.html
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │ sitemap.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─categories
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hugo
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─practice
</span></span><span class="line"><span class="cl">│ │ │ index.html
</span></span><span class="line"><span class="cl">│ │ │ index.xml
</span></span><span class="line"><span class="cl">│ │ │
</span></span><span class="line"><span class="cl">│ │ └─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─tags
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ ├─hello
</span></span><span class="line"><span class="cl">│ │ index.html
</span></span><span class="line"><span class="cl">│ │ index.xml
</span></span><span class="line"><span class="cl">│ │
</span></span><span class="line"><span class="cl">│ └─world
</span></span><span class="line"><span class="cl">│ index.html
</span></span><span class="line"><span class="cl">│ index.xml
</span></span><span class="line"><span class="cl">│
</span></span><span class="line"><span class="cl">└─static
</span></span></code></pre></div><p><code>public/categories</code> および <code>public/tags</code> フォルダの直下に <code>index.html</code> ファイルが生成されているのがお分かりだろうか。
また <code>public/tags/index.html</code> ファイルの中身を見てみると以下のように Tags 情報が展開されている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"jp"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>Tags Cloud -- Hello World!<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">list-style</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">ul</span><span class="p">.</span><span class="nc">cloud</span> <span class="o">></span> <span class="nt">li</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h1</span><span class="p">></span>Tags Cloud<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"cloud"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/hello"</span><span class="p">></span>hello<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/tags/world"</span><span class="p">></span>world<span class="p"></</span><span class="nt">a</span><span class="p">></span> (1)<span class="p"></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><h2 id="bookmark">ブックマーク</h2>
<ul>
<li><a href="https://gohugo.io/templates/terms/">Taxonomy Terms Template</a></li>
<li><a href="http://wdkk.co.jp/lab/hugo/">Hugoサイト構築 | Watanabe-DENKI Inc. 渡辺電気株式会社</a> : お勧め!</li>
<li><a href="http://qiita.com/_shun_sato_/items/87888fa8425e55b1c758">Hugoでタグやカテゴリのリンク切れが起こる - Qiita</a></li>
</ul>
<p><a href="https://baldanders.info/hugo/bookmark/">Hugo に関するブックマークはこちら</a>。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>というか,今までやり方が分かってなかった。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>Tags や Categories などごとに個別にテンプレートを作りたいのであれば <code>layouts/taxonomy/tag.terms.html</code> といった感じでファイルを作るとよい。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>