若者へ！あなた専用のクラウド卒業年鑑をワンクリックで起動

卒業は別れを意味しない、青春は終わらない

激動の2020年を経験した後、2021年にクラスメイトとして一緒に過ごす時間は特に貴重に思えます。朝のモーニングコールはまだ鳴り、カフェテリアのおばさんはいつものように朝食を準備し、玄関のおじさんはいつものようにIDと健康コードをチェックします。私たちは3年間、つまり980日と18時間51分と59秒一緒にいました。しかし、また卒業シーズンがやって来ます。疫病の流行により学校の開始時間には影響が出ていますが、卒業には影響はありません。盛大な卒業式はありませんが、私たちが一緒に過ごした青春は決して忘れられません。

卒業式は、何百万人もの人々と何百万もの夏の物語であり、私たちにはあなたの卒業式を少しでも特別なものにする無数の理由があります。 Alibaba Cloudのクラウド開発プラットフォームのユーザーであるAn Nanさんは、自身の卒業アルバムをカスタマイズしました。彼はアルバムを全員に捧げ、すべての卒業生がすぐに自分専用のクラウドベースの卒業アルバムを手に入れ、Alibaba Cloud のクラウド開発プラットフォームを通じてワンクリックでオンラインで公開できるようにしました。 IT の専門家でも、Web サイトの初心者でも、わずか数分で独自の卒業アルバムを作成できます。卒業は別れを意味するものではありません、青春は決して終わらないのです！

卒業アルバムのレンダリング

卒業年鑑の発行手順

1. アプリケーションを作成する

a.クラウド開発プラットフォームにログイン

クラウド開発プラットフォームにログインします。 Alibaba Cloud アカウントでログインし、指示に従ってチームを作成し、「契約に同意する」をクリックします。 Alibaba Cloud アカウントをお持ちでないユーザーは、ログインページで登録してからログインできます。最適なエクスペリエンスを確保するには、Chrome ブラウザを使用してください。

b.アプリケーションを作成する

クイックスタートを開き、「新しいアプリの作成」をクリックします。

紀元前クラウド リソースのアクセス許可。

クラウド リソースのアクセス許可。これまでクラウド開発プラットフォームを使用したことがない場合は、クラウド リソース認証管理のオプションが表示されます。 「承認に同意する」という文字が表示されるまで下にスクロールします。 「承認に同意する」をクリックすると、「承認が成功しました」というメッセージが表示されます。 「次へ」をクリックします。

d.言語とコンピューティング サービスを選択します。

開発言語として NodeJS を選択し、作成方法として [直接作成] を選択して、[次へ] をクリックします。次に、アプリケーションの名前と説明を入力し、アプリケーションが属する製品ラインを選択し (必要に応じて選択)、コンピューティング サービスとして FC を選択します。次に「完了」をクリックします。クラウド サービスがアクティブ化されていない場合は、アクティブ化する必要があります。アクティベーションには料金はかかりません。

2. アプリケーションを設定して起動します。

a.年鑑のコードをダウンロードしてください。

https://github.com/cloudworkbench/memory-album にアクセスしてソース コードをダウンロードし、ローカル ディレクトリに解凍します。

b.環境を作る

アプリケーションが正常に作成されると、アプリケーションの詳細ページにリダイレクトされます。日常環境の「デプロイメント構成」をクリックし、[環境を自動的に作成] - [任意のアベイラビリティゾーンを選択] - [スイッチを自動的に作成] の順に選択します。

紀元前オンライン開発と展開

環境設定が完了したら、次のページに戻り、「オンライン開発とデプロイメント」をクリックして、新しいウィンドウで WebIDE デプロイメントを開き、「オンライン開発とデプロイメント」をクリックして、CloudIDE を開き、コード ファイルをアップロードします。

d.コードファイルをアップロード

CloudIDE がロードされたら、ダウンロードして解凍したファイルを選択し、ソース コード ファイルを CloudIDE のルート ディレクトリに直接ドラッグし、アップロード後に保存してプッシュすることを忘れないでください。

e.卒業年鑑にワンクリックでアクセス

CloudIDE の左側にある [デプロイメント] タブをクリックし、日常的な環境を選択して [今すぐデプロイ] をクリックし、ポップアップ ボックスで構成を確認して、デプロイメントを続行します。デプロイが完了すると、一時的なドメイン名が生成され、デプロイされたサイトにアクセスできるようになります。すぐにクラスメイトと共有してください。一時ドメイン名は 30 分間有効です。

f.オンラインドメイン名をバインドする

生成された一時ドメイン名はクラウド開発プラットフォームによって無料で提供され、30 分間のみ有効です。有効期限が切れた後は、手動で更新して有効にする必要があります。卒業サイトとして長期的に維持したい場合は、独自のドメイン名を紐付けることもできます。現在、多くのドメイン名は初年度1元です。

購入したドメイン名コンソールで、ドメイン名にマップするように CNAME を構成します。次の図は、Alibaba Cloud のドメイン名コンソールを例にしています。ドメイン名を購入したばかりでまだ登録していない場合は、クラウド開発プラットフォーム上で香港のリージョンで製品を作成し、すぐに使用することができます。

クラウド開発プラットフォームのアプリケーション詳細ページで、オンライン環境の「ドメイン名構成」をクリックし、設定されたドメイン名をバインドし、日常環境の構成に従って「環境構成」を実行します。保存後、「オンライン開発デプロイメント」を開いてワンクリックでデプロイメントを実行し、独自のドメイン名を使用してアクセスできるようになります。

卒業年鑑のカスタマイズ機能

。背景画像の変更

index.htmlのURLパスをimages/classroom.pngに変更するか、フォルダ内のclassroom.pngファイルを置き換えます。

本文 { パースペクティブ: 1000px;表示: ブロック;パディング:0;マージン:0;オーバーフロー:非表示;背景画像:url("images/classroom.png");背景の位置: 中央 中央;背景繰り返し: 繰り返しなし;背景サイズ: カバー;
桜の透明感

index.htmlで、不透明度を0から1の間の数値に変更します。1は完全に透明で、0は見えません。

/*桜の透明度*/ canvas { padding:0;マージン:0;不透明度:0.3;
タイミングを合わせる

js/time.jsに入学年を入力すると、一緒に過ごした時間を計算できます

var arr = "2018-10-1 21:00:00".split(/[- :]/); //ここを変更 var box = document.getElementsByClassName('textCon')[0];
白黒の卒業記念の言葉

js/typing.js 内の str の内容と表示速度、つまりその時点で黒板に表示される内容を変更します。フォントサイズ/色/位置はCSSで調整できます

let divTyping = document.getElementById('text') //divlet i = 0, //initialize timer = 0, str = '山々の端がなくなり、天と地が一つになったとき、私はあなたと決別できる' //表示される単語 function Typing () { if (i <= str.length) { divTyping.innerHTML = str.slice(0, i++) + '_' //単語が表示されない場合は、文字列から切り取ります timer = setTimeout(typing, 450) //各時間間の間隔 }
アルバムを回転

css/xuanzhuan.css では、画像、画像サイズ、回転アルバムの位置をカスタマイズして、画像フォルダ内の画像を置き換えることができます。

.xuanzhuan { 幅:200px;高さ:200px;マージン: 100px 自動;背景: url("../images/xuanzhuan/shu.jpg") 繰り返しなし;背景サイズ: カバー;変換スタイル: 3D を保持します。位置: 絶対;トランジション: 15 秒のリニア;上位: 50%;左: 42%; z-index: initial;}.xuanzhuan:hover{ transform: rotateY(360deg);}.xuanzhuan div{ height:150px;幅: 200ピクセル;位置: 絶対;背景サイズ: カバー;背景: 繰り返しなし;}.xuanzhuan div:nth-child(1){ /*0,0,2,1*/ 背景: url("../images/xuanzhuan/1.jpg");背景サイズ: カバー; transform:rotateY(0deg) translateZ(400px);}.xuanzhuan div:nth-child(2){ background: url("../images/xuanzhuan/2.jpg");背景サイズ: カバー; transform:rotateY(60deg) translateZ(400px);}.xuanzhuan div:nth-child(3){ background: url("../images/xuanzhuan/3.jpg");背景サイズ: カバー; transform:rotateY(120deg) translateZ(400px);}.xuanzhuan div:nth-child(4){ background: url("../images/xuanzhuan/4.jpg");背景サイズ: カバー; transform:rotateY(180deg) translateZ(400px);}.xuanzhuan div:nth-child(5){ background: url("../images/xuanzhuan/5.jpg");背景サイズ: カバー; transform:rotateY(240deg) translateZ(300px);}.xuanzhuan div:nth-child(6){ background: url("../images/xuanzhuan/6.jpg");背景サイズ: カバー;変換:回転Y(300度) 移動Z(300ピクセル);}
BGMミュージック

ここでは外部リンクを使って音楽を紹介します。独自のローカル音楽ファイルを使用することもできます。その場合は開くのが速くなります。プロジェクトのルートパスに配置して直接参照するだけです。まず外部リンクを生成し、それをindex.htmlに導入し、index.htmlの下のaudioタグ内のsourceタグのsrc属性にリンクを貼り付けます。

<!--音楽--><オーディオ コントロール class="music"> <source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg"></audio>