feat(blog/content): update post /posts/2025-01-08/phperkaigi-2023-tokens-q1/

3 files changed, 30 insertions, 19 deletions

diff --git a/vhosts/blog/public/posts/2025-01-08/phperkaigi-2023-tokens-q1/index.html b/vhosts/blog/public/posts/2025-01-08/phperkaigi-2023-tokens-q1/index.html
index 02fa17d7..7b7151ca 100644
--- a/vhosts/blog/public/posts/2025-01-08/phperkaigi-2023-tokens-q1/index.html
+++ b/vhosts/blog/public/posts/2025-01-08/phperkaigi-2023-tokens-q1/index.html
@@ -65,6 +65,9 @@
               <li class="revision">
                 <time datetime="2025-01-08">2025-01-08</time>: 公開
               </li>
+              <li class="revision">
+                <time datetime="2025-01-11">2025-01-11</time>: 読みやすさのため一部の文言を調整
+              </li>
             </ol>
           </section>
           <section id="section--intro">
@@ -79,15 +82,15 @@
             </div>
              
             <p>
-               2023-03-23 から 2023-03-25 にかけて開催された <a href="https://phperkaigi.jp/2023/">PHPerKaigi 2023</a> では、弊社デジタルサーカス株式会社からトークン問題を出題した。 「トークン問題」とは、PHPerKaigi 2023 でおこなわれた PHPer チャレンジと呼ばれる企画で使われたもので、この記事で説明するような問題を解くと、「PHPer トークン」と呼ばれる「#」から始まる文字列を得ることができる。参加者がこのトークンを集めると、景品などが得られるという仕組みである。 
+               2023-03-23 から 2023-03-25 にかけて開催された <a href="https://phperkaigi.jp/2023/">PHPerKaigi 2023</a> では、PHPer チャレンジという企画がおこなわれた。 PHPer チャレンジとは、スポンサーのパンフレットやカンファレンス会場などから「#」記号で始まる文字列を集め、景品などを得るという企画である。 この文字列は「PHPer トークン」と呼ばれている。弊社<a href="https://www.dgcircus.com/">デジタルサーカス株式会社</a>からは、トークン問題という形で、PHP に関する問題を解くと PHPer トークンが得られるようになっている問題を出題した。 
             </p>
              
             <p>
-              <a href="/posts/2023-04-04/phperkaigi-2023-report/">PHPerKaigi 2023 の参加レポ</a> でも書いたとおり、この年のトークン問題は「昨年の PHPerKaigi 2022 が終わった段階から作り始め、約半年かけて制作」された。PHPerKaigi 当日も <a href="/slides/2023-03-25/phperkaigi-2023-tokens/">PHPer チャレンジ解説セッション</a> という形で解説の機会を頂いたのだが、せっかくなので記事の形でも残しておこうと思う。 
+              <a href="/posts/2023-04-04/phperkaigi-2023-report/">PHPerKaigi 2023 の参加レポ</a> でも書いたとおり、この年のトークン問題は「昨年の PHPerKaigi 2022 が終わった段階から作り始め、約半年かけて制作」された。 PHPerKaigi 当日も <a href="/slides/2023-03-25/phperkaigi-2023-tokens/">PHPer チャレンジ解説セッション</a> という形で解説の機会を頂いたのだが、せっかく時間をかけて作題したので記事の形でも残しておこうと思う。 
             </p>
              
             <p>
-               この記事は、全5問ある中の第1問について解説する。他の問題については以下のリンクを参照のこと。 
+               この記事では、全5問ある中の第1問について解説する。他の問題については以下のリンクを参照のこと。 
             </p>
              
             <ol>
@@ -111,6 +114,10 @@
                 第5問 (TODO: 執筆中)
               </li>
             </ol>
+             
+            <p>
+               それぞれの問題はこちらの GitHub リポジトリ (<a href="https://github.com/nsfisis/PHPerKaigi2023-tokens">nsfisis/PHPerKaigi2023-tokens</a>) からも閲覧できる。 
+            </p>
           </section>
            
           <section id="section--quiz">
@@ -126,7 +133,7 @@
           <section id="section--how-to-solve">
             <h2><a href="#section--how-to-solve">解き方</a></h2> 
             <p>
-               まずはトークンを得る方法を解説なしに説明する。次のように実行する。 
+               まずはトークンを得る方法を解説抜きで説明する。次のように実行する。 
             </p>
              
             <pre class="highlight"><code>$ echo &quot;#iwillblog&quot; | php Q1.png &gt;/dev/null</code></pre>
@@ -139,7 +146,7 @@
           <section id="section--commentary">
             <h2><a href="#section--commentary">解説</a></h2> 
             <section id="section--commentary--read-as-image">
-              <h3><a href="#section--commentary--read-as-image">画像として読む</a></h3> 
+              <h3><a href="#section--commentary--read-as-image">画像として解釈する</a></h3> 
               <p>
                  まずは素直に画像として見てみよう。 全体は QR コードになっている。適当な QR コードリーダで読み込むと、次のようなテキストが表示されるはずだ。 
               </p>
@@ -165,7 +172,7 @@
 401 Unauthorized</code></pre>
                
               <p>
-                 すでに<a href="#section--how-to-solve">「解き方」の節</a>で示したように、パスワードである PHPer トークンは「#iwillblog」で、これを与えると正解のトークンが得られる。 
+                 すでに<a href="#section--how-to-solve">「解き方」の節</a>で示したように、パスワードである PHPer トークンは「#iwillblog」である。これを与えて実行すると正解のトークンが得られる。 
               </p>
                
               <p>
@@ -214,7 +221,7 @@
               </p>
                
               <p>
-                 この2つの事実を使って、この画像ファイルは次のような構造になっていた。 
+                 この画像ファイルは次のような構造になっていた。 
               </p>
                
               <ol>
@@ -244,7 +251,11 @@
               </ol>
                
               <p>
-                <code>strings</code> コマンドを使うと、隠されたデータを浮き彫りにできる。 
+                 PNG ファイルとして読むときは PNG フッタ以降は無視され、PHP スクリプトとして読むときは PHP タグ以前が無視されるという仕掛けである。 
+              </p>
+               
+              <p>
+                <code>strings</code> コマンドを使うと、隠されたデータを簡単に閲覧できる。 
               </p>
                
               <pre class="highlight"><code>IHDR
@@ -260,13 +271,13 @@ $h = $b[24]+2;
 // (以下略)</code></pre>
                
               <p>
-                <code>IHDR</code> や <code>IEND</code> は PNG 画像の一部である。<code>&lt;?php</code> からが実際のプログラムになっている。 もちろんこれを PHP プログラムとして動かすと、PHP タグより前にある PNG 画像としてのデータはそのまま標準出力へと出力されてしまう。 それを防ぐため、QR コードを読み込んだときの実行方法には 
+                <code>IHDR</code> や <code>IEND</code> が PNG 画像の一部で、<code>&lt;?php</code> からが実際のプログラムになっている。 もちろんこれを PHP プログラムとして動かすと、PHP タグより前にある PNG 画像としてのデータはそのまま標準出力へと出力されてしまう。 それを防ぐため、QR コードを読み込んだときの実行方法 
               </p>
                
               <pre class="highlight"><code>Guess password. $ echo &quot;password&quot; | php Q1.png &gt;/dev/null</code></pre>
                
               <p>
-                 標準出力を捨てるよう <code>&gt;/dev/null</code> と指定されている。 
+                 には標準出力を捨てるよう <code>&gt;/dev/null</code> と指定されている。 
               </p>
                
               <p>
@@ -277,7 +288,7 @@ $h = $b[24]+2;
             <section id="section--commentary--php-program">
               <h3><a href="#section--commentary--php-program">実行される PHP プログラム</a></h3> 
               <p>
-                 画像の正体がわかったところで、画像に隠されていた PHP プログラムについて見ていこう。先ほどは一部しか記載しなかったので、全体を載せる。 なお、雑にゴルフしながら書いたので、空白こそ残しているものの可読性は非常に低いことと思う。 
+                 画像の正体がわかったところで、画像に隠されていた PHP プログラムについて見ていこう。 先ほどは一部しか記載しなかったので、全体を載せる。 なお、ある程度ゴルフしながら書いたので、空白こそ残しているものの可読性は非常に低いことと思う。 
               </p>
                
               <pre class="highlight" language="php"><code class="highlight"><span class="hljs-meta">&lt;?php</span>
@@ -383,7 +394,7 @@ $h = $b[24]+2;
 <span class="hljs-title function_ invoke__">fwrite</span>(STDERR, <span class="hljs-title function_ invoke__">str_replace</span>(<span class="hljs-string">&#x27;403 Forbidden&#x27;</span>, <span class="hljs-string">&#x27;401 Unauthorized&#x27;</span>, <span class="hljs-variable">$o</span>));</code></pre>
                
               <p>
-                 これは一体なんなのか。ずばり、難解プログラミング言語の一つ Piet のインタプリタになっている。 Piet はピエト・モンドリアン (『赤・青・黄のコンポジション』などで知られる抽象画家) の作品にインスピレーションを受けて作られた、画像をソースコードとするプログラミング言語である。 インタプリタは画像の各ピクセルの上を進みながら、色等に応じて特定の処理をおこなっていく。 ここでは詳しい言語仕様については解説しないので、<a href="https://ja.wikipedia.org/wiki/Piet">Wikipedia の記事「Piet」</a> などを参照してほしい。 
+                 これは一体なんなのか。ずばり、難解プログラミング言語の一つ Piet のインタプリタである。 Piet はピエト・モンドリアン (『赤・青・黄のコンポジション』などで知られる抽象画家) の作品にインスピレーションを受けて作られた、画像をソースコードとするプログラミング言語である。 インタプリタは画像の各ピクセルの上を進みながら、色等に応じて特定の処理をおこなっていく。 ここでは詳しい言語仕様については解説しないので、気になる方は <a href="https://ja.wikipedia.org/wiki/Piet">Wikipedia の記事「Piet」</a> などを参照してほしい。 
               </p>
                
               <p>
@@ -483,20 +494,20 @@ $h = $b[24]+2;
           <section id="section--outro">
             <h2><a href="#section--outro">おわりに</a></h2> 
             <p>
-               この問題の自己評価はこちら。 
+               この問題の自己評価はこちら。 問題の出題順はおおよそ作成した順になっているのだが、そのせいで難易度高めの問題が1問目に配置されてしまった。 これは反省点の一つである。 
             </p>
              
             <ul>
               <li>
-                難しさ: 2位 / 全5問
+                難しさ: ★★★★
               </li>
                
               <li>
-                お気に入り度: 4位 / 全5問
+                お気に入り度: ★★
               </li>
                
               <li>
-                鮮やかさ: 1位 / 全5問
+                鮮やかさ: ★★★★★★★
               </li>
             </ul>
           </section>
diff --git a/vhosts/blog/public/posts/atom.xml b/vhosts/blog/public/posts/atom.xml
index 9e2640d1..c6d7c256 100644
--- a/vhosts/blog/public/posts/atom.xml
+++ b/vhosts/blog/public/posts/atom.xml
@@ -7,14 +7,14 @@
   <author>
     <name>nsfisis</name>
   </author>
-  <updated>2025-01-08T00:00:00+09:00</updated>
+  <updated>2025-01-11T00:00:00+09:00</updated>
   <entry>
     <id>urn:uuid:ce8f20e8-c79f-48f8-982d-53edd4d20483</id>
     <link rel="alternate" href="https://blog.nsfisis.dev/posts/2025-01-08/phperkaigi-2023-tokens-q1/"></link>
     <title>PHPerKaigi 2023 トークン問題解説 (1/5)</title>
     <summary>PHPerKaigi 2023 でデジタルサーカス株式会社から出題した問題を解説する。全5問中の第1問。</summary>
     <published>2025-01-08T00:00:00+09:00</published>
-    <updated>2025-01-08T00:00:00+09:00</updated>
+    <updated>2025-01-11T00:00:00+09:00</updated>
   </entry>
   <entry>
     <id>urn:uuid:d7f98354-83fc-4cf1-8769-2784f0ebb6c8</id>
diff --git a/vhosts/blog/public/posts/index.html b/vhosts/blog/public/posts/index.html
index fc44ad9c..1e59643d 100644
--- a/vhosts/blog/public/posts/index.html
+++ b/vhosts/blog/public/posts/index.html
@@ -53,7 +53,7 @@
             </p>
           </section>
           <footer class="entry-footer">
-            <time datetime="2025-01-08">2025-01-08</time> 投稿
+            <time datetime="2025-01-08">2025-01-08</time> 投稿、<time datetime="2025-01-11">2025-01-11</time> 更新
           </footer>
         </a>
       </article>