このブログはhugoを使って作成しています。 Hugoの何がいいかと言われれば、一番は静的なので軽いってところです。 ReactやVueでちょっとSPA作ろうとすると、すぐもっさりした動作になっちゃう＆コンポーネント管理が大変なので、僕にはHugoが結構刺さっています。 （まぁコンポーネント管理に関してはアトミックデザインで作ろうとした僕の自業自得なんですが。。） Hugoをいろいろいじりつつ、最近の記事でも早速Hugoを活用してSEO対策などを行っていました。 その中で、ShortCodeという機能がプログラマーの僕としてはワクワクが止まらない機能だったので、ちょっと作りたいものもあったのでついでに使いつつここで紹介します。 ShortCodeとは markdownファイルから、関数などを組み込んだテンプレートHTMLを呼び出せる機能です。 デフォルトでは以下のようなshortcodeが用意されています。（詳細はこちら） figure gist highlight param ref (relref) instagram tweet vimeo youtube youtubeを表示したい場合、shortcodeを使って動画のIDを引数として渡してあげれば簡単に実装できます。 {{< youtube w7Ft2ymGmfc >}} これ以外にも自分でshortcodeを作成して、組み込むことも可能です。 shortcodeで使われる構文はGo Templateというみたいです。 参考： Go Template、最高のプログラミング言語 #go-template - Qiita URLからタイトルを取得したaタグを生成するshortcode では本題です。 （前提として、Hugoのサイトはすでに用意してあるものとします。） まずはshortcodeの実装のためのディレクトリとHTMLファイルを準備します。 mkdir layouts/shortcodes touch layouts/shortcodes/url_title.html ファイルの準備ができたら、以下のようなコードを実装します。 resources.GetRemoteを使用してリンク先のコンテンツを取得し、titleタグと組み合わせてaタグを生成するshortcodeです。 早速使ってみましょう。 ...

まだ「完全に理解した」みたいな状態で書いていないので悪しからず。。 （理解したとは言っていない） もし間違っている部分あればコメントして頂けると嬉しいです。 Direct Connect とは - AWS Direct Connect 目次 目次 構築手順 1. Direct Connectを使用するためのConnectionを作成する 2. 仮想プライベートゲートウェイを作成する ASN（自律システム番号）とは BGP（ボーダーゲートウェイプロトコル）とは 3. 仮想インターフェースを作成する VLAN（仮想ローカルエリア・ネットワーク）とは オンプレミスサーバーのASN 仮想インターフェース作成時のその他入力項目 4. ルートテーブルに作成した仮想プライベートゲートウェイを設定する 5. セキュリティグループにDirect Connectで使用するIPを設定する 感想 参考 構築手順 なにはともあれ、実際にどうやって構築するのか見てみます。 このブログに丁寧にまとめられていました。 やさしいDirect Connect の構築 | Oji-Cloud この手順をまとめると、以下のようになります。 Direct Connectを使用するためのConnectionを作成する 仮想プライベートゲートウェイを作成する 仮想インターフェースを作成する ルートテーブルに作成した仮想プライベートゲートウェイを設定する セキュリティグループにDirect Connectで使用するIPを設定する 公式に乗っているフローはこんな感じ。 AWS Direct Connectとオンプレネットワークがどのように連結されるかを大まかに表した図 それぞれの手順にポイントがあります。 1. Direct Connectを使用するためのConnectionを作成する コネクションの作成方法として、「専用接続」と「ホスト型接続」の２種類があります。 AWS Direct Connectとは？基本を解説！メリット・デメリットから利用方法まで｜ブログ｜アイテック阪急阪神ITインフラ・クラウドソリューション それぞれ以下のような特徴があります。 専用接続 専用の物理回線を引く 複数のVPCを使用する場合、料金コストはこちらのほうがよい ホスト型接続 一つの物理回線をシェアする 一つのVPCであればこちらのほうが料金コストはよい また、契約方法も２種類存在します。 ...

SAAの問題で、ELB（Elastic Load Balancer）についての問題に躓いた。 そのため備忘録として残しておきます。 クロスゾーン負荷分散とは 複数のAZにまたがってサーバーが存在する場合に、すべてのサーバーに均等にリクエストを振り分ける機能です。 以下の図はクロスゾーン負荷分散が無効の場合のアーキテクチャです。 「Availability Zone A」には２つのサーバーがあり、それぞれに25％ずつリクエストの振り分けが行われます。 一方で「Availability Zone B」のサーバーは8つもあり、各サーバーは6.25％しかリクエストが振り分けられていません。 サーバーは合計して10個ありますが、均等にリクエストが振り分けられていないような状態になっています。 ここで、クロスゾーン負荷分散を有効にしてみます。 すると、AZ関係なくすべてのサーバーに10%ずつリクエストが振り分けられるようになりました。 これがクロスゾーン負荷分散の仕組みです。 どういう問題だった？ 複数のAZにまたがって複数のEC2インスタンスを起動していて、ELBを使用してどうやって均等にリクエストを割り振るかといった問題でした。 クロスゾーン負荷分散という機能を知らず、選択肢の中にRoute53の加重ルーティングを使用するというものがあり、それを選択してしまいました。。悔しい〜 参考 Elastic Load Balancing の仕組み

当ブログにもGoogleAnalyticsを仕込んでみたんですが、その際に「設定したのに反映されていない！なんで！？」みたいなことがあったので。 公式に参考ページがあったので、これをもとにGoogleAnalyticsを仕込んでみました。 ただ、設定したうえでこのブログにアクセスしてみても、閲覧数がカウントされませんでした。 まじかーと思っていろいろ調べてみたんですが、ふとブラウザのDevToolから開いてみると… GoogleAnalyticsのコードが別のものに差し替わっている 謎の「uBlock Origin」というブラウザ拡張機能が実装したコードになっています。 更に調べていくと、私の使用しているブラウザが関係していることがわかりました。 使用しているブラウザがBraveなのですが、デフォルトでコードを置き換えるようになっていたようです。 サイト機能に影響を与えずトラッキングコードを置換 試しにFireFoxでアクセスしたら、ちゃんとユーザー数が反映されるようになりました。 GoogleAnalyticsから見たユーザー数 ブラウザのセキュリティが高いがゆえに起きた事象ですが、勉強になりました。 参考 Brave connects to googletagmanager.com · Issue #14027 · brave/brave-browser · GitHub このブログでは、GoogleAnalyticsに自分のアクセスを反映させない方法として紹介されています。なるほど。。 Googleアナリティクスで自分のアクセスを除外する方法 | sinpe-Blog

まずは以下の表をご覧ください。 このIOPSの値とかが結構SAAで問題として出題されるんですが、これが難しい。。 Amazon EBS ボリュームの種類 どうしたもんかと思ったんですが、問題で出されるときはIOPSとスループットが最適なストレージはどれかというものが多いので、その２点に絞ってまとめていきます。 IOPSだけで考える IOPSだけで考えると、その性能は以下のような順番に並べ変えられます。 io2 Block Express(256,000) »» io2 == io1 (64,000) »» gp3 == gp2 (16,000) »» st1 (500) »» sc1 (250) なんかどんどんインフレしていますね。 （ドラゴンボールの戦闘力？） スループットだけで考える 同じように、スループットも並べ替えてみます。 io2 Block Express(4,000 MiB/秒) »» gp3 == io2 == io1 (1,000 MiB/秒) »» st1 (500 MiB/秒) »» gp2 == sc1 (250 MiB/秒) 面白いことに、gp2（旧世代の汎用SSD）とsc1（コールドストレージ）のスループットが同じという結果になりました。 そもそもIOPSとスループットってなんだっけ？ ここまでやっていて、そもそもの言葉の定義を忘れてしまったので再度まとめておきます。 IOPS（Input/Output Per Second）：1秒あたりにディスクが処理できるI/Oアクセス数のこと スループット：単位時間（上記の場合は秒）あたりに処理できるデータ量のこと スループット とは ストレージのIOPS性能がアプリケーションに与える重要性 まとめ 基本的な概念のはずなんですが、ちょっと離れるとすぐ忘れちゃいますね。。 気をつけねば。。

SAAの問題で間違えたため備忘録。 EC2でインスタンス生成をした際、DNS名が割り振られないことがあります。 その場合、マネジメントコンソールのVPCの設定から、以下の設定がされているか確認してください。 DNS解決を有効化が「true」 DNSホスト名を有効化が「true」 ただこの値、基本的にはどちらもtrueがデフォルトなので、何らかの意図があって編集していないと変更されません。 もしも変更されている場合は確認したほうが良いかもしれません。

SEO対策として、一応このブログにもパーマリンクを仕込むか〜〜〜となったときの備忘録。 ただ僕はそもそもパーマリンク自体あんまり良くわかってなかったので、そこから調べました。 そもそもパーマリンクって？ SEO対策の一環として、ページに振られるURLを固有のものにすることです。 パーマリンクとは？SEOへの影響や注意点について解説 hugoの場合、デフォルト設定のままだと、タイトルとかディレクトリ構造をリファクタリングするとページURLも変わっちゃうので、せっかく検索して上位に来てもURLが変わっちゃったら全部台無しになっちゃいます。 それを防ぐためのパーマリンクです。 Hugoでパーマリンクは設定できる？ 結論から言えば、公式でパーマリンクを生成する方法はありません。 前述の通り、Hugoが生成するページリンクは記事タイトルやディレクトリ構成に影響するため、後にタイトルを変えるといったケースがある場合にはそれに対応できません。 逆に言えば、そういった変更を今後一切行わないのであれば別にデフォルト設定のままでも十分ということになります。 なので、ここではhugoのテンプレート構文を利用してIDを生成する関数を実装します。 単純にランダムに英数字を並べかるだけでは味気ないので、せっかくなので現在時刻を元にしたmd5ハッシュを使ってID生成します。 archetypes/default.mdを開いて、以下のような実装を追記します。 --- title: "{{ replace .Name "-" " " }}" slug: "{{ template "permanentId" }}" date: {{ .Date }} draft: true --- {{ define "permanentId" -}} {{ md5 now.Unix }} {{- end -}} ハッシュ値はslugに設定しました。 次に、config.tomlからブログのパスにslugを参照するように設定します。 [permalinks] posts = "/:slug/" （postsの部分はcontentの名前によって変えてください） これであとはhugo newで記事を作ると、slugにハッシュ値が設定されるようになり、結果としてURLが時刻を元にしたmd5ハッシュ値になっています。 感想 Hugoおもしろい 参考 Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説 Hugo でサイト構造を変えてもページの URL が変わらないようにする (Permalink) Hugo テンプレート内で define による部分テンプレート定義を行う（関数もどき） Hugo の URL をカスタマイズする

ブログの中でスクショを乗せることがあるんですが、Ubuntuの標準アプリで撮ったスクリーンショットのファイル名が、デフォルトだと空白文字を含んだ状態で保存されてしまいます。 これをブログに載せようと思ったら、空白文字をいちいちURLエンコードしないといけないことに気づいてしまいました。 そこで、あれこれやって空白文字をアンダースコアに置き換えて保存する方法を見つけたので共有します。 どうやったか まず標準アプリでフォーマットを指定できるか調べてみましたが、これはどうやらできないみたいです。 （設定項目に名前のフォーマットを指定するプロパティがありませんでした。） dconfエディターで確認した様子 そこで、しょうがないのでスクリーンショットが保存されるディレクトリを監視して、ファイルが作成されたらファイル名を空白文字からアンダースコアに書き換えるshを実装しました。 （ちなみに、shの実装は全部ChatGPTにおまかせしちゃいました。） 監視のためのサービスはsystemdに登録し、再起動してもちゃんと動いてくれるようにしました。 実装手順 まずはディレクトリ監視に必要なライブラリをインストールしておきます。 sudo apt install inotify-tools インストールできたら、スクリーンショットの保存先ディレクトリを監視してファイル名を置き換えるshを実装します。 以下が作成したshファイルです。 #!/bin/bash ### BEGIN INIT INFO # Provides: screenshot_monitor # Required-Start: $remote_fs $syslog # Required-Stop: $remote_fs $syslog # Default-Start: 2 3 4 5 # Default-Stop: 0 1 6 # Short-Description: Screenshot Monitor # Description: Monitors directory for new screenshots and performs actions ### END INIT INFO # スクリーンショットの保存先ディレクトリ screenshot_dir="/home/[username]/Pictures/スクリーンショット" # 監視対象のイベントを指定してinotifywaitを実行し、新しいファイルが追加された場合にスクリプトを実行する inotifywait -m -e create -e moved_to "$screenshot_dir" | while read -r directory event filename; do # スペースをアンダースコアに置換 new_filename=${filename// /_} new_filepath="$screenshot_dir/$new_filename" # ファイル名の変更 mv "$directory$filename" "$new_filepath" done （[username]の部分は自身のユーザー名に置き換えてください） ...

SAAの試験勉強で間違えた問題がSCPについての問題だったので少しまとめました。 SCPとは SCP（サービスコントロールポリシー）は、AWS Organizationsにおける組織のアクセス制御に関する設定のことです。 一人のIAMユーザーがある組織に属していたとした場合で考えてみます。 そのIAMユーザーにはIAMポリシーとして「EC2」「RDS」「S3」へのフルアクセス権限が振られていたとします。 しかし、このIAMユーザーの所属する組織のSCPでは「EC2」「ECS」「CloudWatch」のフルアクセス権限が振られています。 この場合どうなるかというと、「EC2」へのフルアクセスのみ可能になります。 ベン図にするとわかりやすいです。 このような形で権限の制御は行われるので、アクセス制御の設計を行う際は気をつけねば。。

NATゲートウェイってどこに設置するんだっけ…？となったので。 NAT ゲートウェイを設定してみる - EC2 NATゲートウェイとは プライベートサブネットに配置されたリソースがインターネットに安全にアクセスするための方法です。 NATゲートウェイを設置することで、リソースは直接インターネットに晒されることなく安全に更新データなどのリクエストが可能になります。 使い方 まずNATゲートウェイはパブリックサブネットに設置します。 次に、プライベートサブネットのルートテーブルに、設置されたNATゲートウェイへのルートを追加します。 これでプライベートサブネットはNATゲートウェイを通じてインターネットにリクエストすることができるようになります。 NATゲートウェイだけでインターネットアクセスができる？ 踏み台となるサーバーがなければできません。 インターネットにアクセスするまでのフローはこんな感じです。