Welcomeページ

提供: 釧路高専プロ研Wiki
移動先: 案内検索

http://nitkc.org/ として稼働するWelcomeページについて述べます。

仕組み[編集]

Welcomeページは、dokku-altにより管理されています。 これによって、プロ研部員であれば誰でも自由に編集ができます。

内部ではサムネイル作成のため、次の手順を行うスクリプトが走っています。

  1. index.html内の<a href="...."><img src="HOGE.png" /></a>からHOGE.pngを抽出する。
  2. cp empty.png HOGE.pngと同等の処理を実行
  3. base32decode(HOGE) = http://xxx.nitkc.org/yyyにアクセスする
  4. 10秒間待つ
  5. スクリーンショットを取得する
  6. 6時間待つ
  7. 3.へ戻る

書いてて思いましたが、「2.」の処理は強引というか、あまり綺麗ではないと思います。 クライアントのJavaScriptで、画像が取得できなかったらempty.pngに差し替えるべきではないでしょうか。

なお、スクリーンショット取得の際は、1250x875の解像度を持ち、UserAgentがKPC Kitto caPture dekiruto ureC toolであるブラウザとしてアクセスします。 この情報を基に、デモモードなどに移行しても良いと思いますが、この情報をWikiで公開してしまったので、認証を回避させるのは危険です。

また、dokku-alt関連として、

  • アプリ名は welcome
  • でも、ドメイン名は、nitkc.org
  • www.nitkc.org はリダイレクト

としてします。

index.htmlの編集[編集]

サムネイルは自動取得なので、編集しても無駄です。 WebサイトのURLや、サムネイル取得URLの変更について述べます。

箇条書きで手順を示すと、

  1. dokku-alt#リポジトリのcloneをする
    • git clone dokku@dokku.nitkc.org:welcome
  2. public/index.html を適当に編集する
    • サムネイルのURLは、base32encode(サムネイルを取得したいサイトのURL)してパディング(=)を消して、.pngを付けたもの
    • エンコードは、Base32 Encode Onlineなとで得られる
    • 他のサムネイルの文字列をBase32 Decode Onlineにかけるとどんな感じか分かるのでは
  3. リポジトリにpush
    • git add -A
    • git commit -m "HOGEHOGE"
    • git push origin master

となる。index.htmlの編集では、<a href=['"](.+?)['"]><img src=['"]\.\/img\/([A-Z2-7]+?\.png)['"] *?\/><\/a>の制約を守らないとサムネイルが取得されない。Regexperなどで見やすくなる。