アメリカの２つの鉄道会社、ペンシルバニア鉄道（PRR）とニューヨークセントラル鉄道（NYC）。

ニューヨーク←→シカゴというドル箱路線を抱える両者間で繰り広げられる熾烈な特急列車競争と、その特急列車を牽引する蒸気機関車の開発競争を前後編で学べる動画です。


https://www.youtube.com/watch?v=yqwZImitMtM

https://www.youtube.com/watch?v=egoig1yvwUU&t=834s


作者の [64 denden](https://www.youtube.com/channel/UCir33Q5FCM_NIR5vdccWikw/featured) さんはこれまでも様々な海外の蒸気機関車の迷列車シリーズをアップされています。
他の作品もすべておすすめです。

動画：ペンシルバニア鉄道とニューヨークセントラル鉄道の熾烈な特急列車競争

Cities Skylinesで護岸工事してみた
Mod使えばモダンな湾岸が再現できそう

https://gyazo.com/7849b936799d097c10a37bd36fd22be2

ちょっと地形の処理に難があるかな...
（調整のため岸の下に道が沈んでいる）

The cargo harbor (Cities Skylines)

Cities Skylinesの動作が不安定になったので、Mod・アセットのサブスクリプションをすべて解除して入れ直したので備忘録です

また改めて、機能紹介みたいな記事が書きたいな

### 導入したMod一覧

* [Steam ワークショップ::Move It](https://steamcommunity.com/sharedfiles/filedetails/?id=1619685021)
* [Steam ワークショップ::Network Extensions 2 (Updated for Sunset Harbor)](https://steamcommunity.com/sharedfiles/filedetails/?id=812125426)
* [Steam ワークショップ::Loading Screen Mod](https://steamcommunity.com/sharedfiles/filedetails/?id=667342976)
* [Steam ワークショップ::Advanced Toolbar](https://steamcommunity.com/sharedfiles/filedetails/?id=563229150)
* [Steam ワークショップ::Find It!](https://steamcommunity.com/sharedfiles/filedetails/?id=837734529)
* [Steam ワークショップ::Extra Landscaping Tools](https://steamcommunity.com/sharedfiles/filedetails/?id=502750307)
* [Steam ワークショップ::Topographic Lines Toggle](https://steamcommunity.com/sharedfiles/filedetails/?id=877748783)
* [Steam ワークショップ::Prop Precision](https://steamcommunity.com/sharedfiles/filedetails/?id=791221322)
* [Steam ワークショップ::Prop & Tree Anarchy](https://steamcommunity.com/sharedfiles/filedetails/?id=593588108)
* [Steam ワークショップ::Shadow Strength Adjuster](https://steamcommunity.com/sharedfiles/filedetails/?id=762520291)
* [Steam ワークショップ::Ability to Read](https://steamcommunity.com/sharedfiles/filedetails/?id=1145223801)
* [Steam ワークショップ::Dynamic Resolution (Fixed for 1.9!)](https://steamcommunity.com/sharedfiles/filedetails/?id=812713438)
* [Steam ワークショップ::Tree Movement Control](https://steamcommunity.com/sharedfiles/filedetails/?id=1388613752)
* [Steam ワークショップ::Unlimited Trees Mod v1.12](https://steamcommunity.com/sharedfiles/filedetails/?id=455403039)
* [Steam ワークショップ::Forest Brush v1.3](https://steamcommunity.com/sharedfiles/filedetails/?id=1658679290)
* [Steam ワークショップ::Terraform tool 0.9](https://steamcommunity.com/sharedfiles/filedetails/?id=411095553&searchtext=terraform+tool)
* [Steam ワークショップ::One-Way Train Tracks](https://steamcommunity.com/sharedfiles/filedetails/?id=724382534)
* [Steam ワークショップ::SingleTrainTrackAI](https://steamcommunity.com/sharedfiles/filedetails/?id=949504539)
* [Steam ワークショップ::More Simulation Speed Options](https://steamcommunity.com/sharedfiles/filedetails/?id=412292157)
* [Steam ワークショップ::Camera Positions Utility](https://steamcommunity.com/sharedfiles/filedetails/?id=898480258)
* [Steam ワークショップ::Fine Road Tool](https://steamcommunity.com/sharedfiles/filedetails/?id=651322972)
* [Steam ワークショップ::Fine Road Anarchy](https://steamcommunity.com/sharedfiles/filedetails/?id=802066100)
* [Steam ワークショップ::Surface Painter](https://steamcommunity.com/sharedfiles/filedetails/?id=689937287)
* [Steam ワークショップ::Clouds & Fog Toggler](https://steamcommunity.com/sharedfiles/filedetails/?id=523824395)

Cities Skylinesでとりあえず入れたMod集

妻がスコーンを作ってくれた

この時期なぜか強力粉が手に入らないので薄力粉で代用したがほろほろとした食感で美味だった

https://gyazo.com/9f77cf36756b660058d371a410dd7877

スコーン

Cities Skylinesでまちづくり

https://gyazo.com/251ba6d802701d9cab293cf646f9580d

https://gyazo.com/9571a6f1a15b599a0fa215ca766ea4c2

https://gyazo.com/df49b6a46786582b46f1beb54c1fe0b4

https://gyazo.com/e9a101e932462b75aef3ec4d06b90f50

Cities Skylines

**方針**

JSFiddleのURLをEmbedのコードに置換する


**デモ**

https://jsfiddle.net/simochee/gb8n2exp/24/


**TODO**

テーマやフィールドの限定などが未実装


**markdown-it plugin**

```jsfiddle.ts
import MarkdownIt, { PluginSimple } from 'markdown-it';
import { RenderRule } from 'markdown-it/lib/renderer';
import ParserBlock from 'markdown-it/lib/parser_block';

const jsfiddleRuler: ParserBlock.RuleBlock = (state, startLine, endLine, silent) => {
  const pos = state.bMarks[startLine] + state.tShift[startLine];
  const posMax = state.eMarks[startLine];
  const line = state.src.slice(pos, posMax);
  const jsfiddleUrl = /^(?:https?:)?\/\/jsfiddle\.net\/[^/]+\/[^/]+\/?(?:[0-9]+)?/.exec(line);

  if (!jsfiddleUrl || pos >= posMax) {
    return false;
  }

  const url = jsfiddleUrl[0];

  if (!silent) {
    state.line = startLine + 1;

    const token = state.push('jsfiddle', '', 0);

    token.content = [url, 'embed/js,html,css,result/dark'].join('/');
  }

  return true;
};

const jsfiddleTokenizer = (md: MarkdownIt): RenderRule => (tokens, index) => {
  const { content } = tokens[index];
  const url = md.utils.escapeHtml(content);

  return `<div class="jsfiddleEmbed"><script async src="${url}"></script></div>`;
};

const jsfiddlePlugin: PluginSimple = (md) => {
  md.renderer.rules.jsfiddle = jsfiddleTokenizer(md);
  md.block.ruler.before('paragraph', 'jsfiddle', jsfiddleRuler);
};

export default jsfiddlePlugin;
```


JSFiddleのエディタを埋め込む

TwitterをEmbedできるようにしたいな

**実装方針**

`<url>` でTwitterの埋め込みができるようにする

**デモ**

https://twitter.com/iizuka03/status/1262375120041115648?s=20


... 無理っぽいのでおとなしくEmbeded Tweet取得するサイト使おう

Twitterのツイートを埋め込めるようにしたい

YouTubeの動画をMarkdownに表示させられるようにしてみたい

**実装方針**

`<url>` でYouTubeのURLを指定したらプレイヤーを埋め込む

**URLを貼り付け**

```md
https://www.youtube.com/watch?v=7w3jBGX7UcY
```

https://www.youtube.com/watch?v=7w3jBGX7UcY

**短縮URLを貼り付け**

```md
https://youtu.be/kgGM5XMdq0I
```

https://youtu.be/kgGM5XMdq0I


**markdown-it plugin**

```youtube.ts
import MarkdownIt, { PluginSimple } from 'markdown-it';
import { RenderRule } from 'markdown-it/lib/renderer';
import ParserBlock from 'markdown-it/lib/parser_block';

const youtubeRuler: ParserBlock.RuleBlock = (state, startLine, endLine, silent) => {
  const pos = state.bMarks[startLine] + state.tShift[startLine];
  const posMax = state.eMarks[startLine];
  const line = state.src.slice(pos, posMax);
  const youtubeUrl = /^https?:\/\/(?:www\.)?(?:youtube\.com\/watch.+|youtu\.be\/[0-9a-zA-Z-]+)$/.exec(line);

  if (!youtubeUrl || pos >= posMax) {
    return false;
  }

  const url = youtubeUrl[0];

  if (!silent) {
    state.line = startLine + 1;

    const token = state.push('youtube', '', 0);

    token.content = url;
  }

  return true;
};

const youtubeTokenizer = (md: MarkdownIt): RenderRule => (tokens, index) => {
  const { content } = tokens[index];
  const matches = /(?:[?&]v=|youtu\.be\/)([0-9a-zA-Z-]+)/.exec(content);

  if (!matches) {
    return '';
  }

  const videoId = md.utils.escapeHtml(matches[1]);

  return `<div class="youtubeVideo" data-video-id="${videoId}"></div>`;
};

const youtubePlugin: PluginSimple = (md) => {
  md.renderer.rules.youtube = youtubeTokenizer(md);
  md.block.ruler.before('paragraph', 'youtube', youtubeRuler);
};

export default youtubePlugin;
```

YouTubeの動画を表示できるようにしたい

Next.jsとContentfulを使ってブログを作ってみました


技術ブログの方はネタがあれば、Diaryの方はなるべく毎日更新していきます


![雨じゃん](//images.ctfassets.net/wku0c3s2ifxu/E9Y8trVmtPGSO83WvRWnc/450dfd40dd2c5d15ffde9ace6b326036/amekasa0I9A4479_TP_V.jpg)
**雨続きで洗濯できない... 🍭**