プログラミング系 YouTuber に未来はあるか?

M1 Mac に tomcat 環境を構築するときにネット上で資料を漁っていたのだが、たまたまだが「M1 Mac に M1 対応の JDK をインストールする」みたいな動画を YouTube で見つけた。

これ自体、各種ブログ記事はまあまああるので動画にするほどのことかという気もするのだが(私も記事書いている)、気になったのは up 主のコメントへの返信。

わからないことはわからないというのは大事だが、さすがにこれはちょっと・・・。

M1 Mac で tomcat を使うことはできるし、Java アプリを開発したこともないってのはどうなの?

アップ主さんには特に悪意はないので(というか喋りは達者だし動画編集も丁寧。むしろ好感抱いたくらい)どの動画だとかいうつもりはないが、プログラミング系 YouTuber というんだろうか、この分野は(日本では)まだまだ手薄かもしれないと思った次第だ。

 

猪股弘明

 

bootstrap のお作法

 

? bootstrap とは?

よく「ウェブフレームワーク」などと紹介されていたりするが、直感的にいえば「ウェブのフロントエンド(ウェブページそのもの)を作成する際に、便利な CSS や JavaScript の集まり」と言った方がいいだろう。
実際、その実体(bootstrap.bundle.min.js だとか)は一般の html のページを作成する際にも使える。
データベースやサーバーまで扱えるようなウェブフレームワークとは、ちょっと違う。

? bootstrap 使い方のお作法

bootstrap を導入する際には使い方のお作法(リンクのさせ方など)を知っておかなければならないが、ネット上では古い情報が散見されるので、公式サイトで確認した方がいい。

現在の最新バージョンは bootstrap5 だが、該当ページは

https://getbootstrap.jp/docs/5.0/getting-started/introduction/ 。

以下にあるように bootstrap4 までは必須とされた jQuery と popper の取り扱いが大きく変わっている。

最低限、必要なものは CSS と JS だが、

CSS: bootstrap.min.css を <head></head> 内でリンクさせる

JS: bootstrap.bundle.min.js を </body>タグの直前で <script>タグを使って使用を宣言する

ということらしい。

気になるのは popper や jQuery との関係だが、これも公式サイトに説明がなされていた。
https://getbootstrap.jp/docs/5.0/getting-started/javascript/

ドロップダウンはメニューなどで必要だろうから popper は、(個人的には)組み込んでおく方針。
jQuery は不要になったということだが、実際の挙動がどうなるかは試していないのでよくわからない。

【裏技?的な popper の入手】
現在(2022/5)最新バージョンは 2.11.5 なので、適当なブラウザで
https://unpkg.com/@popperjs/core@2.11.5/dist/umd/popper.min.js
に飛んで、ブラウザ画面上にソースを表示させファイルにしておく。

【jQuery の入手】
公式サイトのダウンロードページから入手。

 

air-h-128k-il

 

【Mac】ハロワールドっぽいページを複数作って遷移の確認【Servlet】

tomcat 環境ができたので、簡単な動作確認用のコードを書いてみた。
使用したコードは GitHub で公開してますので、ポイントだけ解説していきます。

 

新しい環境になれる際にやることは、大抵、ハローワールドだと思う。
が、Web アプリの場合、実務的に重要なのはデプロイ時の
・コンテキストルートの癖
・url mapping の設定
あたりになってくると思うので、この点を意識して(いきなりだが)サーブレットファイルを3つ用意してみた。
ファイル1つだけだと遷移できるかどうか確認できないので。
だから、3ファイルには相互にリンクを張って狙った通りに遷移できるか試そうという意図です。

このうちの1つのファイルがこれ(Page1.java)。
シンプルな .html になるが、他の2つのページへのリンク入れてますね。

package info.phazor.link;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Page1 extends HttpServlet {
  public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws IOException, ServletException{

    response.setContentType("text/html; charset=UTF-8");
    PrintWriter out = response.getWriter();

    out.println("<html>");
    out.println("<head>");
    out.println("<title>link test"</title>);
    out.println("</head>");
    out.println("<body>");

    out.println("<p>テストページ1</p>");

    out.println("<p><a href=\"/link-1.0/page2\">テストページ2へ</a></p>");
    out.println("<p><a href=\"/link-1.0/page3\">テストページ3へ</a></p>");

     out.println("</body>");
     out.println("</html>");
   }
}

リンクの張り方を適当に変えて Page2.javaPage3.java も作成。
Mac なのでエスケープ文字は \ を使ってますが、windows の場合は ¥(半角)使えばコンパイル通ると思います。

これらのサーブレットから生成されるページが、リンク先に指定した URL に正しくマッピングされていないとブラウザ上でリンクをクリックしてもリンク先のページが表示されないことになる。

で、そのマッピングの設定は web.xml が担当している。

今回の場合は、以下(関係箇所を抜粋)のようになる。


    <servlet>
        <servlet-name>Page1</servlet-name>
        <servlet-class>info.phazor.link.Page1</servlet-class>
     </servlet>
    <servlet>
        <servlet-name>Page2</servlet-name>
        <servlet-class>info.phazor.link.Page2</servlet-class>
     </servlet>    
    <servlet>
        <servlet-name>Page3</servlet-name>
        <servlet-class>info.phazor.link.Page3</servlet-class>
     </servlet>
 
    <servlet-mapping>
        <servlet-name>Page1</servlet-name>
        <url-pattern>/Page1</url-pattern>
     </servlet-mapping>
     <servlet-mapping>
        <servlet-name>Page2</servlet-name>
        <url-pattern>/Page2</url-pattern>
     </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Page3</servlet-name>
        <url-pattern>/Page3</url-pattern>
     </servlet-mapping>

要するに
・上の3段でサーブレットの名前とクラスを対応づけ
・下の3段でサーブレットと URL を対応づけ
ているわけですね。

これで、生成したページとURLをマッピングさせているわけですね。

tomcat 上で動作させましたが、割とさくさく遷移してくれました。

あとは静的なファイルを用意して、これらの集積でサイトが構築できる、という理屈のようです。

Java のこういったクセのないアプローチはさすが Java って感じですね。
まあ、たぶん、アノテーションなどを使った「モダン」な書き方もあるんでしょうが(苦笑)。

なお、GitHub リポジトリにある link2 は、上のコードにユーザー認証(session を使ったパスワード認証)を付け加えたものです。

 

猪股弘明

Mac で tomcat

あまり実用性は高いとはいえないと思うのだが、mac で軽くサーバーサイド Java をやりたい場合、tomcat 環境があると便利だ。
「もう Java の時代でもないでしょう」的な雰囲気がそこはかとなく漂っているせいなのかネット上にあまりこの手の情報は見つからなかった。

なので、軽くまとめ。

0. 準備

当たり前ですが Java 開発環境を作っておきましょう。
M1 Mac に M1(Arm) 対応の JDK をインストールする
あたりを参考に。

1.インストール・動作確認

ようやく M1 Mac でも homebrew がマトモに動くようになってきたので、今回は homebrew 経由で tomcat を入れます。

おなじみ

brew install tomcat

コマンドでインストール。

tomcat 自体はユーザー(管理者)登録しなくともとりあえずは走る。

brew services start tomcat

でサービスを開始したあと、ブラウザで http://localhost:8080 にアクセスするとwelcome 画面(アイキャッチ参照)が表示される。こうなればOK。

サービス終了は

brew services stop tomcat

とする。

2.ユーザー登録する

自前のプログラムをデプロイする場合に必要になってくるので、tomcat にユーザーを登録する。
tomcat を homebrew 経由で導入した場合、現在(2022/4)だとその実体諸々は
/opt/homebrew/Cellar/tomcat/
にある。
設定ファイル関係は
/opt/homebrew/Cellar/tomcat/(version)/libexec/conf
以下にある。
このうち tomcat-users.xml に以下の記述を追加。

<user username="username" password="password" roles="manager-gui" />

tomcat 起動後、上で設定したユーザー名とパスワードで管理画面に入れるようになります。

3.なにはともあれ Hello World!

環境が整ったら、とりあえず何か簡単なプログラムをデプロイしてみたい。

テキストエディタで .jsp だのをガシガシ作成していってもいいんでしょうが、ファイル構成(ディレクトリ構造とでもいうのでしょうか META-INF 以下にこれこれを置いてというアレ)がよくわかってないので、NetBeans にまかせましょう(手抜き)。

NetBeans 起動後、File >> New Project.. でプロジェクト作成。

Web Application を選択。あとは、ダイアログの指示に従う。

デフォルトで Hello World! してくれるコードが書かれているので、なんも考えずにビルド。

BUILD SUCCESS するとプロジェクトフォルダに target フォルダがつくられ、その中に
プロジェクト名-version.war
というファイルができている(はず)。

これを tomcat 管理画面からデプロイ。

手持ちのブラウザで URL: http://localhost:8080/プロジェクト名-version/ にアクセスすると以下のようにハロワールドしてくれる。

めでたしめでたし。

【追記】めでたしめでたし、とは書いたが、その後、servlet の簡単なコードを書いて tomcat 環境にデプロイするとなぜかエラーが出る。ところがこの .war ファイルを wildfly 環境に持ってくると全く正常に動作する。
原因よくわからず。

【追記2】tomcat の version 8 にすると正常動作しました。
サンプルコード&解説は『【Mac】ハロワールドっぽいページを複数作って遷移の確認【Servlet】』で。使用したコードは GtHub に公開しています。 

 

猪股弘明

 

NetBeans 使い方 FAQ

プロジェクトの JDK を変更したい

Preferences(設定)で以下の画面を出し、赤枠の部分を変更。

今(2022上旬)だと、11 or 17 にしておくのが吉。

なお、Maven も同梱されているのを使いたくなければ、自分でインストール・設定した(MAVEN_HOME の)パスを指定しておく。