平成のおすすめフリゲ300選+α (3)ノベル、戦略/育成、パズル、etc.

いつかは振り返りたいと思っていたのですが、平成が終わって良い機会なので、平成で特に面白かったフリゲをまとめます。 色々な人が似たようなリストを作ってくれていて、私も知らない作品が見つかって参考になっているので、少しは参考になるかなと。 どうやっても100選では収まりきらなかったので、300選にしました。

• 平成のフリゲ300選+α (1) RPG、アクションRPG、ホラー
• 平成のフリゲ300選+α (2) アクション/シューティング
• 平成のフリゲ300選+α (3)ノベル、戦略/育成、パズル、etc.

今回はノベル/アドベンチャー、戦略/育成/シミュレーション、パズル/バカゲーなど。特にグッときたものだけ紹介します。

ノベル/アドベンチャー

1. TRUE REMEMBERANCE
2. 送電塔のミメイ
3. Sin
4. 紅刻の唄
5. グッバイトゥーユー
6. ナルキッソスシリーズ
7. すっぽんクエスト
8. 詩歌を嗜むRe
9. Second Anopheles
10. EDEN -最終戦争少女伝説-
11. ずろうの棲処
12. 風雲相討学園フラット / 風雲相討学園ポテト
13. 天雨月都
14. ひとかた
15. 探し屋トーコ
16. NOeSIS-嘘を吐いた記憶の物語-
17. シルフェイド見聞録
18. ラスト・ピュリファイ
19. ハーバーランドでつかまえて
20. 保安官ラプソディ ～小さな島の小さな事件

戦略/育成/シミュレーション

1. ヴァーレントゥーガ
2. Spiral Tale Knights Of Hate
3. TacticalChronicle
4. 時代の底辺脱出戦記 SLUM GUY
5. 木精リトの魔王討伐記＋
6. To Realize!
7. OtoZ、えるまに、昴の騎士、魔法少女、他 (信じた馬鹿が俺だった。シリーズ)
8. 戦姫千騎戦記
9. Defence Saviors
10. Healer's Yell
11. エルディア大陸戦記1st～リタニア編
12. 晴れたり曇ったりN
13. レミュオールの錬金術師
14. -新説-UPRISING
15. とらねこ屋！〜仕方がないので働きます〜
16. 戦娘2～さらに戦う女の子たち～
17. アストゥール戦記
18. SURVIVOR - renewal -
19. TROPIC
20. マッドプリンセス 〜ディオドラの野望〜
21. 武器に願いを+
22. 自給自足
23. Almagest -Overture-
24. FrontierBlacksmith
25. Elona Shooter
26. スターダスト ディフェンス -Extension-
27. STAR BARON
28. とつげきダンジョン！シリーズ
29. 冠を持つ神の手
30. Wesnoth
31. スピネルの魔法工房
32. マリィと賢者の森
33. メイドさんと最低の野郎ども
34. 遭難サバイバル〜生きる。
35. エスティールの封印
36. むなしい努力
37. ナチガリア戦記
38. きのこたけのこ戦争IF
39. 光の目
40. ロンドリア物語 1 / 2

パズル/バカゲー

1. 野性の闘牌 鰻
2. ボムっと発掘！とれじゃーはんたぁ
3. デュラハンさんの頭をお持ち帰りする
4. 暗黒魔導士
5. Blocksum
6. いりす症候群！
7. 愛と勇気とかしわもち
8. 上原テトリス、上原マリオ、上原の冒険 (上原シリーズ)
9. 呪いの館
10. 鬼畜ブロック崩し
11. インフレクエストシリーズ
12. 300円クエスト
13. ぼくらの大革命！
14. 【リアルタイム将棋】有閑妖精の盤上遊戯
15. 白い巨塔
16. 納豆
17. 森夫THEバーバリアン

ここに入っていないものも、ほとんどは フリーゲームを探すのに便利なサイトまとめ から見つかるので、利用してみてください。

平成のおすすめフリゲ300選+α (2) アクション/シューティング

いつかは振り返りたいと思っていたのですが、平成が終わって良い機会なので、平成で特に面白かったフリゲをまとめます。 色々な人が似たようなリストを作ってくれていて、私も知らない作品が見つかって参考になっているので、少しは参考になるかなと。 どうやっても100選では収まりきらなかったので、300選にしました。

• 平成のフリゲ300選+α (1) RPG、アクションRPG、ホラー
• 平成のフリゲ300選+α (2) アクション/シューティング
• 平成のフリゲ300選+α (3)ノベル、戦略/育成、パズル、etc.

今回は、アクション/シューティングです。特にグッと来たものだけ紹介します。

1. 洞窟物語
2. ASTLIBRA ミニ外伝 ～幻霧の洞窟～
3. 崩壊村
4. フロントライン
5. モノリスフィア
6. SUPER MARIO XP
7. Dogma
8. Overnight Mare
9. 孤高のアオイロ
10. エコー 体験版
11. 前向き勇者
12. サムチャイVSサガット
13. らじおぞんで
14. ムラサキ
15. 超連射68k
16. ウィズメルクリウス -perficio-
17. G-TYPE
18. 小小特警
19. シューティングスターセブン
20. パイナッポ、忍者ゲーム、はかいマン、他たくさん (ひもじ村シリーズ)
21. Eternal Daughter
22. しょぼんのアクションシリーズ
23. HEROIC DARK -ヒロイックダーク-
24. リターンオブエジプト
25. 魔王のアクジ
26. ドカって★マイナーチュー次郎
27. ミクものがたり ～ユメとたいせつなもの～
28. LA-MULANA
29. MECHA Ritz (メカリッツ)
30. いかちゃん
31. コネクトネイバー
32. 斬るビル
33. VampunishX
34. プリンセスラナ。
35. ニュー・スーパーフックガール、SuperHookGirl
36. 不死鳥の棲む街、神様症候群。OP～第一章
37. さまよえる不死者たちの城
38. わたしのゆうしゃさま？
39. 霧留待夢
40. Torus Trooper, rRootage, Noiz2sa (ABA Gamesシリーズ)
41. RAY-KUDRYAVKAシリーズ
42. Hellsinker
43. ぶる〜むふぁんたじあⅡ
44. MUGEN
45. 東方シリーズ
46. 艦砲射撃！
47. ネイビーミッション
48. STORM CALIBER
49. 撃破伝
50. GENETOS
51. ありふれたホシの終末期シリーズ
52. ひよこ侍
53. ニルダ物語
54. Gravity
55. LETHAL CRISIS
56. ミックマンX
57. フォーチュンサモナーズ-アルチェの精霊石-
58. 神威
59. Tower of Heaven 天国の塔
60. ロストアルター
61. Sacrifice -サクリファイス-
62. 妖精とゴーレム
63. BlankBlood
64. 夏雲の島の宝船
65. 小町でアクション
66. ガンヴァルケン
67. Win' Wind' Windy
68. WindⅠ Upgrade
69. ニルダ物語
70. マシンナリシティ
71. 永久のセニア
72. 私の剣になりなさい！
73. ぷちわらの冒険
74. おばけの行進曲
75. クリエイティブストーリー
76. 人生オワタの大冒険
77. リノ=ライトの冒険
78. 夕暮れの王国〜美人が多い東方へ〜
79. 地形の神
80. パポタ ～空飛ぶ魔導店～
81. NANACA†CRASH!!
82. 飛べばいいじゃん。
83. Zelda Classic
84. RefleX
85. ギコパロ
86. キン肉マン～Muscle Fighting～
87. 世界名作バトル
88. Bizarre Fighters
89. 拳聖少女
90. 楽園のがーでぃあん

アクションRPGをどう分類するか難しいのですが、RPG要素が多いものはRPGのほうで紹介してます。 また鬼畜ゲーは極力入れてません。

ここに入っていないものも、ほとんどは フリーゲームを探すのに便利なサイトまとめ から見つかるので、利用してみてください。

平成のおすすめフリゲ300選+α (1) RPG、アクションRPG、ホラー

いつかは振り返りたいと思っていたのですが、平成が終わって良い機会なので、平成で特に面白かったフリゲをまとめます。 色々な人が似たようなリストを作ってくれていて、私も知らない作品が見つかって参考になっているので、少しは参考になるかなと。 どうやっても100選では収まりきらなかったので、300選にしました。

• 平成のフリゲ300選+α (1) RPG、アクションRPG、ホラー
• 平成のフリゲ300選+α (2) アクション/シューティング
• 平成のフリゲ300選+α (3)ノベル、戦略/育成、パズル、etc.

今回はRPG、アクションRPG、ホラーゲーム。特にグッときたものだけ紹介します。

1. Nepheshel
2. イストワール (ED は商用含めて1番好き)
3. 魔王物語物語
4. フリーランスRPG -Vida-
5. Ruina 廃都の物語
6. シルフェイド幻想譚
7. イニシエダンジョン
8. 影明かし (気持ち良さでは1番好き)
9. 武神の目覚め
10. らんだむダンジョン
11. フィアードライブ (ストーリー系では1番好き)
12. 三つの禁書《書》ー共鳴の始動ー
13. The Black Region
14. 滅亡世界
15. Artifical Providence 1 / 2
16. ふしぎの城のヘレン
17. ふたりの旅のきろく
18. ブレスオブザわてり
19. 悠遠物語 空の大陸とアイテム屋さん
20. メイジの転生録
21. Argus
22. ざくざくアクターズ
23. 夜明けの口笛吹き
24. 精霊のコンチェルト
25. エンチャントファーム
26. アレックスと最終戦争と9人の少女
27. タオルケットをもう一度3[唐揚げたんぽぽ]
28. With Walker
29. Knight Night
30. 東方自然癒
31. WIZMAZE
32. プリミズカ±
33. CUBE!
34. 遺跡島と7つのまほう
35. 天使のうつわ / おばけと魔法と (もちシリーズ)
36. 落ち葉の大地を走れ
37. エスファリア戦記
38. 闇の覇者～竜の傭兵団～
39. Elona
40. Elona Plus
41. Hero and Daughter
42. NetHack
43. ディアボロの大冒険
44. 邪策の枷
45. Ib
46. マヨヒガ
47. 霧雨が振る森
48. コープスパーティ
49. 囚人へのペル・エム・フル
50. -奈落2-
51. 片道勇者
52. ロードライト・フェイス
53. 迷宮踏破K
54. キャンディリミット
55. LEVEL 9
56. ヒロインをもう一度
57. ミミクリーマン
58. 幽獄の14日間
59. グリムボルト
60. リーフ村村長物語
61. TDQ (ドラゴンオエスト) 1 / 2
62. 精霊の剣
63. SEAL FOREST
64. 第二兵団物語
65. あすなな-アストリア王国騎士団第七小隊-
66. グリム・ディエムの冒険録 あるいは忘れられた海の底で
67. SWORD II マーヴの逆襲
68. PIERROT+
69. 魔法少女エリ
70. クラシックレジェンド ～悠久のノスタルジア～
71. ひとりぼっちの竜の神話
72. 今の風を感じて
73. Selenite
74. Wish Dragon
75. IggdLabyrinth
76. プリズンナイトmore
77. Acassia∞Reload
78. ティルキッス ～Princess Shade～
79. ダーリン菊一文字
80. 人類滅亡後のPinocchia
81. Project Zero
82. Recovery Pain
83. Princess Quartet
84. 姉妹の冒険
85. Trustia 〜トラスティア〜 Last Reincarnation
86. 炎帝セイバー
87. SWORD II マーヴの逆襲
88. じじまごRPGmini
89. time of a soul
90. コレクトレット
91. ガールズパーティ！
92. 箱庭セレナータシリーズ
93. Mystic Star
94. Labyrinth Star
95. ブルーバレット
96. 月夜に響くノクターン
97. FF 3.5
98. 美術空間
99. Margikarman
100. BUBBLES
101. 箱庭えくすぷろーら
102. セスタニアの迷宮
103. Dungeon Seeker
104. 勇者様のわすれもの
105. ぼくは勇者じゃないよ
106. レイユウサイ
107. デンシャ
108. イリゼグレイ -白黒姫と七色の宝石-
109. Sword Seeker
110. トバリドトキシンRE
111. Evalice Saga
112. シクザール
113. リナックス×メビウス
114. ルイと街の時計塔、ラルスと白夜城のお姫様 (おばけシリーズ)
115. ファントムルーラー
116. このまちだいすき
117. 夢見草の夜
118. ロマサガっぽいRPG (ロマンティックアドベンチャー)
119. 海賊高校生
120. 盗人講座
121. 禁術と呼ばれる術
122. 天と地の狭間 ～反逆の天使～
123. レディパール
124. Contrasta
125. 永久のセニア
126. B.B.ライダー
127. 巡り廻る。
128. アールエス
129. クミとクマ
130. フランドールの勇者
131. イザヨイセブン
132. SCHOOL LEADER
133. ルート299少女
134. Cresteaju
135. サラマンドラのおまじない
136. だいちのかけら
137. 青鬼
138. もしもんクエストモンスターズ〜リナックスのワンダーランド〜
139. Wizmatary
140. ソラドウト

Nepheshelファンなので探索系のランキングが高いです。 アクションRPGだけどアクション要素が強いものは、アクションとして取り扱ってます。

ここに入っていないものも、ほとんどは フリーゲームを探すのに便利なサイトまとめ から見つかるので、利用してみてください。

Bootstrapでテーブルの左端を固定して横スクロール

次に作る時に時間が掛かりそうなので、Bootstrapでテーブルの左端を固定して横スクロールする方法をメモしておきます。 完成イメージは以下。

年度	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010
データ1	AAA	BBB	CCC	DDD	EEE	FFF	GGG	HHH	III	JJJ	KKK
データ2	ZZZ	YYY	XXX	WWW	VVV	UUU	TTT	SSS	RRR	QQQ	PPP

上記を実現するコードは以下になります。

<style>
.table-fixed th:first-child, td:first-child {
  position: sticky;  position: -webkit-sticky;
  left: 0;
}
.table-fixed tr:nth-of-type(odd) th:first-child {
  background-color: #eee;
}
.table-fixed tr:nth-of-type(odd) td:first-child {
  background-color: #eee;
}
.table-fixed tr:nth-of-type(even) td:first-child {
  background-color: #fff;
}
/*
.text-nowrap { white-space: nowrap !important; }
.table-responsive {
  display: block;  width: 100%;
  overflow-x auto;  --webkit-overflow-scrolling: touch;
}
*/
</style>
<div class='text-nowrap table-responsive'>
  <table class='table table-striped table-hover table-fixed'>
    <tr><th>年度</th><th>2000</th><th>2001</th></tr>
    <tr><td>データ</td><td>AAA</td><td>BBB</td></tr>
  <table>
</div>

まずはtableをdivで囲み、text-nowrapクラスを指定して折りたたみをしないようにした上で、table-responsiveクラスを指定し、スクロール可能にしています。 クラスに対応するCSSはコメントを参照。

次にtable内でカラムを固定します。今回はtable-fixedクラスでその指定をしています。 position: sticky; を指定すると簡単に固定スクロールができます。 最近はこの指定ができるようになったので、ライブラリに頼る必要がなくなりました。 注意点としては、固定して横スクロールしたい時には、left: 0; の指定が必要という点です。 固定して縦スクロールしたい時には top: 0; を指定する必要があります。


あとはCSSの設定をして見栄えをよくするだけです。 今回は最初のカラムだけをCSSで固定していますが、background-color は必ず指定し直す必要があります。 Bootstrapではテーブル内の背景色は、transparent または 透過色で指定しているので、何も指定しないとスクロールした時に透過して文字が被ってしまいます。

私は少し手間取りましたが、display: sticky; のおかげで簡単にはなっています。

フリゲ紹介 : 姉妹の冒険

姉妹の冒険は、サイドビューでちょこちょこ動く、ロマサガ風味のRPG。

三姉妹の冒険という作品もありその続編になりますが、前作をプレイしていない人でも楽しめます。 今回のストーリーの中心にいるのは、前作にも登場したカレンとニール (左下図)。その2人が前作で登場したルキたちを探して旅をする物語です。 作者様の紹介で「サイドビューの戦闘でキャラクタードットがちょこちょこ動くのが特徴」と書かれていますが、本当に良く動き、作り込みが凄い (右下)。

マップはまさにロマサガ (左下)。短編という事もあって全体マップはそれほど大きくはありません。私がクリアまでに掛かったのは4時間ほどでした。 気軽に楽しむのにちょうど良いボリュームだと思います。 ダンジョンの探索もロマサガ調。ダンジョンはどれもマッピングが綺麗で、凄く良いです (右下)。

終始バランス良くスムーズに楽しめたゲームで、完成度の高いゲームだと思います。ラスボスは結構強かった。

Steam Link / Steam Remote Play ならスマホでもPCのフリゲができる！

Steam Linkという、PCやMac上で動作しているSteamとアプリを、モバイル端末上にてストリーミングプレイできるサービスが発表されました。 「もしかしてフリゲがスマホで動くのでは？」と思っていたら、既に試している人がいました。

動作確認をしていた方のツイートがこちら。 ざくざくアクターズがスマホで動いているのがわかりますね。 フリゲ勢…さすがです…。

steam link、天才
非steamゲームを登録して起動できる
PCのフリゲがスマホでできる…！！！ pic.twitter.com/lGcMkVkh1k

— BEA｜しろぴす (@guiletown) May 16, 2019

シューティングもできるみたい。

Steam Link、スマホだけで原作が出来て感動しますね！（移動の操作は少し大変ですが…） pic.twitter.com/P1E3ZjRdnF

— 東方ステーション 次回7/24or25 (@touhou_station) May 17, 2019

私はスマホゲーも少しは遊んだ事があるのですが、フリゲのほうが圧倒的に面白いので、今でもフリゲばかりやっています。 Linuxで動かすのが大変だったり、Windowsの需要が減ってきたり、受難の時期が長かったと思うのですが、脚光を浴びる日は近いかも？ 将来的にはクラウド経由でできるようになりそう。

スマホの課金系ゲームはハードルが高いですが、フリゲ＋広告だったらハードルがかなり低くなりますし、流行るかもしれませんね。 アクションゲームなどがどれだけうまく動作するのかはわかりませんが、そのへんもスマホで動くようになったら、日本のフリゲの資産はなかなか凄いものがあると思います。 動画を見る限りだと、iPadならいけるかも？



2019-06-17追記: いつかは動くようになるかもと書いていたら1ヶ月も経たないうちにクラウド経由で、動かせるようになりました。 その名もSteam Remote Play。 海外のビジネスの速度は凄いなあ。

みんなフリゲをやろう！

Bloggerで記事下に関連コンテンツ広告を設置する方法

Bloggerで記事下にGoogle Adsenseの関連コンテンツ広告を設置するのにめちゃくちゃハマりました。 今後ハマらないようにメモを残しておきます。

結論だけ言えば、「テーマ」→「HTMLの編集」から、以下のコードを <data:post.body/> の直後に貼ればOKです。 <data:post.body/> は2箇所あると思うので注意。
見栄えに関してもやはりそこがベストなのかなと思います。 少しずつ場所を変えて色々な場所に貼ってみたけど、場所を変えたりするとコメント欄が崩壊したり、意外と面倒でした。 なので直後に貼って、見た目を微調整したほうが良いのかなと思う。

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<ins class='adsbygoogle' data-ad-client='ca-pub-...'
data-ad-format='autorelaxed' data-ad-slot='...' style='display:block'/>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>

このコードを作るまでにハマったのは、Adsenseのコードをそのまま貼ろうとするとトップページの記事一覧に、記事ごとに関連広告が表示されてしまって最高に鬱陶しくなってしまうという事でした。 上記コードでは、トップページで関連広告を表示しないために、<b:if> というBlogger特有タグで、個別記事ページのみ表示するようにしています。 "item"' というおまじないが個別記事ページを判定するための文字列です。



ところでBloggerには他にも<b:include> や <b:includable> と言った特有タグがあります。 こちらを使って設置する方法もネット上で紹介されていたので試してみたのですが、これをまともに編集しようとするのは本当につらい。 Blogger特有タグの編集をミスると割とあっさり編集ページがフリーズするので、ここで1時間くらい取られました。

テーマを編集する時も、あまりBlogger特有タグは編集しないようにして、<b:if> の仕組みだけ覚えるのが良いのかなと思っています。

フリゲ紹介: プリズンナイトmore

プリズンナイトmoreは、Twitter経由で知った探索RPG。 2006年の作品なので10年以上前の作品になるのですが、今プレイしても普通にレベルの高い作品。

金欠の冒険者ガイ＆シトロンが行方不明になった少女を連れて帰る依頼を受け、「咎人の古城」に挑むゲームです (左下)。 ガイは物理攻撃、シトロンは魔法攻撃＆サポート主体のキャラになっている。

探索は主人公を操作するシンプルなもの。そこまでマップは広くないので、サクサクプレイが楽しめる (左下)。 戦闘はアクションポイント溜めつつスキルを打つタイプのサイドビューバトルになっています (右下)。 前半はアクションポイントが溜まらないですが、中盤からは溜まりやすくなってきます。 アクションポイントの管理が中盤以降のバトルのポイントになっているように思う。

咎人の古城の入り口にちょっとした謎解きがあり最初だけ少しハードルがあるのですが、 それ以降はシンプルな探索ゲームになります。

フリーゲームを探すのに便利なサイトまとめにも書いたのですが、2005-2009年の作品は探すのが大変だったので、こういった面白い作品を私もかなり見逃しています。 昔の隠れた名作も、もっとみんな語って欲しいなあ。

フリゲ紹介: コレクトレット

コレクトレットは、武器屋を経営して一攫千金を狙うゲーム。 ただお金を稼ぐだけではなく、冒険者からレアな装備を買い取って集める事もできるし、ダンジョンに潜る事もできます。 色々なプレイが楽しめるゲームになっている。

一点だけ注意点としては、主人公コレットならびに仲間たちはとても弱いです。 だからこそコレットたちはダンジョン探索は冒険者に任せ、武器屋を経営して一攫千金を狙い始めたのです (左下)。 ちなみにどれくらい弱いかと言うと、初期状態ではダンジョン最弱の敵 (右下) にワンパンされるくらい弱い (笑)。 しかし冒険者との取引で装備を整えれば、貧弱な主人公たちもたくましく成長します。 ハクスラゲームとして楽しむのも面白いです。

v1.0.0 からプレイしているのですが、最初の頃は階層を進めるたびにワンパンされる日々でした…。 しかし作者様が精力的に開発されている事もあって、色々とプレイしやすくなって、最近はとてもバランスの良い作品に仕上がっています。 作者愛とバージョンアップの重要性を感じさせられました。

実際どのように武器屋を経営するかというと、スキルの購入、武器の制作、施設の拡充、販売、ダンジョン探索の5つを左下のマップで行います。 最初は冒険者に売るための装備をどう調達するかがポイントになると思いますが、これも何種類か方法があって、色々なプレイスタイルが楽しめます。

ダンジョンもただ潜るだけではなくて、ボスが登場します (右下)。 画像では4人で挑んでいますが、コレットたちは弱いので冒険者たちに支援してもらいながら討伐する事もできます。 冒険者たちに任せっきりにする事もできます。 このあたりも面白い仕組みですね。

色々なプレイスタイルが楽しめる経営ゲームで、凄く面白い作品と思います。

ZEIT: Netlify/GitHub Pagesの新たな代替サービス

ZEITというサービスがある事を知りました。 NetlifyやGitHub Pagesとよく似たデプロイサービスです。 Netlifyを見て類似サービスが今後増えるかなーと思っていたのですが、案の定増えてきました。

海外ではNetlifyやGitHub Pagesとよく比較されていて、ちょうど中間くらいのサービスかなと思います。 NetlifyやGitHub Pagesと同レベルのサービスを提供しているだけでも凄いサービスですが、いくつか違いはあります。 まずLambdaが1000回/日に限定されているので、静的サイトとしての運用以外は厳しいと思います。

代わりにチーム利用に無料枠があるのでチームで利用しやすいサービスになっている。 また0.99$/月から従量課金タイプのクラウドモデルがあって、マネーパワーで制限を取り払いやすくなっているのが大きな違いでしょうか。

Lambdaが無料では使いにくいのでGitHub Pagesにより近いサービスになると私は予想してます。 何にしても新たな選択肢が生まれたのは良い事です。

Web Componentsの仕組みをざっくり理解する

GooglebotでWeb Componentsがサポートされ、Web Componentsがどういうものかそろそろ理解したかったので、Googleの解説を見てみました。 自分用にわかりやすくリライトしてざっくりまとめると、JavaScriptの動作込みで再利用可能なタグを定義できる仕組みですね。 その定義にShadow DOMというものを使っている。Shadow DOM≒標準サポートされた仮想DOM、の理解で良いと思います。

どのように使えるかですが、モーダルウィンドウを作る場合を例にするとわかりやすいと思いました。 これまではCSSとJavaScriptをライブラリ側で定義して、そのタグ構造を利用者がコピペしてモーダルウィンドウを実現していました。 Bootstrapではそのコピペするべきコードが以下のようになっています。長いね。

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
    </div>
  </div>
</div>

Web Componentsを使うと、呼び出し側では例えば以下のように書けます。 書き方の定義はライブラリ内でするので、こんな感じで書けたら良いなーという願望です。

<modal>
  <modal-title slot='title'>Modal title</modal-title>
  <modal-body slot='body'>Modal body text goes here.</modal-body>
</modal>

ライブラリ側はどんな感じになっているかというと、以下のような実装になる。 ポイントはshadowRoot内で書き換えるHTML/CSSを定義して、その内部にあるslotタグで書き換える要素を定義するというところ。 connectedCallback() あたりの記述はJavaScriptで書き換えの時の処理を定義している。

<script>
customElements.define('modal', class extends HTMLElement) {
  constructor() {
    super();
  }
  let shadowRoot = this.attachShadow({mode:'open'});
  shadowRoot.innerHTML = `
    <style>
      ... 省略 ...
      modal { background:black; }  // 定義したWeb Componentsのスタイルも作れる
    </style>
    <div>  // 実際にはここでBootstrapのような構造を定義する
      <div id='modal-title'><slot id='title'></slot></div>
      <div id='modal-body'><slot id='body'></slot></div>
    </div>
  `;
  connectedCallback() {
    const modalTitle = this.shadowRoot.getElementById('modal-title');
    ... 色々な動作を定義 ...
  }
}
</script>

雑多な仕組みとしては、Shadow DOM特有のCSSプロパティとして::slotted, :host, :host-contextなどが使える。 JavaScript側ではslotchangeイベントなどが使えるようだ。 他にもtemplateタグとの併用がおすすめされている。 XSSを考慮してShadow DOM内でしか機能しないイベントなども色々あるようなので、このへんは実装する時に確認して欲しい。


ドキュメントを読んで感じたWeb Componentsの主な利点は以下です。

• HTML/CSS/JavaScriptが隠蔽化されグローバル汚染が減る
• 利用者側のコード量が減って簡潔に書けるようになる
• 既存のライブラリのようなclass呼び出しではないのでたぶん高速に動作する

一部分の機能だけしかまとめてないけど、他にも色々な機能やモードがあるみたい。 CSSフレームワークの実装がガラッと変わりそうですね。 Bootstrap 5や他のライブラリも実装方式がめちゃくちゃ簡潔になりそうで、楽しみです。

非常駐型の軽量Linuxランチャー: Rofi

Albertランチャーの記事が意外とアクセスがあったようなので、いまさらだけど最近使ってる Rofi については語っておかないとと思いました。 Albert のほうがずっと高機能だけど、非常駐でメモリに優しい Rofi のほうがLubuntuの特徴を活かしてる感じがするので、最近はこちらを使ってます。

Rofiの特長は自作ランチャーの紹介ページでも少し書いたのですが、まずは非常駐型のランチャーというところです。メモリに優しい。 少しバージョンが古いけどapt-getで簡単に入れられるのも良いところ。 他には実行履歴を記憶しておいて最近起動したものを選択候補の上位に表示してくれるのも便利。 ようするにシンプルに便利なのです。

非常駐型なのでショートカットキーを登録して呼び出せるようにしておくと良いかと思います。 Lubuntuでのショートカットキーの設定方法は~/.config/openbox/lubuntu-rc.xml を編集すると設定できます (Lubuntuのおすすめ設定ページ参照)。以下の設定をkeybindタグがある付近に追加すると、Win＋Spaceキーでランチャーを起動できるようになります。

<keybind key="W-space">
  <action name="Execute">
    <command>rofi -show run</command>
  </action>
</keybind>

設定は openbox --reconfigure で反映できます。 メモリをとことん削りたい人にはおすすめしやすいランチャーです。

Let's Encrypt Cheetsheet

Let's Encryptについて、検索エンジンでなかなか欲しい部分の情報がヒットしなくて時間が掛かったので、私が使っている最低限の機能だけまとめておきます。

インストール

sudo apt install letsencrypt

最初の登録

HTTPサーバが既に動いている場合は--webroot、動いてない場合は--standaloneで証明書を取得できます。 以下のコマンドでは連絡用アドレスの入力と利用規約への同意を求められますが、コメント欄を追加すれば回避する事もできます。

sudo certbot certonly \
  --standalone -w /path/to/webroot \
  -d hoge.com
  # --agree-tos -m email@example.com

サブドメインの拡張

先にDNSを拡張しておかないとエラーが出るので注意。 DNSはホスト名に追加したいサブドメインを書いて、以下のように編集すればOK。優先度は適当に。

ホスト名	タイプ	コンテンツ	優先度
jp.hoge.com	CNAME	hoge.com (もしくは別サーバのホスト名)	-

Let's Encrypt側の設定は--expandを指定した後に追加したいサブドメインを -dで追加していくだけ。 普通はサブドメインの追加程度でサービスを止める事はないと思うので、--webrootオプションを指定した場合を書いています。

sudo certbot certonly --expand \
  --webroot -w /path/to/webroot \
  -d hoge.com \
  -d jp.hoge.com \

ワイルドカード証明書を登録するという手段もあるけど、証明書の自動更新がしにくくなるので私はサブドメインをチマチマ追加しています。

cronで自動更新

/etc/cron.d/certbot などに設定ファイルを作る。以下は毎週日曜の12/24時に更新する例。

0 */12 * * 0 root /usr/bin/certbot renew --post-hook "sudo /etc/init.d/httpd restart"

自動更新でハマりやすいポイントとしては、期限切れになった時は renew では駄目というところ。証明書を1から作り直す必要があります。 私がやってしまった時は、このサイトの解説のように以下のファイルを削除してから再発行しないと駄目でした。

/etc/letsencrypt/live/
/etc/letsencrypt/archive/
/etc/letsencrypt/renewal/

最近、検索エンジンでわかりやすいサイトがヒットしにくい…。

文字画像ジェネレータを作った

アイコン作成のために文字画像を作りたくなったのですが、お手軽に作れるサービス/アプリがなかったので作りました。 画像編集ソフトで地道に作ろうとすると、領域を指定してそのサイズ内にきちんとフォントが綺麗に収まってるか確認して、 ◯や□で囲んだ上でジャギーを判断して、32x32に収まるように調整…など地味につらい作業なのです。

作り方: 以下のテキストエリアでJavaScript/CSSを書くとリアルタイムに編集結果がプレビューできます。 良い感じの文字画像が完成したら画像化しましょう。

B!

var text = document.getElementById('text'); text.innerText = 'B!'; text.style.fontSize = '24px'; var area = document.getElementById('area'); area.style.width = '28px'; area.style.height = '28px'; area.style.border = '2px solid black'; area.style.borderRadius = '10px'; // 中央表示 area.style.display = 'flex'; area.style.justifyContent = 'center'; area.style.alignItems = 'center'; area.style.textAlign = 'center';

注意点: 画像化にはhtml2canvasを使っているのですが、色々とサポートしていないCSSプロパティがあって、できない事があります。 また非対応の属性を使わなくても、いざ画像生成してみるとズレが発生しがちなのが現状です。 Linuxだとすぐズレるみたいだけど、Windowsは大丈夫っぽい。フォントの問題なのかなあ。 特に複雑な事はしてないのでライブラリのバグとは思うのですが…。

html2canvasはもうすぐ ver1.0.0 がリリースされるそうなので、表示が崩れなくなったらこの小さなアプリも更新します。 Linuxで画像化がうまくいかない不満は残りますが、Windowsで作れば何とかなるので、現状では良しとしておきます。

BootstrapのPaginationを静的ジェネレータで良い感じに表示するためのサンプル

Paginationはよく使うので、Bootstrap＋静的ジェネレータで使いやすいサンプルのメモを残しておきます。 使い方のイメージはコメントにも書いたけど、以下のような表示をイメージしたサンプルになっています。

• 1
• 2 (current)
• 3
• 4
• 5
• » Next

• « Previous
• 3
• 4
• 5 (current)
• 6
• 7
• » Next

• « Previous
• 6
• 7
• 8
• 9 (current)
• 10

ページの最初と最後では «, » を表示しないようにして指定の個数ぶんだけ表示するようにしています。 コードは以下。Pythonなので好きな言語に書き直してください。

def getPagination(maxPage, currPos):
    html = "<div class='text-center'><nav><ul class='pagination justify-content-center'>\n"
    displayNum = 2  # 5,6,[7],8,9 --> 2
    if currPos - displayNum < 1:  # <start>1,[2],3,4,5
        startPos = 1
        endPos = startPos + displayNum * 2
    else:
        lastPos = maxPage - (displayNum * 2)
        if currPos + displayNum < n:  # 3,4,[5],6,7
            startPos = currPos - displayNum
            endPos = currPos + displayNum
        else:  # 6,7,8,[9],10<end>
            startPos = lastPos
            endPos = maxPage

    if 1 < currPos - displayNum:
        url = '/foo/bar/%+d/' % i
        html += '''
            <li class="page-item">
              <a class="page-link" href="{url}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
'''.format(url=url)

    for i in range(startPos, endPos+1):
        url = '/foo/bar/%+d/' % i
        if i == currPos:
            html += "<li class='page-item active'><a class='page-link' href='%s'>%d <span class='sr-only'>(current)</span></a></li>" % (url, i)
        else:
            html += "<li class='page-item'><a class='page-link' href='%s'>%d</a></li>" % (url, i)

    if currPos + displayNum < maxPage:
        url = '/foo/bar/%+d/' % i
        html += '''
            <li class="page-item">
              <a class="page-link" href="{url}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
'''.format(url=url)

    html += "</ul></nav></div>\n"
    return html

よく使うし簡単な実装な割には意外と行数がかさばる。 Paginationの作成に2-30分も取られるのは良くないので、再利用しやすい形で残しておくのが良いかと思います。