Granim.js Granim.jsはグラデーションをアニメーション表示させることができるJavaScriptライブラリです。 これを使うと、リッチなWebサイトを作ることができます！ どのようにアニメーション表示されるかは公式サイトのトップページやExamplesをご覧ください。 このGranim.jsをVue.jsのアプリケーションで使ってみます。 手順 1.Gramin.jsのインストール npm install granim 2.コンポーネントの作成 granim.vue <template> <div> <canvas id="granim-canvas"></canvas> </div> </template> <script> import Granim from 'granim' export default { name: 'granim', data () { return { GObj: Object } }, mounted () { this.GObj = new Granim({ element: '#granim-canvas', name: 'granim', opacity: [1, 1], states: { 'default-state': { gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ] } } }) } } </script> <style scoped> #granim-canvas { width: 100vw; height: 100vh; } </style> キモはコンポーネントのmountedライフサイクルフックでGranimをnewするところです。 mounted()に記述するコードは公式サイトの通りに記述すればOKです。 newするときのオプションでスピードや色の指定など様々な表現ができます。 ※上のサンプルコードではESLintのエラー回避のためにdataにnewしたGranimのインスタンスを代入しています。 3.完成! バリエーション Granim.jsを使うとただのグラデーションだけではなく、画像と組み合わせたり、文字に対してグラデーションのアニメーションをつけることができます。公式サイトにやり方が載っています。
Granim.jsはグラデーションをアニメーション表示させることができるJavaScriptライブラリです。 これを使うと、リッチなWebサイトを作ることができます！
どのようにアニメーション表示されるかは公式サイトのトップページやExamplesをご覧ください。
このGranim.jsをVue.jsのアプリケーションで使ってみます。
npm install granim
<template> <div> <canvas id="granim-canvas"></canvas> </div> </template> <script> import Granim from 'granim' export default { name: 'granim', data () { return { GObj: Object } }, mounted () { this.GObj = new Granim({ element: '#granim-canvas', name: 'granim', opacity: [1, 1], states: { 'default-state': { gradients: [ ['#29323c', '#485563'], ['#FF6B6B', '#556270'], ['#80d3fe', '#7ea0c4'], ['#f0ab51', '#eceba3'] ] } } }) } } </script> <style scoped> #granim-canvas { width: 100vw; height: 100vh; } </style>
キモはコンポーネントのmountedライフサイクルフックでGranimをnewするところです。 mounted()に記述するコードは公式サイトの通りに記述すればOKです。 newするときのオプションでスピードや色の指定など様々な表現ができます。
※上のサンプルコードではESLintのエラー回避のためにdataにnewしたGranimのインスタンスを代入しています。
Granim.jsを使うとただのグラデーションだけではなく、画像と組み合わせたり、文字に対してグラデーションのアニメーションをつけることができます。公式サイトにやり方が載っています。
今日やったこと Udemy「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」セクション3の10~18 以下、セクション・パートごとにとったメモです。 セクション３HTML入門 10.イントロダクション-HTML入門- セクション３でやることの確認。 11.HTMLの歴史 HTMLの歴史とW3Cについての動画。 HTML5が2014年から使われたことを知り、意外と最近できたものなんだなと思いました。 12.HTMLの基本構文 開始タグと終了タグで囲ってコードを書く、というHTMLの基本について確認。 ここは特に問題なしという感じです。 13.MDN HTML、CSS、JavaScript、HTTPなどのプログラミング言語やWeb技術に関する説明書のようなサイト。 調べたいことがあれば、MDNを使っても調べられるそうです。 例えば、HTMLのaタグについて調べたかったら、「MDN HTML a」とグーグル検索をかける、という感じです。 14.HTML文書の基本構造 HTMLの基本ついて確認。 Progateをやった人にとっては常識なので、さらっと流し見で大丈夫です。 15.はじめてのHTML Atomエディタの背景色をSettings→thema→UI themaから変更できます。白色に変更できるみたいです。 でも、黒の方がかっこいいですね。 16.補足：日本語が文字化けする場合 <meta charset="utf-8"/> で文字コードをutf-8にすることで日本語の文字化けを防ぎます。 17.HTMLの雛形（テンプレート） 必ず記述する必要のある部分（DOCTYPE宣言や文字コード指定など）がすでに記述されたファイルが添付されています。 18.Atomの設定 不可視文字 Atomの設定で「不可視文字を表示」にチェックをすると、インデントの文字数がわかりやすくなります。 背景が黒なのでわかりづらいですが、インデントの空白の部分に文字数の分だけ点があるのと、終了タグの後ろに改行を表すマークが出てます。 これにより、インデントの空白がわかりやすくなるので、「不可視文字を表示」の設定で使っていこうと思います。 今、受けているUdemyのレッスンは281パートまであり、まだまだ先は長いですが、一歩ずつ確実に進んでいきたいと思います。 引き続き、明日からもプログラミング学習を頑張っていきます。 おわり
以下、セクション・パートごとにとったメモです。
セクション３でやることの確認。
HTMLの歴史とW3Cについての動画。 HTML5が2014年から使われたことを知り、意外と最近できたものなんだなと思いました。
開始タグと終了タグで囲ってコードを書く、というHTMLの基本について確認。 ここは特に問題なしという感じです。
HTML、CSS、JavaScript、HTTPなどのプログラミング言語やWeb技術に関する説明書のようなサイト。 調べたいことがあれば、MDNを使っても調べられるそうです。 例えば、HTMLのaタグについて調べたかったら、「MDN HTML a」とグーグル検索をかける、という感じです。
HTMLの基本ついて確認。 Progateをやった人にとっては常識なので、さらっと流し見で大丈夫です。
Atomエディタの背景色をSettings→thema→UI themaから変更できます。白色に変更できるみたいです。 でも、黒の方がかっこいいですね。
<meta charset="utf-8"/>
で文字コードをutf-8にすることで日本語の文字化けを防ぎます。
必ず記述する必要のある部分（DOCTYPE宣言や文字コード指定など）がすでに記述されたファイルが添付されています。
Atomの設定で「不可視文字を表示」にチェックをすると、インデントの文字数がわかりやすくなります。
背景が黒なのでわかりづらいですが、インデントの空白の部分に文字数の分だけ点があるのと、終了タグの後ろに改行を表すマークが出てます。
これにより、インデントの空白がわかりやすくなるので、「不可視文字を表示」の設定で使っていこうと思います。
今、受けているUdemyのレッスンは281パートまであり、まだまだ先は長いですが、一歩ずつ確実に進んでいきたいと思います。
引き続き、明日からもプログラミング学習を頑張っていきます。
おわり
目的 独自ドメインにてhttpsにする。 使う機能 ASWの以下サービスを使います。 S3 AWS Certificate Manager(ACM) CloudFront Route 53 前提 S3にてアップ済み。 独自ドメインを取得している。 やり方 ①AWS Certificate Manager(ACM)にてSSL/TLSの証明書を取得する。 (1)AWSのサービス検索でcmと打ったら出てきます。 (2)ACMの中に入ったら、必ず、リージョンを米国東部（バージニア北部）に変更しましょう。 かなり重要です。私もここでハマりました。。 (3)パブリック証明書のリクエストを選択して、「証明書のリクエスト」をクリック (4)ドメイン名の空欄に独自ドメインを入れましょう。 例）*.example.com 米印をつけて入れると、ワイルドカードになります。 「次へ」をクリック (5)「DNSの検証」を選択して、「確認」をクリックし、「確定とリクエスト」をクリック。 (6)すると、証明書の画面になり、状況が保留になっていると思います。 名前のところをクリックすると広がり、「route53でのレコードの作成」があると思いますので、クリックします。 route53以外で、独自ドメインを取得された方は、別の方法でレコードを作成する必要があります。 (7）しばらく待つ（長いと１時間以上）と状況が「発行済み」に変わります。 ②CloudFrontの設定をする。 (1)AWSのCloudFrontへアクセスして、「create distribution」をクリックします。 (2)「Get Started」をクリックします。 (3)「Origin Domain Name」の空欄をクリックすると、S3のドメインが上がってくるので、選択します。 (4)Alternate Domain Names(CNAMEs)に独自ドメイン（サブ）を記載します。 （例）www.example.com (5)SSL Certificate Custom SSL Certificate (example.com)を選択します。 空欄をクリックすると先ほど登録した証明書が出てくると思いますので、選択します。 この時、もしリージョンを東京で登録した場合は、出てきません。。 他は全てデフォルトのままで問題ないです。「create distribution」をクリックします。 (6)暫く待ち、Statusが『In Progress』から『Deployed』になれば完了です。 ③route53の設定をする。 サブドメインのレコードセットでtypeAでAlias「yes」ですると、 『Alias Target』には作成したCloudFrontディストリビューションが選択できるようになっているので、 選択します。 これで、完了です。
独自ドメインにてhttpsにする。
ASWの以下サービスを使います。 S3 AWS Certificate Manager(ACM) CloudFront Route 53
S3にてアップ済み。 独自ドメインを取得している。
(1)AWSのサービス検索でcmと打ったら出てきます。 (2)ACMの中に入ったら、必ず、リージョンを米国東部（バージニア北部）に変更しましょう。 かなり重要です。私もここでハマりました。。 (3)パブリック証明書のリクエストを選択して、「証明書のリクエスト」をクリック (4)ドメイン名の空欄に独自ドメインを入れましょう。 例）*.example.com 米印をつけて入れると、ワイルドカードになります。 「次へ」をクリック (5)「DNSの検証」を選択して、「確認」をクリックし、「確定とリクエスト」をクリック。 (6)すると、証明書の画面になり、状況が保留になっていると思います。 名前のところをクリックすると広がり、「route53でのレコードの作成」があると思いますので、クリックします。 route53以外で、独自ドメインを取得された方は、別の方法でレコードを作成する必要があります。 (7）しばらく待つ（長いと１時間以上）と状況が「発行済み」に変わります。
(1)AWSのCloudFrontへアクセスして、「create distribution」をクリックします。 (2)「Get Started」をクリックします。 (3)「Origin Domain Name」の空欄をクリックすると、S3のドメインが上がってくるので、選択します。 (4)Alternate Domain Names(CNAMEs)に独自ドメイン（サブ）を記載します。 （例）www.example.com (5)SSL Certificate Custom SSL Certificate (example.com)を選択します。 空欄をクリックすると先ほど登録した証明書が出てくると思いますので、選択します。 この時、もしリージョンを東京で登録した場合は、出てきません。。 他は全てデフォルトのままで問題ないです。「create distribution」をクリックします。 (6)暫く待ち、Statusが『In Progress』から『Deployed』になれば完了です。
サブドメインのレコードセットでtypeAでAlias「yes」ですると、 『Alias Target』には作成したCloudFrontディストリビューションが選択できるようになっているので、 選択します。 これで、完了です。
display:table カラムの中身の折り返しを抑制する 長い単語の途中で改行を許すにはword-wrapプロパティを使って、値にbreak-wordを設定する。 テーブルセルの中の文字を改行させるには、テーブル全体に幅を指定して、幅を固定する必要がある。 CSS .table { display: table; /* 幅を指定して固定する必要がある width: 300px; table-layout: fixed; */ } .table-cell { display: table-cell; word-wrap: break-word; /* 単独では効果がない */ } display:flex 要素をflexboxでレンダリングするには、displayプロパティを利用して値にflexを設定する。 flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ。 ☆flexboxとは、コンテンツをレイアウトするために導入された、比較的新しい新しいプロパティ ☆歴史順でだとtable→float→flexboxらしい flex-wrap Flexアイテムを所定の幅で折り返す プロパティには次の値が利用できる ●nowrap 改行しない ●wrap 改行する ●wrap-reverse wrapと同じだが、並び順が逆。 ※初期値はnowrapが設定されている flex-direction Flexアイテムの並び順を逆順にする プロパティには次の値が利用できる ●row 左から右に配置 ●row-reverse rowと同じですが、順番が逆 ●column 上から下に配置 ●column-reverse columnと同じだが、順番が逆 ※初期値はrowが設定されている justify-content Flexアイテムを左右中央に配置 プロパティには次の値が利用できる ●flex-start Flexアイテムを始端配置 ●flex-end Flexアイテムを終端に配置 ●center Flexアイテムを中央に配置 ●space-between Flexアイテムを均等に配置。最初のアイテムは始端に、最後のアイテムは終端に配置される。 ●space-around space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースの1/2になる ●space-evenly space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースと同じになる ※初期値はflex-startが設定されている align-items Flexアイテムを上下中央に配置 プロパティには次の値が利用できる ●flex-start Flexアイテムを上部配置 ●flex-end Flexアイテムを下部配置 ●center Flexアイテムを中央配置 ●stretch Flexアイテムはコンテナいっぱいに広がる ※初期値はstretchが設定されている align-content Flexアイテム全体の縦の配置を変更する ※align-contentは、Flexコンテナーに余白がある場合のみ有効 ●flex-start Flexアイテムを上部に配置。 ●flex-end Flexアイテムを下部に配置。 ●center Flexアイテムを中央に配置。 ●space-between Flexアイテムを均等に配置し。最初のアイテムは上部に、最後のアイテムは下部に配置される。 ●space-around space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースの1/2になる。 ●stretch space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースと同じになる。 ※初期値はstretchが設定されている orderプロパティ 配置の順番を変更することができる。初期値は0 負の値を設定することで先頭に配置することができる。 flex-growプロパティ Flexアイテムが占有する幅を調整することができる。 flex-growで調整できる幅は、要素の絶対的な幅ではなく、Flexコンテナーが持つ余白。
長い単語の途中で改行を許すにはword-wrapプロパティを使って、値にbreak-wordを設定する。 テーブルセルの中の文字を改行させるには、テーブル全体に幅を指定して、幅を固定する必要がある。
.table { display: table; /* 幅を指定して固定する必要がある width: 300px; table-layout: fixed; */ } .table-cell { display: table-cell; word-wrap: break-word; /* 単独では効果がない */ }
要素をflexboxでレンダリングするには、displayプロパティを利用して値にflexを設定する。 flexが指定された要素をFlex container(Flexコンテナ) と呼び、その子要素をFlex item(Flexアイテム) と呼ぶ。 ☆flexboxとは、コンテンツをレイアウトするために導入された、比較的新しい新しいプロパティ ☆歴史順でだとtable→float→flexboxらしい
Flexアイテムを所定の幅で折り返す
プロパティには次の値が利用できる ●nowrap 改行しない ●wrap 改行する ●wrap-reverse wrapと同じだが、並び順が逆。 ※初期値はnowrapが設定されている
Flexアイテムの並び順を逆順にする
プロパティには次の値が利用できる
●row 左から右に配置 ●row-reverse rowと同じですが、順番が逆 ●column 上から下に配置 ●column-reverse columnと同じだが、順番が逆 ※初期値はrowが設定されている
Flexアイテムを左右中央に配置
●flex-start Flexアイテムを始端配置 ●flex-end Flexアイテムを終端に配置 ●center Flexアイテムを中央に配置 ●space-between Flexアイテムを均等に配置。最初のアイテムは始端に、最後のアイテムは終端に配置される。 ●space-around space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースの1/2になる ●space-evenly space-betweenと同じ、最初のアイテムと始端との間と最後のアイテムと終端との間のスペースは、各アイテム間のスペースと同じになる ※初期値はflex-startが設定されている
Flexアイテムを上下中央に配置 プロパティには次の値が利用できる
●flex-start Flexアイテムを上部配置 ●flex-end Flexアイテムを下部配置 ●center Flexアイテムを中央配置 ●stretch Flexアイテムはコンテナいっぱいに広がる ※初期値はstretchが設定されている
Flexアイテム全体の縦の配置を変更する ※align-contentは、Flexコンテナーに余白がある場合のみ有効
●flex-start Flexアイテムを上部に配置。 ●flex-end Flexアイテムを下部に配置。 ●center Flexアイテムを中央に配置。 ●space-between Flexアイテムを均等に配置し。最初のアイテムは上部に、最後のアイテムは下部に配置される。 ●space-around space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースの1/2になる。 ●stretch space-betweenと同じ、最初のアイテムと上部との間と最後のアイテムと下部との間のスペースは、各アイテム間のスペースと同じになる。 ※初期値はstretchが設定されている
配置の順番を変更することができる。初期値は0 負の値を設定することで先頭に配置することができる。
Flexアイテムが占有する幅を調整することができる。 flex-growで調整できる幅は、要素の絶対的な幅ではなく、Flexコンテナーが持つ余白。
