577 行
49 KiB
XML
577 行
49 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:thr="http://purl.org/syndication/thread/1.0">
|
||
<id>gemini://technicalsuwako.moe</id>
|
||
<title>テクニカル諏訪子</title>
|
||
|
||
<updated>2023-03-08T00:00:00Z</updated>
|
||
|
||
<author><name>テクニカル諏訪子</name></author>
|
||
<link href="gemini://technicalsuwako.moe" rel="alternate"></link>
|
||
<generator uri="https://github.com/piranha/gostatic">gostatic</generator>
|
||
|
||
|
||
|
||
<entry>
|
||
<id>blog/digital-kansi-most-danger-cctv.gmi</id>
|
||
<author><name>凛</name></author>
|
||
<title type="html">【デジタル監視】プライバシーに一番危険な物は監視カメラ、二番はスマホ</title>
|
||
<published>2023-03-08T00:00:00Z</published>
|
||
|
||
<category term="jp"></category>
|
||
|
||
<category term="blog"></category>
|
||
|
||
<category term="デジタル監視"></category>
|
||
|
||
<category term="プライバシー"></category>
|
||
|
||
<category term="匿名化"></category>
|
||
|
||
<category term="セキュリティー"></category>
|
||
|
||
<category term="スマホ"></category>
|
||
|
||
<link href="gemini://technicalsuwako.moe/blog/digital-kansi-most-danger-cctv.gmi" rel="alternate"></link>
|
||
<content type="html">
|
||
|
||
|
||
|
||
<p>やっとオンラインで匿名化出来たわね。<br />
|
||
<a href="/blog/digital-autonomy-send-encryption-mail/">自分のI2Pサーバーでホスティングしたり</a>、<a href="/blog/no-generator-easy-html/">静的サイトを管理して</a>、<a href="/blog/no-generator-easy-maintain/">編集したり</a>、<a href="https://social.076.moe/">フェディバース以外SNSを使わなくたり</a>、<a href="/blog/all-softwear-in-tor/">いつでもTor通してネットを使ったり</a>、<a href="/blog/digital-autonomy-send-encryption-mail/">PGP・GPGでメールを暗号化したり</a>、<a href="/blog/thinkpad-t43-ssd-install-way/">LINE・Disord・Zoom・Google・Windows等を使うのは遠慮したり</a>、<a href="/blog/webdev-javascript-ha-fuyou/">いつでもJavascriptを無効にしたり</a>、<a href="/support/monero/">全部モネロ(XMR)で払います</a>ね。<br />
|
||
しかし、おにぎりを食べる為コンビニに行くと、直ぐプライバシーがなくなります。<br />
|
||
何故!?</p>
|
||
<h2 id="heading">プライバシーに、一番危険な物は監視カメラだ</h2>
|
||
<p>監視カメラはどこでもあります。<br />
|
||
「犯罪者を捕まえる為」って口実を使ってどこでも設置出来ましたが、これは犯罪者の為わけではない、貴方の為です!<br />
|
||
監視カメラは顔認識機能性を持つのはみんなはわかりますが、それだけじゃありません。<br />
|
||
マスク着用したらも顔を隠れられません。<br />
|
||
<a href="https://youtube.076.ne.jp/watch?v=ujcSrV-3GcI">マスクとサングラスを着用したらも顔認識が可能です</a>。<br />
|
||
実は、殆ど皆さんは顔パンツを着用したのに、主に新型茶番の感染拡大(<a href="/blog/digital-kansi-corona-taimrain/">インチキPCRを使って</a>)が続く中監視カメラが凄く増えたと気づきましたか?<br />
|
||
結局、目だけは十分です。<br />
|
||
それだけではない、スマホを持ってきたら危険性が増えています。<br />
|
||
監視カメラは4Gか5G、WiFi、ブルーツース等で使ってスマホのデータを読み込める事が知っていますか?</p>
|
||
<h2 id="heading-1">二番危険な物はスマホだ</h2>
|
||
<p><a href="https://video.076.ne.jp/w/oZvz61zALM2Lj9fAfn4wQe">スマホはおもちゃっぽい追跡機器です</a>。<br />
|
||
監視カメラはスマホを持っているかどうか検出出来るかもしん。<br />
|
||
いつでもスマホを持ってくるから、これは非常に危険です。<br />
|
||
スマホから送られるデータを使って貴方の事を知っていますが、スマホを持たなければも貴方の事を知っています。<br />
|
||
理由は、殆ど皆さんはいつでもスマホを持ってくるから、貴方は出る杭となります。<br />
|
||
日本での皆さんで30%以上はスマホ(ガラケーやタブパソコン含めて)を持ってくる事が辞めたら、こんな監視を止められます。<br />
|
||
しかし、あたしだけは持ってこない感じです。</p>
|
||
<p>なお、基本な活動でスマホは段々必要となります。<br />
|
||
例えば、支払い(PayPay等)、ポイントカード、航空券、ルーターの設置、ネット銀行口座(日本ではまだないですが、欧米中豪でスマホを使うのは必須)、<a href="/blog/more-safe-than-2fa-is-pass-pwgen/">SNSにサインイン</a>等。<br />
|
||
もうすぐスマホ無しで市区町村外に旅する事も不可能になります。<br />
|
||
ソビエト連邦、北朝鮮、もうすぐ豪国とニュージーランドで許可なしで旅出来ません。<br />
|
||
この状況を変わらないと、日本でもそれが来ます。</p>
|
||
<h2 id="heading-2">スマホを持ってこないで</h2>
|
||
<p>スマホを自宅に残すと、同時に自分のプライバシーを改善したり、他人の安全性を改善したり、お命を改善したり、正しく歩いたり、他人の迷惑をかけるのは辞めたり、ディストピアを止められます。<br />
|
||
便利さだけがなくなりますが、すれは仮の感じだけです。<br />
|
||
速く慣れていると思います。</p>
|
||
<p>以上</p>
|
||
|
||
|
||
</content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<id>blog/no-generator-easy-maintain.gmi</id>
|
||
<author><name>凛</name></author>
|
||
<title type="html">【HTML】静的サイトジェネレーター利用せず簡単に静的サイト編集する方法</title>
|
||
<published>2023-02-08T00:00:00Z</published>
|
||
|
||
<category term="jp"></category>
|
||
|
||
<category term="blog"></category>
|
||
|
||
<category term="html"></category>
|
||
|
||
<category term="ウエブサイト"></category>
|
||
|
||
<category term="ウエブ開発"></category>
|
||
|
||
<category term="linux"></category>
|
||
|
||
<category term="bsd"></category>
|
||
|
||
<link href="gemini://technicalsuwako.moe/blog/no-generator-easy-maintain.gmi" rel="alternate"></link>
|
||
<content type="html">
|
||
|
||
|
||
|
||
<p>昨日は静的サイト管理する方法を教えました。<br />
|
||
でも、編集はどう?<br />
|
||
例えば、会社名が変わったら、一個ずつ編集は必要でしょうか?<br />
|
||
必要はないわ!</p>
|
||
<h2 id="sed">sedで会社名の変更</h2>
|
||
<p><code lang="">sed</code>コマンドですべてのページで変更出来ますよ!</p>
|
||
<pre><code lang=""><span style="color:#a2f">cd</span> src
|
||
find . -type f -name <span style="color:#b44">&#34;*.html&#34;</span> -exec sed -i <span style="color:#b44">&#39;s/クソガキ株式会社/テクニカル諏訪子開発サービス/g&#39;</span> <span style="color:#666">{}</span> +
|
||
</code></pre><p>上記コマンドですべてのページで「クソガキ株式会社」が「テクニカル諏訪子開発サービス」に変更されます。<br />
|
||
でも、「クソガキ株式会社」の方が良いですので:</p>
|
||
<pre><code lang="">find . -type f -name <span style="color:#b44">&#34;*.html&#34;</span> -exec sed -i <span style="color:#b44">&#39;s/テクニカル諏訪子開発サービス/クソガキ株式会社/g&#39;</span> <span style="color:#666">{}</span> +
|
||
</code></pre><h2 id="sedhtml">sedでマークダウンからHTMLに交換</h2>
|
||
<p>この同じsedコマンドで、すべての「\」を「&lt;br /&gt;」に交換出来ます。<br />
|
||
そうして、「# ほげほげ」を「&lt;h1&gt;ほげほげ&lt;/h1&gt;」に交換し、「[ほげほげ](/hogehoge.html)」を「&lt;a href=&quot;/hogehoge.html&quot;&gt;ほげほげ&lt;/a&gt;」に交換します。<br />
|
||
例えば、<code lang="">toiawase.html</code>ページで:</p>
|
||
<pre><code lang=""><span style="color:#000080;font-weight:bold"># 問い合わせ
|
||
</span><span style="color:#000080;font-weight:bold"></span>クソガキ株式会社\
|
||
地獄県鬼市死亡街6丁目6-6 サタンパレス666階\
|
||
最寄り駅:JL神様線 死後駅 徒歩約5ヶ月\
|
||
エレベーターがありません。\
|
||
[<span style="color:#008000;font-weight:bold">トップページへ</span>](<span style="color:#b44">/index.html</span>)
|
||
</code></pre><pre><code lang="">sed -i <span style="color:#b44">&#39;s/^# \(.*\)/&lt;h1&gt;\0&lt;\/h1&gt;/g&#39;</span> toiawase.html <span style="color:#080;font-style:italic">#h1タグ</span>
|
||
sed -i <span style="color:#b44">&#39;s/\\/&lt;br \/&gt;/g&#39;</span> toiawase.html <span style="color:#080;font-style:italic">#brタグ</span>
|
||
sed -i <span style="color:#b44">&#39;s/^\(.*\)/ \0/g&#39;</span> toiawase.html <span style="color:#080;font-style:italic">#4つ空白を入る</span>
|
||
sed -i <span style="color:#b44">&#39;s/\[\(.*\)\](\(.*\))/&lt;a href=&#34;\2&#34;&gt;\1&lt;\/a&gt;/g&#39;</span> toiawase.html <span style="color:#080;font-style:italic">#リンクタグ</span>
|
||
</code></pre><p>結果は下記ですね:</p>
|
||
<pre><code lang=""> &lt;<span style="color:#008000;font-weight:bold">h1</span>&gt;問い合わせ&lt;/<span style="color:#008000;font-weight:bold">h1</span>&gt;
|
||
クソガキ株式会社&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
地獄県鬼市死亡街6丁目6-6 サタンパレス666階&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
最寄り駅:JL神様線 死後駅 徒歩約5ヶ月&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
エレベーターがありません。&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">a</span> <span style="color:#b44">href</span><span style="color:#666">=</span><span style="color:#b44">&#34;/index.html&#34;</span>&gt;トップページへ&lt;/<span style="color:#008000;font-weight:bold">a</span>&gt;
|
||
</code></pre><p>その時から、マークダウンで書きましょう!!</p>
|
||
<pre><code lang="">mv index.<span style="color:#666">{</span>html,md<span style="color:#666">}</span>
|
||
mv toiawase.<span style="color:#666">{</span>html,md<span style="color:#666">}</span>
|
||
</code></pre><h3 id="indexmd">index.md</h3>
|
||
<pre><code lang=""><span style="color:#000080;font-weight:bold"># クソガキ株式会社へようこそ
|
||
</span><span style="color:#000080;font-weight:bold"></span>私達のサービスはクソ物凄いだぜ!!
|
||
</code></pre><h3 id="toiawasemd">toiawase.md</h3>
|
||
<pre><code lang=""><span style="color:#000080;font-weight:bold"># 問い合わせ
|
||
</span><span style="color:#000080;font-weight:bold"></span>クソガキ株式会社\
|
||
地獄県鬼市死亡街6丁目6-6 サタンパレス666階\
|
||
最寄り駅:JL神様線 死後駅 徒歩約5ヶ月\
|
||
エレベーターがありません。\
|
||
[<span style="color:#008000;font-weight:bold">トップページへ</span>](<span style="color:#b44">/index.html</span>)
|
||
</code></pre><h2 id="sedactive">sedでメニューのリンクを「active」タグを追加する方法</h2>
|
||
<p>まずはCSSで新しい行列を追加して下さい:</p>
|
||
<pre><code lang=""><span style="color:#666">...</span>
|
||
|
||
.<span style="color:#00f">active</span> {
|
||
<span style="color:#a2f;font-weight:bold">background</span>: <span style="color:#666">#ea44fb</span>;
|
||
<span style="color:#a2f;font-weight:bold">color</span>: <span style="color:#666">#000</span> <span style="color:#080">!important</span>;
|
||
<span style="color:#a2f;font-weight:bold">padding</span>: <span style="color:#666">4</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
}
|
||
</code></pre><p><code lang="">cat</code>でマージした後、下記の<code lang="">sed</code>コマンドを使ってこのタグを追加出来ます。<br />
|
||
今回は凄く簡単だわ〜</p>
|
||
<pre><code lang="">sed -i <span style="color:#b44">&#34;s/href=\&#34;\/\&#34;/href=\&#34;\/\&#34; class=\&#34;active\&#34;/g&#34;</span> index.html
|
||
sed -i <span style="color:#b44">&#34;s/href=\&#34;\/toiawase.html\&#34;/href=\&#34;\/toiawase.html\&#34; class=\&#34;active\&#34;/g&#34;</span> toiawase.html
|
||
</code></pre><h2 id="makesh">make.shの変更</h2>
|
||
<p>スクリプトはこれになりました:</p>
|
||
<pre><code lang=""><span style="color:#080">#!/bin/sh
|
||
</span><span style="color:#080"></span>rm -rf www/*
|
||
cp -v src/style.css www
|
||
<span style="color:#a2f">cd</span> src
|
||
|
||
<span style="color:#a2f;font-weight:bold">for</span> name in *.md; <span style="color:#a2f;font-weight:bold">do</span>
|
||
<span style="color:#b8860b">newname</span><span style="color:#666">=</span><span style="color:#b44">&#34;</span><span style="color:#a2f;font-weight:bold">$(</span><span style="color:#a2f">echo</span> <span style="color:#b44">&#34;</span><span style="color:#b8860b">$name</span><span style="color:#b44">&#34;</span> | sed -ne <span style="color:#b44">&#39;s/md/html/gp&#39;</span><span style="color:#a2f;font-weight:bold">)</span><span style="color:#b44">&#34;</span>
|
||
cp <span style="color:#b8860b">$name</span> <span style="color:#b8860b">$newname</span> <span style="color:#080;font-style:italic">#mdからhtmlにコピーする</span>
|
||
|
||
<span style="color:#080;font-style:italic"># マークダウンはHTML化</span>
|
||
sed -i <span style="color:#b44">&#39;s/^# \(.*\)/&lt;h1&gt;\1&lt;\/h1&gt;/g&#39;</span> <span style="color:#b8860b">$newname</span> <span style="color:#080;font-style:italic">#h1タグ</span>
|
||
sed -i <span style="color:#b44">&#39;s/\\/&lt;br \/&gt;/g&#39;</span> <span style="color:#b8860b">$newname</span> <span style="color:#080;font-style:italic">#brタグ</span>
|
||
sed -i <span style="color:#b44">&#39;s/^\(.*\)/ \0/g&#39;</span> <span style="color:#b8860b">$newname</span> <span style="color:#080;font-style:italic">#4つ空白を入る</span>
|
||
sed -i <span style="color:#b44">&#39;s/\[\(.*\)\](\(.*\))/&lt;a href=&#34;\2&#34;&gt;\1&lt;\/a&gt;/g&#39;</span> <span style="color:#b8860b">$newname</span> <span style="color:#080;font-style:italic">#リンクタグ</span>
|
||
|
||
<span style="color:#080;font-style:italic"># 合体</span>
|
||
cat include/header.html include/menu.html <span style="color:#b8860b">$newname</span> include/footer.html &gt;&gt; ../www/<span style="color:#b8860b">$newname</span>
|
||
<span style="color:#a2f">echo</span> <span style="color:#b44">&#34;&#39;src/</span><span style="color:#b8860b">$name</span><span style="color:#b44">&#39; -&gt; &#39;www/</span><span style="color:#b8860b">$newname</span><span style="color:#b44">&#39;&#34;</span>
|
||
|
||
<span style="color:#080;font-style:italic"># HTMLファイルはもう不要だ</span>
|
||
rm -rf <span style="color:#b8860b">$newname</span>
|
||
<span style="color:#a2f;font-weight:bold">done</span>
|
||
|
||
<span style="color:#a2f">cd</span> ../www
|
||
|
||
<span style="color:#080;font-style:italic"># 「active」タグを付く</span>
|
||
<span style="color:#a2f;font-weight:bold">for</span> name in *.html; <span style="color:#a2f;font-weight:bold">do</span>
|
||
<span style="color:#a2f;font-weight:bold">if</span> <span style="color:#666">[</span> <span style="color:#b8860b">$name</span> <span style="color:#666">=</span> <span style="color:#b44">&#39;index.html&#39;</span> <span style="color:#666">]</span>; <span style="color:#a2f;font-weight:bold">then</span>
|
||
sed -i <span style="color:#b44">&#34;s/href=\&#34;\/\&#34;/href=\&#34;\/\&#34; class=\&#34;active\&#34;/g&#34;</span> <span style="color:#b8860b">$name</span>
|
||
<span style="color:#a2f;font-weight:bold">else</span>
|
||
sed -i <span style="color:#b44">&#34;s/href=\&#34;\/</span><span style="color:#b8860b">$name</span><span style="color:#b44">\&#34;/href=\&#34;\/</span><span style="color:#b8860b">$name</span><span style="color:#b44">\&#34; class=\&#34;active\&#34;/g&#34;</span> <span style="color:#b8860b">$name</span>
|
||
<span style="color:#a2f;font-weight:bold">fi</span>
|
||
<span style="color:#a2f;font-weight:bold">done</span>
|
||
|
||
<span style="color:#a2f">cd</span> ..
|
||
</code></pre><p>ところで、こちらのプロジェクトのファイルは全部Gitlerにコミットしました。<br />
|
||
<a href="https://gitler.moe/TechnicalSuwako/sizutekipage/src/commit/11105976503e15388986a0d3b9cf211e6f9695cd">昨日のコミット</a><br />
|
||
<a href="https://gitler.moe/TechnicalSuwako/sizutekipage/src/commit/b50a5b45c3915c32b856c7fc5b07cc7bc3aa70dd">今日のコミット</a></p>
|
||
<p>以上</p>
|
||
|
||
|
||
</content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<id>blog/no-generator-easy-html.gmi</id>
|
||
<author><name>凛</name></author>
|
||
<title type="html">【HTML】静的サイトジェネレーター利用せず簡単に静的サイト管理する方法</title>
|
||
<published>2023-02-07T00:00:00Z</published>
|
||
|
||
<category term="jp"></category>
|
||
|
||
<category term="blog"></category>
|
||
|
||
<category term="html"></category>
|
||
|
||
<category term="ウエブサイト"></category>
|
||
|
||
<category term="ウエブ開発"></category>
|
||
|
||
<category term="linux"></category>
|
||
|
||
<category term="bsd"></category>
|
||
|
||
<link href="gemini://technicalsuwako.moe/blog/no-generator-easy-html.gmi" rel="alternate"></link>
|
||
<content type="html">
|
||
|
||
|
||
|
||
<p>手動で静的サイトを作るのは簡単ですが、ちょっと面倒くさいですので、みんなはCMS(WordPress、fc2等)を使います。<br />
|
||
でも、CMSは凄く重くて、遅くて、不安ですから、あたしみたいな方は静的サイトジェネレーターを使っています。<br />
|
||
今回はジェネレーター利用せず静的サイトを作って、管理する方法を紹介します。</p>
|
||
<h1 id="heading">インストール</h1>
|
||
<p>今回は特に新しいソフトのインストールするのは不要ですが、公開するため「rsync」だけをインストールする事が必要となります。<br />
|
||
でも、本日の記事は公開ステップを紹介しませんので、インストールしなくてはOKです。</p>
|
||
<h1 id="heading-1">フォルダーとファイルの創作</h1>
|
||
<p>まずは新しいフォルダーとファイルを創作しましょう。<br />
|
||
HTMLと言えば、ヘッダー、メニュー、コンテンツ、フッターが思い出しますわね。<br />
|
||
ですから、ヘッダー、メニュー、及びフッターは別々のフォルダーに貼りますね。</p>
|
||
<pre><code lang="">mkdir -p sizutekipage/<span style="color:#666">{</span>src,www<span style="color:#666">}</span>
|
||
mkdir sizutekipage/src/include
|
||
touch sizutekipage/src/<span style="color:#666">{</span>index,toiawase<span style="color:#666">}</span>.html
|
||
touch sizutekipage/src/include/<span style="color:#666">{</span>header,footer,menu<span style="color:#666">}</span>.html
|
||
touch sizutekipage/src/style.css
|
||
<span style="color:#a2f">cd</span> sizutekipage/src
|
||
</code></pre><p>ヘッダー、フッター、とメニューを作りましょう!</p>
|
||
<h2 id="includeheaderhtml">include/header.html</h2>
|
||
<pre><code lang=""><span style="color:#080">&lt;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.1//EN&#34; &#34;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&#34;&gt;</span>
|
||
&lt;<span style="color:#008000;font-weight:bold">html</span> <span style="color:#b44">xmlns</span><span style="color:#666">=</span><span style="color:#b44">&#34;http://www.w3.org/1999/xhtml&#34;</span> <span style="color:#b44">xml:lang</span><span style="color:#666">=</span><span style="color:#b44">&#34;ja&#34;</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">head</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">meta</span> <span style="color:#b44">content</span><span style="color:#666">=</span><span style="color:#b44">&#34;text/html; charset=utf-8&#34;</span> <span style="color:#b44">http-equiv</span><span style="color:#666">=</span><span style="color:#b44">&#34;content-type&#34;</span> /&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">title</span>&gt;クソガキ株式会社&lt;/<span style="color:#008000;font-weight:bold">title</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">link</span> <span style="color:#b44">rel</span><span style="color:#666">=</span><span style="color:#b44">&#34;stylesheet&#34;</span> <span style="color:#b44">type</span><span style="color:#666">=</span><span style="color:#b44">&#34;text/css&#34;</span> <span style="color:#b44">href</span><span style="color:#666">=</span><span style="color:#b44">&#34;/style.css&#34;</span> /&gt;
|
||
&lt;/<span style="color:#008000;font-weight:bold">head</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">body</span>&gt;
|
||
</code></pre><h2 id="includefooterhtml">include/footer.html</h2>
|
||
<pre><code lang=""> &lt;<span style="color:#008000;font-weight:bold">hr</span> /&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">center</span>&gt;
|
||
クソガキ株式会社
|
||
&lt;/<span style="color:#008000;font-weight:bold">center</span>&gt;
|
||
&lt;/<span style="color:#008000;font-weight:bold">div</span>&gt;
|
||
&lt;/<span style="color:#008000;font-weight:bold">body</span>&gt;
|
||
&lt;/<span style="color:#008000;font-weight:bold">html</span>&gt;
|
||
</code></pre><h2 id="includemenuhtml">include/menu.html</h2>
|
||
<pre><code lang=""> &lt;<span style="color:#008000;font-weight:bold">div</span> <span style="color:#b44">class</span><span style="color:#666">=</span><span style="color:#b44">&#34;menu&#34;</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">a</span> <span style="color:#b44">href</span><span style="color:#666">=</span><span style="color:#b44">&#34;/&#34;</span>&gt;トップ&lt;/<span style="color:#008000;font-weight:bold">a</span>&gt; |
|
||
&lt;<span style="color:#008000;font-weight:bold">a</span> <span style="color:#b44">href</span><span style="color:#666">=</span><span style="color:#b44">&#34;/toiawase.html&#34;</span>&gt;問い合わせ&lt;/<span style="color:#008000;font-weight:bold">a</span>&gt;
|
||
&lt;/<span style="color:#008000;font-weight:bold">div</span>&gt;
|
||
&lt;<span style="color:#008000;font-weight:bold">div</span> <span style="color:#b44">class</span><span style="color:#666">=</span><span style="color:#b44">&#34;container&#34;</span>&gt;
|
||
</code></pre><h2 id="stylecss">style.css</h2>
|
||
<pre><code lang=""><span style="color:#008000;font-weight:bold">body</span> {
|
||
<span style="color:#a2f;font-weight:bold">background</span>: <span style="color:#666">#000</span>;
|
||
<span style="color:#a2f;font-weight:bold">color</span>: <span style="color:#666">#fff</span>;
|
||
<span style="color:#a2f;font-weight:bold">margin</span>: <span style="color:#666">0</span>;
|
||
}
|
||
|
||
<span style="color:#008000;font-weight:bold">a</span> {
|
||
<span style="color:#a2f;font-weight:bold">color</span>: <span style="color:#666">#666</span>;
|
||
}
|
||
|
||
.<span style="color:#00f">menu</span> {
|
||
<span style="color:#a2f;font-weight:bold">background</span>: <span style="color:#666">#444</span>;
|
||
<span style="color:#a2f;font-weight:bold">font-size</span>: <span style="color:#666">14</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
<span style="color:#a2f;font-weight:bold">padding</span>: <span style="color:#666">8</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
<span style="color:#a2f;font-weight:bold">margin-bottom</span>: <span style="color:#666">12</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
}
|
||
|
||
.<span style="color:#00f">menu</span> <span style="color:#666">&gt;</span> <span style="color:#008000;font-weight:bold">a</span> {
|
||
<span style="color:#a2f;font-weight:bold">color</span>: <span style="color:#666">#ea44fb</span>;
|
||
}
|
||
|
||
.<span style="color:#00f">container</span> {
|
||
<span style="color:#a2f;font-weight:bold">background</span>: <span style="color:#666">#00f</span>;
|
||
<span style="color:#a2f;font-weight:bold">border</span>: <span style="color:#666">1</span><span style="color:#0b0;font-weight:bold">px</span> <span style="color:#a2f;font-weight:bold">solid</span> <span style="color:#666">#77a</span>;
|
||
<span style="color:#a2f;font-weight:bold">margin</span>: <span style="color:#a2f;font-weight:bold">auto</span>;
|
||
<span style="color:#a2f;font-weight:bold">width</span>: <span style="color:#666">100</span><span style="color:#0b0;font-weight:bold">%</span>;
|
||
<span style="color:#a2f;font-weight:bold">max-width</span>: <span style="color:#666">1200</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
<span style="color:#a2f;font-weight:bold">padding</span>: <span style="color:#666">4</span><span style="color:#0b0;font-weight:bold">px</span>;
|
||
}
|
||
</code></pre><h2 id="indexhtml">index.html</h2>
|
||
<pre><code lang=""> &lt;<span style="color:#008000;font-weight:bold">h1</span>&gt;クソガキ株式会社へようこそ&lt;/<span style="color:#008000;font-weight:bold">h1</span>&gt;
|
||
私達のサービスはクソ物凄いだぜ!!
|
||
</code></pre><h2 id="toiawasehtml">toiawase.html</h2>
|
||
<pre><code lang=""> &lt;<span style="color:#008000;font-weight:bold">h1</span>&gt;問い合わせ&lt;/<span style="color:#008000;font-weight:bold">h1</span>&gt;
|
||
クソガキ株式会社&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
地獄県鬼市死亡街6丁目6-6 サタンパレス666階&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
最寄り駅:JL神様線 死後駅 徒歩約5ヶ月&lt;<span style="color:#008000;font-weight:bold">br</span> /&gt;
|
||
エレベーターがありません。
|
||
</code></pre><h1 id="heading-2">コンパイル</h1>
|
||
<p>catコマンドを使って、ウエブサイトを作成しましょう!!<br />
|
||
まずはCSSファイルをコピーして下さい。</p>
|
||
<pre><code lang=""><span style="color:#a2f">cd</span> ..
|
||
cp src/style.css www
|
||
cat src/include/header.html src/include/menu.html src/index.html src/include/footer.html &gt;&gt; www/index.html
|
||
cat src/include/header.html src/include/menu.html src/toiawase.html src/include/footer.html &gt;&gt; www/toiawase.html
|
||
</code></pre><p>作成成功!!</p>
|
||
<h1 id="heading-3">スクリプト化</h1>
|
||
<p>しかし、毎回繰り返すのは面倒くさいですね。<br />
|
||
スクリプトを作りましょう!!</p>
|
||
<pre><code lang="">touch make.sh
|
||
chmod +x make.sh
|
||
nvim make.sh
|
||
</code></pre><h2 id="makesh">make.sh</h2>
|
||
<pre><code lang=""><span style="color:#080">#!/bin/sh
|
||
</span><span style="color:#080"></span>rm -rf www/*
|
||
cp -v src/style.css www
|
||
<span style="color:#a2f">cd</span> src
|
||
|
||
<span style="color:#a2f;font-weight:bold">for</span> name in *.html; <span style="color:#a2f;font-weight:bold">do</span>
|
||
cat include/header.html include/menu.html <span style="color:#b8860b">$name</span> include/footer.html &gt;&gt; ../www/<span style="color:#b8860b">$name</span>
|
||
<span style="color:#a2f">echo</span> <span style="color:#b44">&#34;&#39;src/</span><span style="color:#b8860b">$name</span><span style="color:#b44">&#39; -&gt; &#39;www/</span><span style="color:#b8860b">$name</span><span style="color:#b44">&#39;&#34;</span>
|
||
<span style="color:#a2f;font-weight:bold">done</span>
|
||
|
||
<span style="color:#a2f">cd</span> ..
|
||
</code></pre><p>作成するには、「sizutekipage」フォルダーから<code lang="">./make.sh</code>を実行して下さい。<br />
|
||
ね、簡単でしょ?</p>
|
||
<p>以上</p>
|
||
|
||
|
||
</content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<id>blog/thinkpad-t43-ssd-install-way.gmi</id>
|
||
<author><name>凛</name></author>
|
||
<title type="html">【ハード】IBM ThinkPad T43にSSDを入る方法</title>
|
||
<published>2023-02-03T00:00:00Z</published>
|
||
|
||
<category term="jp"></category>
|
||
|
||
<category term="blog"></category>
|
||
|
||
<category term="linux"></category>
|
||
|
||
<category term="bsd"></category>
|
||
|
||
<category term="ハードウェア"></category>
|
||
|
||
<category term="ノートパソコン"></category>
|
||
|
||
<category term="openbsd"></category>
|
||
|
||
<link href="gemini://technicalsuwako.moe/blog/thinkpad-t43-ssd-install-way.gmi" rel="alternate"></link>
|
||
<content type="html">
|
||
|
||
|
||
|
||
<p>秋葉原のジャンク通りでやっとIBM ThinkPad T43のめちゃくちゃ古いノートパソコンを見つけました。<br />
|
||
勿論SSDなしで、金額は6,800円でした。</p>
|
||
<p><img src="https://ass.technicalsuwako.moe/t43-ssd/qlWBD5gMQqqU8QAN2gEryQ.jpg" alt="" /></p>
|
||
<p>でも、問題は一つがあります:SSDを入れないってことです。<br />
|
||
T43の時代のパソコンはSATAじゃなくて、IDEのハードディスクを使いましたから。<br />
|
||
SSDはSATAに変わった時後で作られましたので、IDE系SSDが存在しません。<br />
|
||
そうして、IDE系HDDを見つけるのは珍しいです。</p>
|
||
<p>でも、一つの方法がありますわ。<br />
|
||
mSATA→IDE交換アダプターを使って安くて簡単にSSDを使えます。</p>
|
||
<p>使ったやつは、<a href="https://www.amazon.co.jp/gp/product/B00EUXS7WG">KRHK-MSATA/I9</a>と<a href="https://www.amazon.co.jp/gp/product/B07GZFGD2B">Zheino M3 (256 GB)</a>です。<br />
|
||
買った時、金額は6,297円でした。</p>
|
||
<p><img src="https://ass.technicalsuwako.moe/t43-ssd/PO3316IiQyiTgVLQWSesFA.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/Lp9-nNNCTM6j4ZN4rwJg2A.jpg" alt="" /><br />
|
||
ちなみに、SSDはサイズの比較ためです。<br />
|
||
それ以外特に関係がありません。</p>
|
||
<p><img src="https://ass.technicalsuwako.moe/t43-ssd/ynKP6u4tRoqAkCExe2RkZg.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/kRG-xU1uSlqvk6yhP3S1aQ.jpg" alt="" /></p>
|
||
<p>次の問題は、普通に入るのは無理でした。<br />
|
||
しょうがないですが、完全に分解しないと、SSDを入れないらしい。(写真を取りませんでしたが)</p>
|
||
<p>でも、分解して、SSDを入って、再組み立ったら、ノートパソコンがやっとSSDを読められました!!<br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/12GTLfI9RZiXZu-5Do1X3Q.jpg" alt="" /></p>
|
||
<p>次はOSのインストールですね。<br />
|
||
メモリは2GB以上で無理ですので、古いOSを利用しか出来ない感じですね。<br />
|
||
でも、ネットで古いOSを使うのは凄く危険かしら。<br />
|
||
そうして、プロセサーは32-bitですので、新しいOSの選びは少ないのです。<br />
|
||
ですから、OpenBSDを入りました。</p>
|
||
<p><img src="https://ass.technicalsuwako.moe/t43-ssd/IBlRnwW_SpqusPmb7zKrTQ.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/JZfynYBUSkaaziwsj7ML1A.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/D6YGneiMQRqoAX50IG7o6A.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/Zc8inzNGQlKKPrOePtsRYw.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/3HVQMjXPQviCwY-9dkugzA.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/ba1d1zq7TNyHSxJ6nslMOQ.jpg" alt="" /></p>
|
||
<p>出たー出た!!出ったーーー<br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/pwpPRGKJS169B3GNYXOnNw.jpg" alt="" /><br />
|
||
<img src="https://ass.technicalsuwako.moe/t43-ssd/Z5toPySHRu2HvaS2LzkKtg.jpg" alt="" /></p>
|
||
<p>以上</p>
|
||
|
||
|
||
</content>
|
||
</entry>
|
||
|
||
<entry>
|
||
<id>blog/access-network-wireguard.gmi</id>
|
||
<author><name>凛</name></author>
|
||
<title type="html">【セキュリティ】Wireguardを使って安全に自宅のネットワークをアクセスする方法</title>
|
||
<published>2023-01-17T00:00:00Z</published>
|
||
|
||
<category term="blog"></category>
|
||
|
||
<category term="jp"></category>
|
||
|
||
<category term="linux"></category>
|
||
|
||
<category term="bsd"></category>
|
||
|
||
<category term="セキュリティ"></category>
|
||
|
||
<category term="ネットワーク"></category>
|
||
|
||
<link href="gemini://technicalsuwako.moe/blog/access-network-wireguard.gmi" rel="alternate"></link>
|
||
<content type="html">
|
||
|
||
|
||
|
||
<p>また会社員になったから、あんま自宅にいない状況となりました。<br />
|
||
セキュリティのため、私のサーバーは:80と:443以外自宅だけからアクセス出来る様に設定しました。<br />
|
||
でも、会社にいながらアクセス出来たら良いなぁと思いましたので、今回はWireguardで安全に自宅のネットワークをアクセスする方法を教えると思います。</p>
|
||
<p>ここの記事で:</p>
|
||
<ul>
|
||
<li>VPSはOpenBSD</li>
|
||
<li>ゲートウェイはDevuan</li>
|
||
<li>ノートパソコンとゲームパソコンはArtix Linux</li>
|
||
</ul>
|
||
<p>記事の場合、「ゲートウェイ」は自宅のネットワーク内のサーバーで、VPSはネットワーク外のサーバーと意味です。</p>
|
||
<p>ソフトのインストールコマンド以外全部のコマンドは全部のLinuxディストリビューション及びBSD OSで同じです。<br />
|
||
うまく出来たら、ノートパソコン→VPS→ゲートウェイ→ゲームパソコンのログインは可能となります。<br />
|
||
ここの場合、Artix→OpenBSD→Devuan→Artixですね。</p>
|
||
<p>ノート→VPS→ゲーム(Artix→OpenBSD→Artix)も可能ですが、自宅ネットワークで複数パソコンやサーバー(あたしは10台ぐらい)があれば、1台のゲートウェイがあった方が良いです。<br />
|
||
そうしてセキュリティの為、SSHとWireguardしか何も実行されていないサーバーの方が安全ですね。</p>
|
||
<h1 id="vps">VPS</h1>
|
||
<p>OpenBSDを使ってVPSなら、ConoHa又はVultrを勧めます。<br />
|
||
ConoHaのOpenBSDイメージは古いバージョンですので、まずは最新バージョンまで「pkg_add -ui」及び「sysupgrade」コマンドを実行する事が必要です。<br />
|
||
どっちでもで、一番安いVPSは十分です。</p>
|
||
<h1 id="heading">買い物</h1>
|
||
<p>まずは専用サーバーを買ってみよっか!<br />
|
||
あれば、Lenovo ThinkCentre又はNECのジャンク品は一番勧めますが、結局何でも良いです。<br />
|
||
東京に近く住んだら、秋葉原のジャンク通りで2000~4000円で買えます。<br />
|
||
あとはSSDを買うのは必要ですが、小さいSSDは大丈夫です。<br />
|
||
ACケーブル及びイーサネットケーブルも必要です、なければキーボードとモニタも必要ですが、すでに持ってるやつを使いましょう。<br />
|
||
まとめて5千円でサーバーの購入が可能です。</p>
|
||
<h1 id="devuan">ゲートウェイでDevuanのインストール</h1>
|
||
<p>いつでも通りDevuanをインストールしましょう。<br />
|
||
でもサーバーですので、XFCEじゃなくて、ベースインストーラーを使って下さい。</p>
|
||
<h2 id="ssh">SSHのセキュリティ対策</h2>
|
||
<p>インストールする後、セキュリティ対策の為、下記のステップは必要です。</p>
|
||
<h3 id="vps-1">VPSとゲートウェイの側</h3>
|
||
<p>普通ユーザー作って下さい。<br />
|
||
注意:Devuanの場合、wheelじゃなくて、sudoです。</p>
|
||
<pre><code lang="">useradd -m (ユーザー名)
|
||
passwd (ユーザー名)
|
||
usermod -G wheel (ユーザー名)
|
||
su -l (ユーザー名)
|
||
mkdir ~/.ssh
|
||
touch ~/.ssh/authorized_keys
|
||
</code></pre><h3 id="heading-1">すべての側</h3>
|
||
<p>初めての場合、SSHキーを作成して下さい。</p>
|
||
<pre><code lang="">ssh-keygen -t ed25519
|
||
</code></pre><p>そのままEnterキーを押して下さい。<br />
|
||
パスワードを入らないで下さい。</p>
|
||
<pre><code lang="">cat ~/.ssh/id_ed25519.pub
|
||
</code></pre><p>出力をコピーして、</p>
|
||
<ul>
|
||
<li>Artixのノートパソコンの内容はOpenBSDのVPSの「~/.ssh/authorized_keys」に貼って</li>
|
||
<li>OpenBSDのVPSの内容はDevuanのゲートウェイのものに貼って</li>
|
||
<li>Devuanのゲートウェイの内容はArtixのゲームパソコンのものに貼って</li>
|
||
</ul>
|
||
<p>「/etc/ssh/sshd_config」ファイルを編集して下さい。</p>
|
||
<pre><code lang="">...
|
||
PermitRootLogin no
|
||
...
|
||
PasswordAuthentication no
|
||
...
|
||
</code></pre><p>SSHサービスの再起動。</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Devuan</th>
|
||
<th>Artix (runitの場合)</th>
|
||
<th>OpenBSD</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>service ssh restart</td>
|
||
<td>sv restart sshd</td>
|
||
<td>rcctl restart sshd</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>まだVPS→ゲートウェイのログインは不可能ですが、そろそろ可能となります。</p>
|
||
<h1 id="wireguard">Wireguardの設置</h1>
|
||
<h2 id="vps-2">VPS側</h2>
|
||
<p>じゃ、始めましょう!<br />
|
||
まずはパッケージをインストールしましょう。</p>
|
||
<pre><code lang="">doas pkg_add wireguard-tools
|
||
</code></pre><p>rootになって、Wireguardのコンフィグを作成しましょう。</p>
|
||
<pre><code lang="">doas su
|
||
mkdir /etc/wireguard
|
||
chmod <span style="color:#666">700</span> /etc/wireguard
|
||
<span style="color:#a2f">cd</span> /etc/wireguard
|
||
|
||
wg genkey | tee private.key | wg pubkey &gt; public.key
|
||
</code></pre><h2 id="heading-2">ゲートウェイ側</h2>
|
||
<p>大体同じステップですね。</p>
|
||
<pre><code lang="">sudo apt install wireguard-tools
|
||
</code></pre><pre><code lang="">sudo su
|
||
mkdir /etc/wireguard
|
||
chmod <span style="color:#666">700</span> /etc/wireguard
|
||
<span style="color:#a2f">cd</span> /etc/wireguard
|
||
|
||
wg genkey | tee private.key | wg pubkey &gt; public.key
|
||
vi /etc/wireguard/wg0.conf
|
||
</code></pre><pre><code lang=""><span style="color:#666">[</span>Interface<span style="color:#666">]</span>
|
||
<span style="color:#b8860b">PrivateKey</span> <span style="color:#666">=</span> (ゲートウェイの「/etc/wireguard/private.key」の内容)
|
||
<span style="color:#b8860b">Address</span> <span style="color:#666">=</span> 192.168.10.2/24
|
||
|
||
<span style="color:#666">[</span>Peer<span style="color:#666">]</span>
|
||
<span style="color:#b8860b">PublicKey</span> <span style="color:#666">=</span> (VPSの「/etc/wireguard/public.key」の内容)
|
||
<span style="color:#b8860b">Endpoint</span> <span style="color:#666">=</span> (VPSのIPアドレス):443
|
||
<span style="color:#b8860b">AllowedIPs</span> <span style="color:#666">=</span> 0.0.0.0/0
|
||
</code></pre><h2 id="vps-3">VPS側</h2>
|
||
<pre><code lang="">vi /etc/wireguard/wg0.conf
|
||
</code></pre><pre><code lang="">[Interface]
|
||
PrivateKey = (VPSの「/etc/wireguard/private.key」の内容)
|
||
ListenPort = 443
|
||
|
||
[Peer]
|
||
PublicKey = (ゲートウェイの「/etc/wireguard/public.key」の内容)
|
||
AllowedIPs = 0.0.0.0/0
|
||
PersistentKeepalive = 25
|
||
</code></pre><pre><code lang="">sysctl net.inet.ip.forwarding<span style="color:#666">=</span><span style="color:#666">1</span>
|
||
vi /etc/sysctl.conf
|
||
</code></pre><pre><code lang="">net.inet.ip.forwarding=1
|
||
</code></pre><pre><code lang="">vi /etc/pf.conf
|
||
</code></pre><pre><code lang="">...
|
||
pass # establish keep-state
|
||
|
||
pass in on wg0
|
||
pass in inet proto udp from any to any port 443
|
||
pass out on egress inet from (wg0:network) nat-to (vio0:0)
|
||
...
|
||
</code></pre><pre><code lang="">pfctl -f /etc/pf.conf
|
||
</code></pre><h2 id="heading-3">ゲートウェイ側</h2>
|
||
<pre><code lang="">wg-quick up wg0
|
||
</code></pre><h1 id="heading-4">確認しましょう</h1>
|
||
<p>お疲れ様でした!!<br />
|
||
じゃ、ノートパソコンは違うネットワーク(例えば、スマホのWiFiホットスポット又はスタバの無料WiFi)に接続して、ノートパソコンからVPSにログインして下さい。<br />
|
||
VPSからゲートウェイにログインして下さい。<br />
|
||
ゲートウェイからネットワーク以内のゲームパソコンにログインして下さい。<br />
|
||
VPS→ゲートウェイにログインするには、IPアドレスは「192.168.10.2」となります。</p>
|
||
<p>今から世界中でどこでもから自宅のゲームパソコンをアクセス出来ます!!</p>
|
||
<p>以上</p>
|
||
|
||
|
||
</content>
|
||
</entry>
|
||
|
||
|
||
</feed>
|