Lycolog

今回は個人的なパスワードの生成ソリューションを軽く紹介します。

内容的にはキーボードの打鍵順をパターン化しておくことで、意味を持たない英字大・小文字、数字、記号混合の覚えやすいパスワードが生成できるといったものです。

具体的にどのように生成するかというと、下図のような方式でキーボードを打鍵するといった内容です。

打鍵開始位置や、打鍵方向、打鍵法則などを変えることで無数のパターンが作れるので、推測されづらく、割と色んなパスワードの制限を満たせると思います。これはActive Directoryなどで複雑なパスワードの定期更新が必要なケースなどでは有効だと考えています。

例えば以下の打鍵法則ではgyHU56&*がパスワードとして作れるますが、これはそこそこ推測しづらく、パスワードの要件を満たしやすいと思います。桁数とかは打鍵法則を弄れば伸ばせるので適宜対応出来るので自分だけの打鍵術を作れれば割といいかなという感じです。

仕事をしていてADのパスワードを忘れたみたいな話をしばしば聞くので、ちょっとしたノウハウとしてあげてみました。

ログイン時と非ログイン時でコードブロックの改行が変化し、見た目が破綻する問題に気がついたので解決法

問題の事象

ログイン状態だと正常に表示されるが、非ログイン状態だとスーパーリロードなどをすると表示が壊れる

ログイン時	非ログイン時

問題の原因と解決策

非ログイン時にHTML上から改行コードが消えるのが問題でした

解決策としてはダッシュボードからSANGO設定 → 高速化 → HTMLを圧縮してキャッシュするのチェックを外せば解消します

リモートワークをするにあたり私物PCと業務PCをシームレスに切り替えられ、かつ各環境に支障がないように整備している話。

構成図

構成内容

まず使い勝手の面で共通化したいものはKVM的な仕組みで共通化している。例えばキーボード、マウス、WebCamはUSB KVMを利用することで排他的に切り替えられるように、モニタも入力信号を分けることでどちらか片方のPCが生きていれば、先に起動したほうが自動で映るようにしている。これにより端末の電源とUSB KVMの切り替えボタンの2アクションによって環境を切り替えられるようにしている。

この環境では排他制御により同時に両方の端末を使うことが基本的にできないので、私物PCと業務PCを同時に起動する意味をなくしている。これによって基本的に私物PCと業務PCが疎通状態になり、セキュリティインシデントに至る機会を多少防いでいる。因みに同時に起動すると私物PC側のグラボがハングする事があるので、基本的に同時起動しないようにしている。

オーディオについては私物PC用のオーディオインターフェースをKVMに繋ぎたくないという理由から、それぞれの環境で分離するようにしている。

無線機器は一切使っておらず、全て有線で構成しているのもポイントだ。私物PC側についてはデスクトップ環境なので無線にする旨味が薄いことや、充電を嫌っている部分が大きい。業務PC側はノートなのでWiFiくらい使ってもよさそうだが、WiFiを使うとCPUパフォーマンスが悪くなることを知っているので使っていない（暗号化通信は地味にCPU負荷が高い）。無線の安定性を信じていないのも一つにある。ヘッドセットについては過去に無線にしたことが一応あるのだが一日中使っていると電池が持たない問題があり、やめた経緯がある。有線は安いし電池問題もないので気楽である。

主に使っているもの

あとがき

モニタ側でKVMを利用していないのは映像出力にDPとHDMIが混在している構成であることや、モニタ用のKVMが高価であること、元々MMORPGプレイヤーだったので、映像出力で間に余計なものを挟みたくなかったなどの事情がある。そもそも使わなくても切り替えられるなら態々導入する必要もない。

幸いMMOプレイヤー時代の資産として机や椅子、デュアルモニタなどの環境が一通りあったので、リモートワークをするにあたって追加で必要なものが多くなかったのは幸いであった。業務用のオーディオI/Fとヘッドセットはリモートワークをする前から仕事用で持っていたので追加支出ではなく、実際のところ、USB→HDMIアダプタとUSB KVMスイッチくらいしか買ってないので、3,000円程度の追加支出で済んでいる。

インターネット環境もMMORPGをプレイする場合、一定以上の速度とレイテンシの良さが求められるため、「フレッツ 光ネクスト マンション・スーパーハイスピードタイプ 隼」を契約している。いわゆる1Gbpsの回線契約だ。概ね下り360Mbps、上り460Mbps程度は安定して出る上、レイテンシも少ない。少なくとも高い応答性が求められるFF14でラグを感じたことはない。

参考までにこの記事を書いた時点でのfast.comの計測結果を以下に貼って置く。上りより下りが早い珍しめの結果が出たが、こんだけ出ていればまず何かの支障になることはない。

GitHubの無料アカウントを2つ持つことは規約で禁じられているため、例え個人用と業務用であっても2つは持てないという話がまことしやかにありますが、実は分けられるという話です。

規約違反の根拠

GitHubは利用規約でアカウントの要件として次のことを掲げており、そのまま読むと規約違反になります。

1 人の個人または 1 つの法人が複数の無料「アカウント」を保持することはできません (コンピュータアカウントも制御することを選択した場合、それは問題ありませんが、それはコンピュータの実行にのみ使用できます)

規約違反であるという説

次の記事では規約違反であるとされており、GitHub内部の人物からもその確認を取ったとされています。

• 全社的に会社用GitHubアカウントを廃止した件 - ZOZO TECH BLOG

規約違反ではないという説

次の記事では「会社側で有償のオーガニゼーションを契約し、仕事用アカウントを所属させていれば」規約違反でないとされています。

• GitHubで会社用とプライベートアカウントを分けよう(問題ないよ)

問い合わせてみた結果

個人的に納得できなかったのでギットハブ・ジャパン合同会社に問い合わせてみました。

結論としては公私混同を避けるため個人用と業務用で無料アカウントを2つ持つことは許容されているとのことでした。この規約の存在理由としては主にOSSでの荒らしの防止策のためということでしたので、会社側で有償のオーガニゼーションを契約するとかも特に不要という内容です。

プライベートのGitHubアカウントに業務の通知が貯まるのは嫌なので助かりました。理由としては通知が邪魔くさいことと、やっぱりプライベートと業務は分けときたいよねという思いが大きいです。

例えば兼用しているとSSOログインしていない状態でもGitHubサイト右上の通知アイコンは通知ありの状態になりますし、プライベートではSSOログイン出来ないため通知は消化できないですし、仮に出来たとしても業務時間外に消化したくないです。

またアカウントを業務とプライベートでごっちゃにしてると権利周りが面倒くさくなるため、それを避ける意味合いもあります。これは場合によっては功績として使えたりなどで、利点になることもありますが、個人的にそこはいいかなという感じです。

Markdownを使って快適にブログを書きたくない？書きたいですよね？そう、書きたい！
ではどうすればいいか？というのをこれから書いていきます。
JAMStackを使ってGitHub PagesとNext.js SSGでMarkdownブログを作ろう！みたいな人はブラウザバックをオススメします。

技術選定

• JAMStack
• はてなブログ
• WordPress

JAMStack

まずJAMStackは真っ先に除外します。ブログを書きたいのであってブログを作りたいわけではないからです。

またSSGだとクライアントサイドのレンダリングコストが重く、リッチなブログにしようとすると負荷がしんどい気がしています。恐らくSEO対策的にもCSRを妥協して極限までSSGしていないと厳しいのではないでしょうか？

はてなブログ

カスタマイズがすんごくだるい上に、真面目にやろうとするとクライアントサイドでHTMLをゴリゴリ書き換えたり、orderなどのハックに近いCSSを多用して擬似的に要素を移動させたりする必要があり、レイアウトを組むのが非常に面倒です。

エディタもしょぼいしカテゴリはないし（はてブロのカテゴリは実質的にタグなので）年会費が高い割に出来ることの制限が強い…。あんまSEOも強くなかったし、試しに使ってみたものの流入が激減…正直個人的にこれはですね。

WordPress

多分こいつが一番現実的な選択肢です。WP Githuber MDを使うことで不自由なくMarkdownを扱うことが出来ると思います。但し内蔵のPrism.jsはなんかいい感じに動いてくれないケースがあり、その場合はカスタマイズが必要です。

カスタマイズについてもプラグインやテーマが豊富にあり、改造も容易なのでローコストでリッチなものが実現しやすいと思います。またセルフホストなのでデータの取り回しの自由が効きやすいのも大きなポイントですね。

CMSは色々使ってきましたが、なんだかんだブログはWordPressが一番だなって思います。SEO対策もGoogle謹製のやつがあるし、特に何もしなくてもある程度なんとかなるのは強みだと思います。

カスタマイズ法

CSS

使っているテーマと整合性が取れるようにいい感じにします。私は Dracula for Prism.js を改造して使いました。

JS

私の場合は次のコードをヘッダタグの中に足して対処しました。特に内容の説明はしませんが、行番号とコピーボタンが出るようにしています。

<script src="https://unpkg.com/prismjs@1.28.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://unpkg.com/prismjs@1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('pre > code').forEach((codeEl) => {
      codeEl.className = codeEl.className === '' ? 'language-none' : codeEl.className;
      codeEl.className = codeEl.className.replace(/^sh$/, 'shell');
      codeEl.parentNode.className = 'line-numbers';
    });

    window.Prism.highlightAll();
  });
</script>