diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-02-24 06:27:07 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-02-24 06:27:07 +0900 |
| commit | 13b159c6dd499b5c67a110e02780d9e741f0ecdb (patch) | |
| tree | 85e254e8ac1962f1d16ed5f3a4c1b8964834622f /vhosts/blog/public/posts/2025-01-08 | |
| parent | ac0be4b5207aa3375b745cad7c96533c3f2380b6 (diff) | |
| download | nsfisis.dev-13b159c6dd499b5c67a110e02780d9e741f0ecdb.tar.gz nsfisis.dev-13b159c6dd499b5c67a110e02780d9e741f0ecdb.tar.zst nsfisis.dev-13b159c6dd499b5c67a110e02780d9e741f0ecdb.zip | |
feat(blog/nuldoc): do not insert whitespace to linebreaks between Japanese sentences
Diffstat (limited to 'vhosts/blog/public/posts/2025-01-08')
| -rw-r--r-- | vhosts/blog/public/posts/2025-01-08/phperkaigi-2023-tokens-q1/index.html | 74 |
1 files changed, 37 insertions, 37 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 c76dd5fa..16bf6730 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 @@ -77,20 +77,20 @@ NOTE </div> <div class="admonition-content"> - これは PHPerKaigi 2023 の記事です。今は 2025 年ですが、PHPerKaigi 2023 の記事です。 + これは PHPerKaigi 2023 の記事です。今は 2025 年ですが、PHPerKaigi 2023 の記事です。 </div> </div> <p> - 2023-03-23 から 2023-03-25 にかけて開催された <a href="https://phperkaigi.jp/2023/" rel="noreferrer" target="_blank">PHPerKaigi 2023</a> では、PHPer チャレンジという企画がおこなわれた。 PHPer チャレンジとは、スポンサーのパンフレットやカンファレンス会場などから「#」記号で始まる文字列を集め、景品などを得るという企画である。 この文字列は「PHPer トークン」と呼ばれている。弊社<a href="https://www.dgcircus.com/" rel="noreferrer" target="_blank">デジタルサーカス株式会社</a>からは、トークン問題という形で、PHP に関する問題を解くと PHPer トークンが得られるようになっている問題を出題した。 + 2023-03-23 から 2023-03-25 にかけて開催された <a href="https://phperkaigi.jp/2023/" rel="noreferrer" target="_blank">PHPerKaigi 2023</a> では、PHPer チャレンジという企画がおこなわれた。PHPer チャレンジとは、スポンサーのパンフレットやカンファレンス会場などから「#」記号で始まる文字列を集め、景品などを得るという企画である。この文字列は「PHPer トークン」と呼ばれている。弊社<a href="https://www.dgcircus.com/" rel="noreferrer" target="_blank">デジタルサーカス株式会社</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> @@ -116,14 +116,14 @@ </ol> <p> - それぞれの問題はこちらの GitHub リポジトリ (<a href="https://github.com/nsfisis/PHPerKaigi2023-tokens" rel="noreferrer" target="_blank">nsfisis/PHPerKaigi2023-tokens</a>) からも閲覧できる。 + それぞれの問題はこちらの GitHub リポジトリ (<a href="https://github.com/nsfisis/PHPerKaigi2023-tokens" rel="noreferrer" target="_blank">nsfisis/PHPerKaigi2023-tokens</a>) からも閲覧できる。 </p> </section> <section id="section--quiz"> <h2><a href="#section--quiz">Q1: An Art of Computer Programming</a></h2> <p> - 第1問『An Art of Computer Programming』はこちら。 + 第1問『An Art of Computer Programming』はこちら。 </p> <img alt="全体がQRコードになっており、中央には小さな文字で「Password is one of the PHPer tokens.」と書かれている" src="/posts/2025-01-08/phperkaigi-2023-tokens-q1/Q1.png"> @@ -133,13 +133,13 @@ <section id="section--how-to-solve"> <h2><a href="#section--how-to-solve">解き方</a></h2> <p> - まずはトークンを得る方法を解説抜きで説明する。次のように実行する。 + まずはトークンを得る方法を解説抜きで説明する。次のように実行する。 </p> <pre class="highlight"><code>$ echo "#iwillblog" | php Q1.png >/dev/null</code></pre> <p> - 無事に実行できていれば「#ModernPHPisStaticallyTypedLanguage」というトークンが得られる。 + 無事に実行できていれば「#ModernPHPisStaticallyTypedLanguage」というトークンが得られる。 </p> </section> @@ -148,50 +148,50 @@ <section id="section--commentary--read-as-image"> <h3><a href="#section--commentary--read-as-image">画像として解釈する</a></h3> <p> - まずは素直に画像として見てみよう。 全体は QR コードになっている。適当な QR コードリーダで読み込むと、次のようなテキストが表示されるはずだ。 + まずは素直に画像として見てみよう。全体は QR コードになっている。適当な QR コードリーダで読み込むと、次のようなテキストが表示されるはずだ。 </p> <pre class="highlight"><code>Guess password. $ echo "password" | php Q1.png >/dev/null</code></pre> <p> - メッセージは、この画像の実行方法とこの問題でやるべきこと (パスワードの推測) を示している。 + メッセージは、この画像の実行方法とこの問題でやるべきこと (パスワードの推測) を示している。 </p> <p> - 次に QR コードの中央部に目を向けると、小さな文字で「Password is one of the PHPer tokens.」と書かれているのがわかる。 他の PHPer トークンの中から適切な1つを見つけだし、「パスワード」として渡すことで答えとなる PHPer トークンが得られるというわけだ。 + 次に QR コードの中央部に目を向けると、小さな文字で「Password is one of the PHPer tokens.」と書かれているのがわかる。他の PHPer トークンの中から適切な1つを見つけだし、「パスワード」として渡すことで答えとなる PHPer トークンが得られるというわけだ。 </p> </section> <section id="section--commentary--password"> <h3><a href="#section--commentary--password">パスワード</a></h3> <p> - 不正なパスワードを使って実行してみると、次のようなエラーメッセージが表示される。 + 不正なパスワードを使って実行してみると、次のようなエラーメッセージが表示される。 </p> <pre class="highlight"><code>$ echo "foo" | php Q1.png >/dev/null 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> - このパスワードの選択にはとある事情がある。 今回の問題の作問は前回の開催 (PHPerKaigi 2022) 直後からスタートしており、この時点では PHPerKaigi 2023 で登録される PHPer トークンにどのようなものがあるかはまったくわからない状態であった。 作問作業を早期に終わらせるには、次回開催でも確実に使われるであろう定番のトークンを予測して選ぶ必要があったのだ。 かくして、私が知る限り毎回登場しているトークンである「#iwillblog」に白羽の矢が立てられた。 + このパスワードの選択にはとある事情がある。今回の問題の作問は前回の開催 (PHPerKaigi 2022) 直後からスタートしており、この時点では PHPerKaigi 2023 で登録される PHPer トークンにどのようなものがあるかはまったくわからない状態であった。作問作業を早期に終わらせるには、次回開催でも確実に使われるであろう定番のトークンを予測して選ぶ必要があったのだ。かくして、私が知る限り毎回登場しているトークンである「#iwillblog」に白羽の矢が立てられた。 </p> <p> - なお、解いてくださった方の中には、先頭の「#」を入力せずに何度も試してしまい答えが得られずじまいになった方もいらっしゃるようだった。 問題を置いていたリポジトリにヒントとしてパスワードのトークンが「i」で始まると書いていたのだが、これが意図せずミスリードになってしまった。 これは私のミスである。 + なお、解いてくださった方の中には、先頭の「#」を入力せずに何度も試してしまい答えが得られずじまいになった方もいらっしゃるようだった。問題を置いていたリポジトリにヒントとしてパスワードのトークンが「i」で始まると書いていたのだが、これが意図せずミスリードになってしまった。これは私のミスである。 </p> </section> <section id="section--commentary--png-steganography"> <h3><a href="#section--commentary--png-steganography">PNG ステガノグラフィ</a></h3> <p> - QR コードも言っているように、このファイルは PNG 画像であるにもかかわらず PHP で実行することができる。なぜこのようなことが可能なのか。 + QR コードも言っているように、このファイルは PNG 画像であるにもかかわらず PHP で実行することができる。なぜこのようなことが可能なのか。 </p> <p> - PNG 画像のフォーマットは、次のようになっている。 + PNG 画像のフォーマットは、次のようになっている。 </p> <ol> @@ -213,15 +213,15 @@ </ol> <p> - PNG フッタの後ろにあるデータは、画像ビューアには解釈されず、画像の表示には影響を与えない。したがって、PNG フッタの後ろには任意のデータを埋め込むことができる。 + PNG フッタの後ろにあるデータは、画像ビューアには解釈されず、画像の表示には影響を与えない。したがって、PNG フッタの後ろには任意のデータを埋め込むことができる。 </p> <p> - さて、PHP には、PHP プログラムの始まりを示すための PHP タグ (<code><?php</code> または <code><?</code>) がある。 CLI で実行する場合、PHP タグよりも前にあるデータは標準出力へそのまま出力される。 + さて、PHP には、PHP プログラムの始まりを示すための PHP タグ (<code><?php</code> または <code><?</code>) がある。CLI で実行する場合、PHP タグよりも前にあるデータは標準出力へそのまま出力される。 </p> <p> - この画像ファイルは次のような構造になっていた。 + この画像ファイルは次のような構造になっていた。 </p> <ol> @@ -251,11 +251,11 @@ </ol> <p> - PNG ファイルとして読むときは PNG フッタ以降は無視され、PHP スクリプトとして読むときは PHP タグ以前が無視されるという仕掛けである。 + PNG ファイルとして読むときは PNG フッタ以降は無視され、PHP スクリプトとして読むときは PHP タグ以前が無視されるという仕掛けである。 </p> <p> - <code>strings</code> コマンドを使うと、隠されたデータを簡単に閲覧できる。 + <code>strings</code> コマンドを使うと、隠されたデータを簡単に閲覧できる。 </p> <pre class="highlight"><code>IHDR @@ -271,24 +271,24 @@ $h = $b[24]+2; // (以下略)</code></pre> <p> - <code>IHDR</code> や <code>IEND</code> が PNG 画像の一部で、<code><?php</code> からが実際のプログラムになっている。 もちろんこれを PHP プログラムとして動かすと、PHP タグより前にある PNG 画像としてのデータはそのまま標準出力へと出力されてしまう。 それを防ぐため、QR コードを読み込んだときの実行方法 + <code>IHDR</code> や <code>IEND</code> が PNG 画像の一部で、<code><?php</code> からが実際のプログラムになっている。もちろんこれを PHP プログラムとして動かすと、PHP タグより前にある PNG 画像としてのデータはそのまま標準出力へと出力されてしまう。それを防ぐため、QR コードを読み込んだときの実行方法 </p> <pre class="highlight"><code>Guess password. $ echo "password" | php Q1.png >/dev/null</code></pre> <p> - には標準出力を捨てるよう <code>>/dev/null</code> と指定されている。 + には標準出力を捨てるよう <code>>/dev/null</code> と指定されている。 </p> <p> - なお、このように PNG 画像などに本来のデータとは異なる別のデータを隠すことを「ステガノグラフィ」(<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%AC%E3%83%8E%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%BC" rel="noreferrer" target="_blank">Wikipedia「ステガノグラフィー」</a>) と呼ぶ。 + なお、このように PNG 画像などに本来のデータとは異なる別のデータを隠すことを「ステガノグラフィ」(<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%82%AC%E3%83%8E%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%BC" rel="noreferrer" target="_blank">Wikipedia「ステガノグラフィー」</a>) と呼ぶ。 </p> </section> <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"><?php</span> @@ -394,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">'403 Forbidden'</span>, <span class="hljs-string">'401 Unauthorized'</span>, <span class="hljs-variable">$o</span>));</code></pre> <p> - これは一体なんなのか。ずばり、難解プログラミング言語の一つ Piet のインタプリタである。 Piet はピエト・モンドリアン (『赤・青・黄のコンポジション』などで知られる抽象画家) の作品にインスピレーションを受けて作られた、画像をソースコードとするプログラミング言語である。 インタプリタは画像の各ピクセルの上を進みながら、色等に応じて特定の処理をおこなっていく。 ここでは詳しい言語仕様については解説しないので、気になる方は <a href="https://ja.wikipedia.org/wiki/Piet" rel="noreferrer" target="_blank">Wikipedia の記事「Piet」</a> などを参照してほしい。 + これは一体なんなのか。ずばり、難解プログラミング言語の一つ Piet のインタプリタである。Piet はピエト・モンドリアン (『赤・青・黄のコンポジション』などで知られる抽象画家) の作品にインスピレーションを受けて作られた、画像をソースコードとするプログラミング言語である。インタプリタは画像の各ピクセルの上を進みながら、色等に応じて特定の処理をおこなっていく。ここでは詳しい言語仕様については解説しないので、気になる方は <a href="https://ja.wikipedia.org/wiki/Piet" rel="noreferrer" target="_blank">Wikipedia の記事「Piet」</a> などを参照してほしい。 </p> <p> @@ -404,18 +404,18 @@ $h = $b[24]+2; <pre class="highlight" language="php"><code class="highlight"><span class="hljs-variable">$b</span> = <span class="hljs-title function_ invoke__">unpack</span>(<span class="hljs-string">'C*'</span>, <span class="hljs-title function_ invoke__">file_get_contents</span>(<span class="hljs-keyword">__FILE__</span>));</code></pre> <p> - で <code>__FILE__</code> つまりこの画像ファイルを読み込んでいる。 先ほど Piet は画像をソースコードにしていると説明した。 そう、今回の問題の画像ファイル <code>Q1.png</code> は、PHP 製 Piet インタプリタであると同時に、Piet のソースコード画像でもあるのだ。 QR コード中央のカラフルな部分が Piet の命令になっている。 + で <code>__FILE__</code> つまりこの画像ファイルを読み込んでいる。先ほど Piet は画像をソースコードにしていると説明した。そう、今回の問題の画像ファイル <code>Q1.png</code> は、PHP 製 Piet インタプリタであると同時に、Piet のソースコード画像でもあるのだ。QR コード中央のカラフルな部分が Piet の命令になっている。 </p> </section> <section id="section--commentary--piet-source-code"> <h3><a href="#section--commentary--piet-source-code">Piet のソースコード</a></h3> <p> - さて、Piet でどのようなコードが書かれて (いや、描かれて) いるのかを解説したいところだが、今の私にはできそうにない。 というのも、すでに述べたように Piet は「難解プログラミング言語」である。 およそ人が描いたり読んだりするようには作られていない。性質としては、パズルに近い代物である。 + さて、Piet でどのようなコードが書かれて (いや、描かれて) いるのかを解説したいところだが、今の私にはできそうにない。というのも、すでに述べたように Piet は「難解プログラミング言語」である。およそ人が描いたり読んだりするようには作られていない。性質としては、パズルに近い代物である。 </p> <p> - というわけで、ここではあらましを説明するだけでご容赦いただきたい。 それぞれの部分はおおよそ次のようなことをやっている (再検証・再読解はしていないので大嘘かもしれない)。 + というわけで、ここではあらましを説明するだけでご容赦いただきたい。それぞれの部分はおおよそ次のようなことをやっている (再検証・再読解はしていないので大嘘かもしれない)。 </p> <ul> @@ -457,7 +457,7 @@ $h = $b[24]+2; </ul> <p> - ところで、先ほど掲載した Piet のインタプリタのソースコード末尾には次のような箇所がある。 + ところで、先ほど掲載した Piet のインタプリタのソースコード末尾には次のような箇所がある。 </p> <pre class="highlight" language="php"><code class="highlight"><span class="hljs-comment">// The original Piet image is wrong: it outputs 403 error for invalid passwords.</span> @@ -467,26 +467,26 @@ $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">'403 Forbidden'</span>, <span class="hljs-string">'401 Unauthorized'</span>, <span class="hljs-variable">$o</span>));</code></pre> <p> - コメントにも書かれているが、この Piet のソースコード画像には誤りがあった。 本来 HTTP のステータスコードを真似るのなら、認証の失敗には 401 を返さなければならない。 しかし、Piet のソースは 403 を返すように書いてしまっていた。 そのことに私が気付いたのは PHPerKaigi 2023 が開催されるひと月前で、その時点で私はこの Piet のソースコードを (ちょうどこの記事でそうなっているのと同じように) 読解できなくなっていた。 さらに悪いことに、正しいメッセージ「401 Unauthorized」は元の「403 Forbidden」よりも3文字長い。 3文字出力が長くなるということは、それだけ Piet で塗るべきピクセルが増えることを意味する。 もはや3文字追加で出力するだけの余白はこの画像に残されていなかった (と思う。腕ききの Piet プログラマならできるかもしれないので挑戦してみてほしい)。 + コメントにも書かれているが、この Piet のソースコード画像には誤りがあった。本来 HTTP のステータスコードを真似るのなら、認証の失敗には 401 を返さなければならない。しかし、Piet のソースは 403 を返すように書いてしまっていた。そのことに私が気付いたのは PHPerKaigi 2023 が開催されるひと月前で、その時点で私はこの Piet のソースコードを (ちょうどこの記事でそうなっているのと同じように) 読解できなくなっていた。さらに悪いことに、正しいメッセージ「401 Unauthorized」は元の「403 Forbidden」よりも3文字長い。3文字出力が長くなるということは、それだけ Piet で塗るべきピクセルが増えることを意味する。もはや3文字追加で出力するだけの余白はこの画像に残されていなかった (と思う。腕ききの Piet プログラマならできるかもしれないので挑戦してみてほしい)。 </p> <p> - これを解決するために私が選んだのは、インタプリタを改造し、本来のメッセージとは異なるメッセージを無理やり出力させて帳尻を合わせることだった。 そういうわけでこの Piet インタプリタは完全な Piet インタプリタではなく、「403 Forbidden」というテキストを絶対に出力できない。 + これを解決するために私が選んだのは、インタプリタを改造し、本来のメッセージとは異なるメッセージを無理やり出力させて帳尻を合わせることだった。そういうわけでこの Piet インタプリタは完全な Piet インタプリタではなく、「403 Forbidden」というテキストを絶対に出力できない。 </p> </section> <section id="section--commentary--misc"> <h3><a href="#section--commentary--misc">その他小ネタ</a></h3> <p> - ここまでで問題の核心部分は説明し終えたので、ここからは残った小ネタを紹介しておく。 + ここまでで問題の核心部分は説明し終えたので、ここからは残った小ネタを紹介しておく。 </p> <p> - この問題のタイトル『An Art of Computer Programming』は、ドナルド・クヌースの『The Art of Computer Programming』をパロディしたものである。 + この問題のタイトル『An Art of Computer Programming』は、ドナルド・クヌースの『The Art of Computer Programming』をパロディしたものである。 </p> <p> - この問題で得られるトークン「#ModernPHPisStaticallyTypedLanguage」は特に元ネタがあるわけではない。当然のような顔で嘘を主張したかったのでこうなった。 + この問題で得られるトークン「#ModernPHPisStaticallyTypedLanguage」は特に元ネタがあるわけではない。当然のような顔で嘘を主張したかったのでこうなった。 </p> </section> </section> @@ -494,7 +494,7 @@ $h = $b[24]+2; <section id="section--outro"> <h2><a href="#section--outro">おわりに</a></h2> <p> - この問題の自己評価はこちら。 問題の出題順はおおよそ作成した順になっているのだが、そのせいで難易度高めの問題が1問目に配置されてしまった。 これは反省点の一つである。 + この問題の自己評価はこちら。問題の出題順はおおよそ作成した順になっているのだが、そのせいで難易度高めの問題が1問目に配置されてしまった。これは反省点の一つである。 </p> <ul> |
