OpenAPIはAPIを記述する手法についての標準化を目指す組織(OpenAPI Initiative)が作成している仕様書の名称です。

openapi-generatorは様々な経緯があって、現在、有志によって作成されているOpenAPIに適合する設計書を元に対応するプログラミングコードのひな形を生成するツールです。

作業を始めるためのパッケージをgithub.comに登録しています。次のコマンドで任意の場所に、作業ディレクトリ(docker-sccp-sinatra-sample)を作成してください。

演習室や自前のPCを利用する場合は、公式ガイドのインストール方法から適切と思われるものを選択し、openapi-generator-cli コマンドを準備してください。

もしコマンド名が "openapi-generator" のように別のものである場合には、Makefileの先頭にあるコマンド名を変更してください。

macOSを利用している場合、付属のrubyコマンドはバージョンが古いようです。 brewを利用して、より新しいバージョンを利用してください。

演習の途中でGitHubの内容が更新された場合など、git cloneで作成したディレクトリの内容を最新にする場合には次のコマンドを実行します。

意味のある動きはしませんが、とりあえずどんな動きをするのか確認してみることができます。まず、次の通りにコマンドを実行してください。docker-sccp-sinatra-sample/ディレクトリにいることを確認してから進めてください。

次にWebブラウザーを起動し、URL、http://localhost:8080/search 、を表示させて、結果1行が表示されることを確認します。

ここで、一度 Ctrl-c などを実行し、make runコマンドの実行を停止します。

Makefileには、make gen-code や make run に対応した実際の処理内容(コマンドの羅列)が記述されています。

Makefileに書かれている、gen-codeに対応するコードは次のような内容になっています。

code/Makefile(_docker/Makefile)に書かれている、runに対応するコードはもう少しシンプルが、やや複雑です。

make runを実行すると、その本体を処理する前に、make bundle-install を実行した場合と同じ処理が実行されます。

これによって、必要なライブラリファイルなどの準備と、プログラムの実行の処理を分けながら、一連の流れを持つ処理として記述することができます。

このサンプルを元にMakefileの内容を変更することで、Ruby言語+Sinatraフレームワーク以外の処理系に対応するコードを出力させることも可能です。

まずは /searchにアクセスした時に、 {"message":"yes, it worked"} を表示している場所を探します。

いまは docker-sccp-sinatra-sample/code/ディレクトリにいるはずです。emacs等で api/default_api.rb を開き "yes, it worked" のメッセージを表示している場所を探します。

この"yes, it worked"と書かれている場所は2箇所ありますが、/search に対応している方を選んでください。

編集する行を決めたら、{"message":"yes, it worked"}の1行を削除し、次のようなコードを挿入します。 # the guts live here の行も参考にしてください。

end が重複しないように注意してください。

変更したファイルを保存したら、再び make run を実行します。

無事に変更が成功した場合は、先ほどと同じように、次のようなメッセージが表示されます。 間違いがある場合には、Listening on .. のメッセージは表示されずに、エラーメッセージが表示されるので、見比べて修正してください。

また Webブラウザで http://localhost:8080/search を開き、結果を確認します。

端末からも次のようなコマンドでAPIにアクセスして結果を確認することができます。 こちらの方はjqコマンドで整形するので見やすくなるはずです。

curlコマンドの出力は、次のような入れ子構造になっています。

ここまで実行したら、一旦 make run コマンドの実行を、Ctrl-c を入力するなどして、停止します。

いまは固定的にsccpという単語を検索した結果が入っています。 後で任意のキーワードを検索できるようにしますが、まずは出力を変更します。

先ほど追加した場所の最後にさらに処理を追加します。 先頭の@result.to_jsonと最後のendは api/default_api.rb に書かれ ているので、その間に output = erb :mainの1行を追加します。

今回、追加したのは output から始まる1行だけです。

変更が終ったら、ファイルを保存し、再度 make run コマンドを実行します。

再びWebブラウザで http://localhost:8080/search にアクセスします。 次のように検索結果がリスト表示されるはずです。

ここで画面への表示は、lib/views/main.erb ファイルでコントロールされています。

現在は、sccpというキーワードだけを検索し、変更できないようになっています。 変更するべき箇所は、api/default_api.rb ファイルの次の箇所です。

q=に続く部分に、検索したいキーワードを指定すれば、検索結果を変化さ せることができます。

上のurl = で始まる1行を削除して、次の2行で置き換えます。

再び、make runコマンドでWebサーバーを起動し、Webブラウザから http://localhost:8080/search にアクセスし、画面下のダイアログに適当な文字列を入れて、"Search"ボタンを押下すると、指定した文字列をキーワードに検索結果が変化します。

現在のままでは、何について検索しているのか分かりにくくなっています。 改善のため画面下のテキストフィールドに、あらかじめ現在検索している文字列を表示するようにします。

lib/views/main.erb ファイルをemacsなどのエディタで開き、一番下にある<form …​>〜</form>で囲まれたinputタグの中身を次のように変更します。

編集した内容を保存し、Webブラウザに表示されている画面をリロードして結果を確認します。

ERBはRuby特有の機能で、Erubiという高機能な互換ライブラリを利用することもできます。

ERB(Erubi)を利用することで、様々なテキストファイルにRuby言語のプログラムコードを埋め込む事ができます。 今回はHTMLファイルの中に直接コードを記述しています。

次のようなコードを記述すると、自動的に `lib/views/ ディレクトリの中から対応するファイル(main.erb)を検索します。

lib/views/main.erb ファイルの内容をoutput変数に代入しますが、その際に埋め込まれたプログラムが実行されて出力に反映されます。

一般的にはWebページの見た目を改善するために、CSSやJavaScriptが利用されています。 ここまでのコード中ではCSS/JavaScriptは利用していません。

理由としてCSSやJavaScript用の外部ファイルを提供する機能は、Sinatraにはありません。 技術的に不可能ではありませんが、外部ファイルを提供するためのWebサーバーを別に準備するのが一般的な方法です。

そのためCSS/JavaScriptを利用したい場合には、HTMLファイル中にCSS/JavaScriptのコードを埋め込む事が最も現実的です。

アプリケーションの中でWebページの見た目を作るために利用されているファイルは、lib/views/ ディレクトリの中にあります。 どのファイルも自由に書き換えて問題ありません。

ここまで編集した内容と同等のapi/default_api.rbファイルは次の場所にあります。

最新版をgit cloneした場合には、docker-sccp-sinatra-sample/ディレクトリの中に含まれています。

次のようなコマンドを実行すると、ここまでの作業に追い付きます。

既に $ make run コマンドを実行しているのに、別の端末を開いて、make run を重複して実行するなどして、使われている8080番のポートを開こうとしてメッセージが表示されます。

原因としては、自分や以前に端末を利用していた別ユーザーが8080ポートを利用するプログラムを起動したまま放置していることが考えられます。

この場合には、8080ポートを既に利用しているプロセスを停止することで、自分が8080ポートを利用できるようになります。

ThinkPadを利用する場合は、podmanを利用します。個人所有のPCなどを利用する場合は、Docker Desktopを準備してください。

コンテナが利用できるようになったらHarborにログインし、自分が利用できる領域を準備してください。

Makefileの中にDockerコンテナとして実行するために必要な作業が記述されています。

WebブラウザからLoadBalancerを利用する方法は、EXTERNAL-IPの総数に限りがあるので、各自が準備したリバースプロキシーを利用します。

リバースプロキシーの設定については、下記のリンク先を確認してください。

この時に追加するproxy_pass 行は次のようになります。

次のように inovtst9.u-aizu.ac.jp 経由で自分のアプリにアクセスできることを確認してください。

うまくいかない時には、現状の把握 → 分析 → 対応 といったステップを踏む事になります。

そのためには、自分がなにをしようとしているのか、ある程度理解する必要があります。 なかなかうまくいかず、大変かもしれませんが、頑張ってください。