こんにちは、だいちゃんです。

僕がこれまでに制作したWebページを画面キャプチャ付きで保存するための udcxx creative archives というサイトを公開しました。

制作の背景

ポートフォリオ でも、一部の制作物は紹介していましたが、すべてを網羅して確認できるサイトがなかったのと、自分が携わったことを公言しにくいページもあったので、その2点を解決すべく、udcxx creative archives としてページを制作することにしました。

タイトルやURLなどの情報はすべてkintoneで管理し、簡単に追加・編集できるように工夫しました。

また、有効期限付きの認証コードによるログイン機能を用意したので、公開しづらい案件も、ログインユーザーだけに公開できるようになっています。

しくみ

udcxx creative archives は、大きく4つのページから構成されています。

1. TOPページ 兼 一覧ページ

制作物を一覧で確認できるページです。左カラムで絞り込みを行うこともできます。

制作物をクリックすると、詳細ページに遷移します。

僕から認証コードを教えてもらった人は、ログインすることでシークレット（非公開）案件も表示されるようになります。

2. 詳細ページ

制作物の詳細な情報や、画面キャプチャを確認することができます。

一覧ページと同じく、全データを保持したJSONを参照していて、URLに付与された ?creativecode=1 のようなパラメータから、表示するデータを決定しています。

ここでもシークレット（非公開）案件はログインしている場合のみ表示され、未ログイン時はログインするよう促すメッセージを表示します。

3. ログインページ

ログインするための認証コードを入力するページです。

ログインボタンをクリックすることで、認証コードの有用性を検証し、有効な認証コードであれば、ログインセッションを発行します。

4. 管理者用ページ

COCKPIT （コックピット）と名付けた管理画面で、認証コードの発行や、データのアップデートを行うことができます。

認証コードは、デフォルトでは7日間の有効期限付きで、コックピットを開いたときにJavaScriptでランダムなコードを生成してくれます。もちろん、コードと有効期間を任意に指定することもできます。

また、すべてのデータはkintoneで管理しているので、アップデートボタンをクリックすることで、kintoneのレコードからJSONファイルを生成し、最新のデータが表示できるようになります。

現状では、タイトルなどのデータはkintoneに登録して、画像は別途自分でサーバーに上げたり、サムネも自分で作らなきゃいけないので、今後はそのあたりも自動化したいですねぇ。

ちなみに、ウェブチョットワカルヨな人がゴニョゴニョすれば、未ログイン状態でも非公開案件をみることができるのですが、まぁバレても影響はない範囲のものしか載せてないのでそこはご愛嬌ってことでお許しを...w