- 投稿日：2019-08-27T19:35:27+09:00
Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開
Vue.jsを学び始めてCSSアニメーションも触ってみたいという事で簡単なアプリを作ってみました。
基本的なVue.jsの機能で始めたばかりの方でも比較的に読み進めやすいかと思います。
話題のFirebaseでの無料公開もとても簡単なので方法をまとめました。? ラーメンタイマー
・アプリURL
https://cupramen-timer.firebaseapp.com/
・GitHub - ソースコード
https://github.com/aocattleya/Ramen_Timer
（スターなど貰えるととても喜びます..！）
アプリの内容
使用している物 説明 HTML --- CSS animationプロパティを使用 Vue.js JavaScriptフレームワーク Firebase 無料枠でアプリを公開する --- --- SweetAlert アラートを簡単にデザインするライブラリ GoogleFonts フォントの変更 FireAlpaca ペイントツール（無料）
3分 or 5分のボタンをホバーするとキャラクターが左右に振り向きます。
時間を選びクリックするとカウントダウンタイマーが使える簡単な内容です。
レスポンシブデザイン（スマホ）にも対応しています。※左右の振り向きはしない
キャラクターデザイン
まず一番目立つキャラクター
自分は元々漫画家のアシスタントをしていた時期などがあり、
描いた物をアプリに組み合わせてみたかったので描き描き。
レイヤーといって何枚もの板が重なっている感じで描かれています。
なので例えば手を消すと下に隠れている髪が出てきます。
これによって一枚描いたら背景などが簡単に変更でき、左右反転させて手を描けば2枚完成。※猫の方が万人受けする。名前募集中！
こちらに原寸サイズ画像＆レイヤーファイルを公開しています。
illustration-Original_Characters（GitHub）
? コードの解説
それぞれ分けて解説していきます。
コードは分かりやすいように関係ない部分を大幅に省略して書いてます。
・キャラクターを左右に振り向かせる
1行目、
v-bind:class=""によってclassを「右顔CSS」⇔「左顔CSS」と書き替えており、
きっかけは、それぞれの3分と5分ボタンにあるv-on:mouseover=""index.html<!-- キャラクター --> <img v-bind:class="{ right_face: isRight, left_face: isLeft }" /> <div class="pick-button"> <!-- 3分ボタン --> <input type="image" src="img/3min.png" v-on:mouseover="rotate_left" /> <!-- 5分ボタン --> <input type="image" src="img/5min.png" v-on:mouseover="rotate_right" /> </div> </div>
JavaScript側では下記のようにボタンをホバーした時に、
「true」⇔「false」で切り替わる処理を書いています。main.jsconst vm = new Vue({ el: "#app", data: { isLeft: false, isRight: true, }, methods: { rotate_left: function() { this.isLeft = true; this.isRight = false; }, rotate_right: function() { this.isLeft = false; this.isRight = true; } } });
右顔のCSSアニメーションstyle.css.right_face { border-radius: 50%; background-image: url(../img/button_right.png); animation: anime 0.4s linear 2; } @keyframes anime { 100% { transform: rotateY(360deg); } }・
border-radius: 50%で画像を丸くする。
・そしてanimationプロパティ、長さなどを設定でき@keyframesで動きを付けます。
上記は100%終了時までにY軸に360度回転としています。
・ボタン選択で画面の切り替え
ページは変わっていません。
Vue.jsで最初の画面を非表示にし、非表示になっていたタイマー画面を表示させています。
3分 or 5分ボタンを押すと
v-on:click="show = !show"によって、
<div v-show="!show">⇔<div v-show="show">と画面表示が切り替わります。index.html<!-- 3分 or 5分ボタン選択画面 --> <div v-show="!show"> <input type="image" src="img/3min.png" v-on:click="show = !show" /> <input type="image" src="img/5min.png" v-on:click="show = !show" /> </div> <!-- タイマー画面 --> <div v-show="show"> <span id="minutes">{{ minutes }}</span> <span id="middle">:</span> <span id="seconds">{{ seconds }}</span> <!-- 省略 --> </div>
・タイマーの実装
index.html<!-- 3分 or 5分ボタン --> <input type="image" src="img/3min.png" v-on:click="show = !show; threeMin()" /> <input type="image" src="img/5min.png" v-on:click="show = !show; fiveMin()" />3分 or 5分ボタンをクリックした時に、
v-on:click="threeMin()"又はv-on:click="fiveMin()"が実行され、
タイマー画面でカウントする時間を3:00 or 5:00にします。
index.html<!-- タイマー --> <div class="timer"> <span id="minutes">{{ minutes }}</span> <span id="middle">:</span> <span id="seconds">{{ seconds }}</span> </div> <div id="buttons"> <!-- スタート --> <input type="image" src="img/start.png" v-on:click="startTimer" v-if="!timer" /> <!-- ストップ --> <input type="image" src="img/stop.png" v-on:click="stopTimer" v-if="timer" /> <!-- リセット --> <input type="image" src="img/reset.png" v-on:click="resetTimer" v-if="resetButton" /> </div>タイマーのカウントは、HTMLの
{{ minutes }} : {{ seconds }}
この部分がVue.jsの処理でタイマーのように変更されていきます。
main.jsconst vm = new Vue({ el: "#app", data: { timer: null, pickTime: null, totalTime: null, resetButton: false }, methods: { // 3分 or 5分ボタン threeMin: function() { this.pickTime = 3 * 60; this.totalTime = this.pickTime; }, fiveMin: function() { this.pickTime = 5 * 60; this.totalTime = this.pickTime; }, // スタート startTimer: function() { this.timer = setInterval(() => this.countdown(), 1000); this.resetButton = true; }, // ストップ stopTimer: function() { clearInterval(this.timer); this.timer = null; this.resetButton = true; }, // リセット resetTimer: function() { this.totalTime = this.pickTime; clearInterval(this.timer); this.timer = null; this.resetButton = false; }, // 秒が一桁の場合0を追加 padTime: function(time) { return (time < 10 ? "0" : "") + time; }, // カウントダウン countdown: function() { if (this.totalTime >= 1) { this.totalTime--; } else { this.totalTime = 0; this.resetTimer(); swal("Complete!!", "", "success"); } } }, computed: { // タイマーの数値 minutes: function() { const minutes = Math.floor(this.totalTime / 60); return minutes; }, seconds: function() { const seconds = this.totalTime - this.minutes * 60; return this.padTime(seconds); } } });
computed:の部分がHTMLのタイマー{{ }}に表示され、ボタンで各methods:が働き、
スタートを押すとsetInterval()により、一秒ごとにcountdownが実行されます。
・アラートデザイン『SweetAlert』
簡単にアラートがデザイン出来るライブラリ
ブラウザからCDN経由で読み込みができます。index.html<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>main.jsswal("Complete!!", "", "success");これだけ、凄い！
このアラートはスマホでも同じデザインで表示されます。その他の使い方は下記のページが分かりやすいです。
- SweetAlertバージョン2を使ったデモ
? Firebaseで公開（無料）
Firebase - Google
最近とても話題のFirebaseで、作成したアプリを無料での公開。
データベースなど複雑に使う事も可能ですが、今回は簡単に無料で公開してみます。下記はQiita用に
testプロジェクトで進めていますが、任意の名前にしてください。１、ログイン
Firebaseのページを開いてログイン２、プロジェクトの作成
プロジェクト名を記入します。
IDの部分はURLになりますので好みのIDに書き変えましょう。Googleアナリティクスの設定を聞かれます。
今回は、使用しないで進めます。３、フォルダの設定
Desktopにプロジェクト名と同じフォルダを作成します。
中にpublicという名前でフォルダを作成して公開したいコードを入れます。
４、Node.jsのインストール
まだ入ってない方はインストールしてください。
すぐ終わります。５、firebase-toolsをインストール
npm install -g firebase-tools６、ログイン
firebase login利用状況のデータを送っても良いか聞かれたら任意でY/n
次にGoogleログイン画面が表示されるので、アカウントを選び進めます。６、デプロイ設定
cd Desktop/testプロジェクトのフォルダに移動します。
firebase init下記のような画面が表示されます。
◉ Hosting: Configure and deploy Firebase Hosting sites
Hostingをスペースで選択してからEnterを押します。
※スペースで選択していなとエラーとなる。? Please select an option:
Don't set up a default projectを選択してEnter? What do you want to use as your public directory?(public)そのままEnter（デフォルトの
publicとなる）? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)そのままEnter（デフォルトでN）
? File public/index.html already exists. Overwrite? (y/N)index.htmlを上書きしていいか聞いてくるのでN（そのままEnterでN）
上手くいきました。・公開する
firebase use --add上記でEnter
? Which project do you want to add? > test-71a0e作成したプロジェクトを選択します。
? What alias do you want to use for this project? (e.g. staging)名前は任意です。今回は
stagingとしました。firebase deploy完了です！
Hosting URL:をブラウザでアクセス
こうして完成、簡単にFirebaseでの公開も出来ました。使ってね！
・ラーメンタイマー
https://cupramen-timer.firebaseapp.com/
・ソースコード - GitHub
https://github.com/aocattleya/Ramen_Timer
終わりに
まだVue.js学びたてだけど何か作ってみたい、
CSSアニメーションも使って絵も描いて組み合わせたい！そんな考えから簡単に作ってみたアプリでシンプルに見えて苦戦もありました。
しかし言語を学習してるだけと違い、新たな発見と理解はとても多かったです。
基本的な構文でここまで作れて達成感も大きかったので凄くやって良かったと思います。最後まで読んでくれてありがとうございました。
参考
・【CSS3】@keyframes と animation 関連のまとめ
・SweetAlertバージョン2を使ったデモ
・Firebaseを用いて5分でセキュアなWebサイトを公開するリンク
GitHub
https://github.com/aocattleya
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya
- 投稿日：2019-08-27T19:35:27+09:00
Vue.jsとCSSアニメーションでラーメンタイマーを作った + Firebaseで簡単公開
Vue.jsを学び始めてCSSアニメーションも触ってみたいという事で簡単なアプリを作ってみました。
基本的なVue.jsの機能で始めたばかりの方でも比較的に読み進めやすいかと思います。
話題のFirebaseでの無料公開もとても簡単なので方法をまとめました。? ラーメンタイマー
・アプリURL
https://cupramen-timer.firebaseapp.com/
・GitHub - ソースコード
https://github.com/aocattleya/Ramen_Timer
（いいねやスター貰えるととても喜びます！）
アプリの内容
使用している物 説明 HTML, CSS animationプロパティを使用 Vue.js JavaScriptフレームワーク Firebase 無料枠でアプリを公開する --- --- SweetAlert アラートを簡単にデザインするライブラリ GoogleFonts フォントの変更 FireAlpaca ペイントツール（無料）
3分 or 5分のボタンをホバーするとキャラクターが左右に振り向きます。
時間を選びクリックするとカウントダウンタイマーが使える簡単な内容です。
レスポンシブデザイン（スマホ）にも対応しています。※左右の振り向きはしない
キャラクターデザイン
まず一番目立つキャラクター
自分は元々漫画家のアシスタントをしていた時期などがあり、
描いた物をアプリに組み合わせてみたかったので描き描き。
レイヤーといって何枚もの板が重なっている感じで描かれています。
なので例えば手を消すと下に隠れている髪が出てきます。
これによって一枚描いたら背景などが簡単に変更でき、左右反転させて手を描けば2枚完成。※猫の方が万人受けする。名前募集中！
こちらに原寸サイズ画像＆レイヤーファイルを公開しています。
illustration-Original_Characters（GitHub）
? コードの解説
それぞれ分けて解説していきます。
コードは分かりやすいように関係ない部分を大幅に省略して書いてます。
・キャラクターを左右に振り向かせる
1行目、
v-bind:class=""によってclassを「右顔CSS」⇔「左顔CSS」と書き替えており、
きっかけは、それぞれの3分と5分ボタンにあるv-on:mouseover=""index.html<!-- キャラクター --> <img v-bind:class="{ right_face: isRight, left_face: isLeft }" /> <div class="pick-button"> <!-- 3分ボタン --> <input type="image" src="img/3min.png" v-on:mouseover="rotate_left" /> <!-- 5分ボタン --> <input type="image" src="img/5min.png" v-on:mouseover="rotate_right" /> </div> </div>
JavaScript側では下記のようにボタンをホバーした時に、
「true」⇔「false」で切り替わる処理を書いています。main.jsconst vm = new Vue({ el: "#app", data: { isLeft: false, isRight: true, }, methods: { rotate_left: function() { this.isLeft = true; this.isRight = false; }, rotate_right: function() { this.isLeft = false; this.isRight = true; } } });
右顔のCSSアニメーションstyle.css.right_face { border-radius: 50%; background-image: url(../img/button_right.png); animation: anime 0.4s linear 2; } @keyframes anime { 100% { transform: rotateY(360deg); } }・
border-radius: 50%で画像を丸くする。
・そしてanimationプロパティ、長さなどを設定でき@keyframesで動きを付けます。
上記は100%終了時までにY軸に360度回転としています。
・ボタン選択で画面の切り替え
ページは変わっていません。
Vue.jsで最初の画面を非表示にし、非表示になっていたタイマー画面を表示させています。
3分 or 5分ボタンを押すと
v-on:click="show = !show"によって、
<div v-show="!show">⇔<div v-show="show">と画面表示が切り替わります。index.html<!-- 3分 or 5分ボタン選択画面 --> <div v-show="!show"> <input type="image" src="img/3min.png" v-on:click="show = !show" /> <input type="image" src="img/5min.png" v-on:click="show = !show" /> </div> <!-- タイマー画面 --> <div v-show="show"> <span id="minutes">{{ minutes }}</span> <span id="middle">:</span> <span id="seconds">{{ seconds }}</span> <!-- 省略 --> </div>
・タイマーの実装
index.html<!-- 3分 or 5分ボタン --> <input type="image" src="img/3min.png" v-on:click="show = !show; threeMin()" /> <input type="image" src="img/5min.png" v-on:click="show = !show; fiveMin()" />3分 or 5分ボタンをクリックした時に、
v-on:click="threeMin()"又はv-on:click="fiveMin()"が実行され、
タイマー画面でカウントする時間を3:00 or 5:00にします。
index.html<!-- タイマー --> <div class="timer"> <span id="minutes">{{ minutes }}</span> <span id="middle">:</span> <span id="seconds">{{ seconds }}</span> </div> <div id="buttons"> <!-- スタート --> <input type="image" src="img/start.png" v-on:click="startTimer" v-if="!timer" /> <!-- ストップ --> <input type="image" src="img/stop.png" v-on:click="stopTimer" v-if="timer" /> <!-- リセット --> <input type="image" src="img/reset.png" v-on:click="resetTimer" v-if="resetButton" /> </div>タイマーのカウントは、HTMLの
{{ minutes }} : {{ seconds }}
この部分がVue.jsの処理でタイマーのように変更されていきます。
main.jsconst vm = new Vue({ el: "#app", data: { timer: null, pickTime: null, totalTime: null, resetButton: false }, methods: { // 3分 or 5分ボタン threeMin: function() { this.pickTime = 3 * 60; this.totalTime = this.pickTime; }, fiveMin: function() { this.pickTime = 5 * 60; this.totalTime = this.pickTime; }, // スタート startTimer: function() { this.timer = setInterval(() => this.countdown(), 1000); this.resetButton = true; }, // ストップ stopTimer: function() { clearInterval(this.timer); this.timer = null; this.resetButton = true; }, // リセット resetTimer: function() { this.totalTime = this.pickTime; clearInterval(this.timer); this.timer = null; this.resetButton = false; }, // 秒が一桁の場合0を追加 padTime: function(time) { return (time < 10 ? "0" : "") + time; }, // カウントダウン countdown: function() { if (this.totalTime >= 1) { this.totalTime--; } else { this.totalTime = 0; this.resetTimer(); swal("Complete!!", "", "success"); } } }, computed: { // タイマーの数値 minutes: function() { const minutes = Math.floor(this.totalTime / 60); return minutes; }, seconds: function() { const seconds = this.totalTime - this.minutes * 60; return this.padTime(seconds); } } });
computed:の部分がHTMLのタイマー{{ }}に表示され、ボタンで各methods:が働き、
スタートを押すとsetInterval()により、一秒ごとにcountdownが実行されます。
・アラートデザイン『SweetAlert』
簡単にアラートがデザイン出来るライブラリ
ブラウザからCDN経由で読み込みができます。index.html<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>main.jsswal("Complete!!", "", "success");これだけ、凄い！
このアラートはスマホでも同じデザインで表示されます。その他の使い方は下記のページが分かりやすいです。
- SweetAlertバージョン2を使ったデモ
? Firebaseで公開（無料）
Firebase - Google
最近とても話題のFirebaseで、作成したアプリを無料で公開。
データベースなど複雑に使う事も可能ですが、今回は簡単に無料で公開してみます。下記はQiita用に
testプロジェクトで進めていますが、任意の名前にしてください。１、ログイン
Firebaseのページを開いてログイン２、プロジェクトの作成
プロジェクト名を記入します。
IDの部分はURLになりますので好みのIDに書き変えましょう。Googleアナリティクスの設定を聞かれます。
今回は、使用しないで進めます。３、フォルダの設定
Desktopにプロジェクト名と同じフォルダを作成します。
中にpublicという名前でフォルダを作成して公開したいコードを入れます。
４、Node.jsのインストール
まだ入ってない方はインストールしてください。
すぐ終わります。５、firebase-toolsをインストール
npm install -g firebase-tools６、ログイン
firebase login利用状況のデータを送っても良いか聞かれたら任意でY/n
次にGoogleログイン画面が表示されるので、アカウントを選び進めます。６、デプロイ設定
cd Desktop/testプロジェクトのフォルダに移動します。
firebase init下記のような画面が表示されます。
◉ Hosting: Configure and deploy Firebase Hosting sites
Hostingをスペースで選択してからEnterを押します。
※スペースで選択していなとエラーとなる。? Please select an option:
Don't set up a default projectを選択してEnter? What do you want to use as your public directory?(public)そのままEnter（デフォルトの
publicとなる）? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)そのままEnter（デフォルトでN）
? File public/index.html already exists. Overwrite? (y/N)index.htmlを上書きしていいか聞いてくるのでN（そのままEnterでN）
上手くいきました。・公開する
firebase use --add上記でEnter
? Which project do you want to add? > test-71a0e作成したプロジェクトを選択します。
? What alias do you want to use for this project? (e.g. staging)名前は任意です。今回は
stagingとしました。firebase deploy完了です！
Hosting URL:をブラウザでアクセス
こうして完成、簡単にFirebaseでの公開も出来ました。使ってね！
・ラーメンタイマー
https://cupramen-timer.firebaseapp.com/
・ソースコード - GitHub
https://github.com/aocattleya/Ramen_Timer
終わりに
まだVue.js学びたてだけど何か作ってみたい
CSSアニメーションも使って絵も描いて組み合わせたい！そんな考えから簡単に作ってみたアプリでシンプルに見えて苦戦もありました。
しかし言語を学習してるだけと違い、新たな発見と理解はとても多かったです。
基本的な構文でここまで作れて達成感も大きかったので凄くやって良かったと思います。次はさらにレベルを上げて作ってみたいですね！
最後まで読んでくれてありがとうございました。
参考
・【CSS3】@keyframes と animation 関連のまとめ
・SweetAlertバージョン2を使ったデモ
・Firebaseを用いて5分でセキュアなWebサイトを公開するリンク
https://github.com/aocattleya
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya
- 投稿日：2019-08-27T17:19:33+09:00
【p5.js】p5.jsでクリエイティブなwebサイトを作る
p5.jsをはじめよう
p5.jsとはビジュアルプログラミング言語ProcessingをJavascriptに移植したライブラリです。
クリエイティブコーディングやVJで用いられるのをよく見かけますが、
この記事では普段のwebサイト制作で使えるようなp5.jsの活用方法をまとめていきます！p5.jsを仕事で書きたい！
でも実用的でないと書けない！
webサイトで良い感じに組み込んで良い感じの見た目が作れるんだよとアピールして
仕事でp5.jsを書いていきたい全ての人に捧げますインストール
まずp5.jsをインストールします。
https://p5js.org/get-started/
この記事では詳細を割愛します…！
こちらの公式ドキュメントより直接DLするか、CDNで読み込んでください。セットアップ
ベーシックなhtmlを用意します。
index.html<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>p5 sample</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script> <script src="sketch.js"></script> </head> <body> </body> </html>今回は別途sketch.jsを用意し、以下のようにp5.jsの記述をしていきます。
sketch.jsfunction setup() { } function draw() { }p5.jsの基本形
さて、まずはじめにp5.jsの基本の書き方を押さえていきます。
sketch.jsfunction setup() { createCanvas(width, height); // width, heightにcanvasの大きさを記述 } function draw() { // 図形など }基本的にp5.jsでは
setup関数でcanvasを生成し、draw関数にcanvasへ描画する図形を書いていきます。
（setup関数はページ読み込み時一回だけ実行、draw関数は1秒に６０回ごと実行されます :引用）p5.jsの公式サイトではこんなサンプルが紹介されています。
function setup() { } function draw() { ellipse(50, 50, 80, 80); }ellipseは円を描くコンポーネント。
実行すると以下のようにシンプルな円が描かれます。
はい。超簡単。
コード数行で簡単に図形を描くことができました。p5.jsでできること
さて、基本形はわかりましたが、実際書いていくにはどんなコンポーネントを使うことができるのでしょうか？
公式ドキュメントに一覧が載っていますが、この記事ではかいつまんで少しだけご紹介します。2D図形
先ほどの例のような円から四角形、線などが描画できます。
例
- ellips(x, y, w, h); // 円
- line(): // 線
- rect(x, y, w, h); // 四角形3D図形
3Dを扱う場合にはsetup関数でcanvasを生成するときにwidth, heightの後にWEBGLとを表記する必要がありますので注意しましょう。
例
- bod(x, y, z); //直方体
- sphere(radius); // 球
- cylinder(radius, height); // 三角錐アニメーション
アニメーションで表現の幅を増やすこともできます
例
- translate(x, y, z); // 3D描画の場合のxyz軸への移動
- rotateX(frameCount * 0.01); // x軸方向の回転その他にもシェーダーを記述できたり、テクスチャをつけたり、色々なことができます。
公式リファレンスp5.jsをwebサイトで利用しよう
それではここから発展系！
p5.jsで作ったものをwebサイトに活用してクリエイティブなwebサイトをサクサク作ってみましょう！この記事ではこんなものを試してみました
1. webサイトの背景
2. カーソルで遊ぶ
3. お絵かき機能をつける1. webサイトの背景
p5.jsで作った絵をwebサイトの背景に使ってみましょう！
完成イメージ
p5.jsのcanvasをz-index=-1にすることで、背景にクリエイティブな図形を表示させることができます。
cssの設定はこちらの記事が参考になります！
https://qiita.com/ryomeguro/items/02e0f4b40f9cc8d3045eJSはこちら
sketch.jsfunction windowResized() { resizeCanvas(windowWidth, windowHeight); canvasSetup; } function setup() { canvas = createCanvas(windowWidth, windowHeight, WEBGL); } function draw() { background(255); for (var y = 0; y <= 1000; y = y + 500) { for (var x = 0; x <= 1000; x = x + 500) { noFill(); stroke(255, 147, 206); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(200, 200, 200); } } }なんだかイケてるIT企業のコーポレートサイトみたいですね。
仕事で超使えそうです。2. カーソルで遊ぶ
p5.jsでマウスカーソルの表現をちょっとリッチに変えてみましょう！
完成イメージ
これは１の背景と同じようにcss側でcanvasのz-indexを一番低くしておき、
また、backgroundの色を黒に設定しておきます。sketch.jsfunction windowResized() { resizeCanvas(windowWidth, windowHeight); canvasSetup; } function setup() { canvas = createCanvas(windowWidth, windowHeight); } function draw() { background(0, 30); ellipse(mouseX, mouseY, 40, 40); fill(230); noStroke(); }setup関数の読み込みが一回に対して、draw関数は基本的に１フレームごとに都度描画されます。
その都度backgroundも描画されていますので
backgroundの色を半透明にすることでマウス追従の図形の色が時間が経つにつれて薄くなる、という表現を可能にしています。こちらの記事を参考にさせていただきました：
https://www.i-ryo.com/entry/2019/07/21/1942433. お絵かき機能をつける
マウスやスマホのタッチで絵が描けるお絵かき機能も、p5.jsなら簡単に実装できます。
完成イメージ
コードはこちら
sketch.jsfunction setup() { canvas = createCanvas(windowWidth / 2, windowHeight / 3); background(8, 91, 26); } function touchMoved() { smooth(); stroke(255); strokeWeight(4); line(mouseX, mouseY, pmouseX, pmouseY); return false; } function download() { var canvas = document.getElementById("defaultCanvas0"); var link = document.getElementById("DLlink") link.href = canvas.toDataURL() // document.getElementById("canvasImage").src = canvas.toDataURL() link.click() }消すボタンは
<a href="javascript:setup()" class="btn">消す</a>
こんな感じでhtmlからもう一度setup関数を呼び出しています。canvasをpngに変換してダウンロードさせるコードはこちらを参考にさせていただきました！
https://qiita.com/iwaimagic/items/1d16a721b36f04e91aedまとめ
p5.jsは簡単なことから複雑な描画までを実現できます。
web表現のアイディアのひとつとして、カジュアルに仕事で使っていきたいですね♪
- 投稿日：2019-08-27T16:36:30+09:00
【HTML】お問い合わせフォームの作り方
はじめに
こんにちは。
未来電子テクノロジーでインターンシップに参加している佐藤詩乃です。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。今回は、お問い合わせフォームの作り方をご紹介します。
お問い合わせフォームとは
お問い合わせフォームとは、閲覧者がウェブサイトのオーナーにメッセージを送ることができる欄です。
このようなものです。
このフォームを作るHTMLコードをご紹介します。
お問い合わせフォームのコード
まず、見出しには h2タグを使用します。
見出し<h2>お問い合わせ</h2>
次に、1行入力用のフォームを作ります。
ここでは、お問い合わせフォーム全体のdivを"contact-form"というクラスに指定します。
各フォームの見出しはpタグで指定し、1行入力用のフォームにはinputタグを使用してください。1行入力用フォーム<div class="contact-form"> <p>お名前(必須)</p> <input> <p>メールアドレス(必須)</p> <input> <p>佐藤への応援メッセージ(必須)</p> <input>
複数行入力用フォームには、textareaタグを使用します。
複数行入力用フォーム<p>お問い合わせ内容(必須)</p> <textarea></textarea>
送信ボタンを作るためには、以下のコードを使います。送信ボタン<div class="botton"> <input class="contact-submit" type="submit" value="送信"> </div>これらをすべてまとめると、以下のコードになります。
まとめたコード<div class="contact-form"> <p>お名前(必須)</p> <input> <p>メールアドレス(必須)</p> <input> <p>佐藤への応援メッセージ(必須)</p> <input> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <div class="botton"> <input class="contact-submit" type="submit" value="送信"> </div> </div>
- 投稿日：2019-08-27T10:39:06+09:00
[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●
この記事について
CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。
タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`)
See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen.
カップとかストローとかもCSSで作ってみた。
せっかくなのでカップとかのところも解説するぞ。
(アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜)全国のタピオカ好きのみんなに見てほしい・・・・
カップのCSS
カップを構成している要素は大きく全部で5つ。
・カップ
・カップの蓋
・カップの中身
・ストロー
・タピオカこんな感じにパーツを分けて作ったよ。
パーツごとに作ってただただposition:absolute;で乗せていったんだぜ！
そんな難しいことしてないけどせっかく作ったから一個ずつ見ていくぞ！その前にabsoluteのmixinつくる
今回はめちゃくちゃ
position:absolute;するので、
記述を少なくするために@mixinをぶち込もう！！！@mixin absolute($top:null, $right:null, $bottom:null, $left:null){ position: absolute; @if $top != null{ top: $top; } @if $right != null{ right: $right; } @if $bottom != null{ bottom: $bottom; } @if $left != null{ left: $left; } }このmixinを入れることで、例えば
@include absolute($top:0,$right:0);
と書くと、position:absolute; top:0; right:0;ってコンパイルされるようになるよ！便利だね！！
カップ作るぞい
まずはカップの真ん中の部分を作るぞ〜〜〜！！
なぜかというとこいつを基準に他のパーツを乗っけていくからだよ！
<div class="cup"> <div class="cup__bottom"></div> </div>HTMLはこれだけ。
SCSSはこんな感じだ！%cup,.cup{ //カップの台形 position: relative; width: 120px; height: 200px; background: #fff; &:before{ content: ' '; border-right: 20px solid #fff; border-bottom: 200px solid transparent; border-radius: 6px 0 0 0 ; @include absolute($top:0,$left:-20px); } &:after{ content: ' '; border-left: 20px solid #fff; border-bottom: 200px solid transparent; border-radius:0 6px 0 0 ; @include absolute($top:0,$right:-20px); } //カップの底 &__bottom{ width: 120px; height: 40px; border-radius: 60px / 20px; background:#fff; @include absolute($bottom:-20px,$left:0); } }カップの台形
白い台形部分は、
.cupクラスに:beforeと:afterで
横のほっそい三角の部分をつけて台形にしている感じ。「なんでborder-bottomとborder-leftでこんな風に三角になるの・・・？」って思う人、
私もよくわからない・・。すまん・・・・・・。
誰か親切な方、教えてください（切実）。
とりあえず私はこのサイトを参考に作ったぞ・・
html – 台形を逆にするにはどうすればいいですか？
border-bottomで三角形の高さが指定できて、
border-rightとborder-leftで三角の細さを指定できるってことはわかった。うん。カップの底
カップの底は横に長い楕円だぞ。
楕円は、widthとheightに対してborder-radiusを半分にしてあげればできるぞい。今回だとここの部分。
width: 120px; height: 40px; border-radius: 60px / 20px;これでバキッと楕円ができるよ。
で、こいつをカップの台形の下につければカップの真ん中部分は完成だぞ。
カップの中身だぞ
カップとおんなじような感じなので、つぎはカップの中身のHTMLとCSSを作ろう。<!-- カップの中身 --> <div class="cup__inner-wrap"> <div class="cup__inner-top"></div><!-- カップの中身の上の楕円 --> <div class="cup__inner"></div><!-- カップの中身の台形 --> <div class="cup__inner-bottom"></div><!-- カップの中身の下の楕円 --> </div>このHTMLを
.cupの中に入れるぞ。ちなみに
.cup__inner-wrapでわざわざ囲ってるのは、
.cup__innerはカップの中身の基準となるパーツなのでposition:relative;だけど、
最終的にカップの中身はposition:absolute;させてカップの中に入れたいからだよ！で、SCSSはこうだぞ！
%cup,.cup{ //本当はここにさっき書いたSCSSが入るけど長くなるので省略 //カップの中身を囲うラップ &__inner-wrap{ @include absolute($bottom:0,$left:-40px); } //カップの中身の台形 &__inner{ width: 110px; height: 150px; background: #c49a6a; margin-left: 45px; position: relative; z-index:2; &:before{ content: ' '; border-right: 15px solid #c49a6a; border-bottom: 150px solid transparent; border-radius: 3px 0 0 0 ; @include absolute($top:0,$left:-15px); } &:after{ content: ' '; border-left: 15px solid #c49a6a; border-bottom: 150px solid transparent; border-radius:0 3px 0 0 ; @include absolute($top:0,$right:-15px); } } //カップの中身の上の楕円 &__inner-top{ width: 140px; height: 30px; background-color: #deb887; border-radius: 70px / 15px; z-index:3; @include absolute($top:-12px,$left:30px); } //カップの中身の下の楕円 &__inner-bottom{ width: 110px; height: 30px; border-radius: 55px / 15px; background-color: #c49a6a; z-index:1; @include absolute($top:134px,$left:45px); } }さっきと同じような感じで、
.cup__innerで台形を作って、
上と下に楕円をposition:absolute;で重ねてるよ。カップの蓋だぞ
カップの上の部分は、二つの楕円と細い四角で構成してるぞ。
例のごとくposition:absolute;して.cupに乗せてくぞ。<!-- カップの蓋 --> <div class="cup__top"></div>HTMLはこれだけだぞ！
で、SCSSはこんな感じ。//カップの蓋 &__top{ width: 170px; height: 30px; border-radius: 85px / 15px; background:#f5f5f5; z-index:3; @include absolute($top:5px,$left:-24px); &:before{ width:170px; height:13px; background:#f5f5f5; content:' '; @include absolute; } &:after{ @extend %cup__top; background:#fff; z-index:1; top:-15px; left:0; content:' '; } }灰色の楕円を先に作って、
:beforeで細い灰色の四角の部分を、
:afterで上の白い楕円を乗っけてるぞ。ストロー！
ストローは2本の棒みたいな四角とちっこい楕円で構成してるぞ。
もうだいたいやり方わかってると思うからHTMLとSCSSだけ下に載せとくぞい。<!-- ストロー --> <div class="straw"></div> <div class="straw--bottom"></div>// ストロー %straw,.straw{ background:#ea5550; width:20px; height:70px; z-index:5; @include absolute($top:-70px,$left:50px); &:before{ content:' '; width: 20px; height: 4px; background-color: #ea5550; border-radius: 10px / 2px; @include absolute($bottom:-2px); } &:after{ @extend %straw:before; background-color: #a73836; top:-2px; } &--bottom{ @extend %straw; height:30px; top:30px; left:50px; z-index:4; } }ついにタピオカ
タピオカは
.tapiokaで黒丸を作ってから、ただ.cup__innerの部分に
一粒ずつ例のごとくposition:absolute;してるだけだな。<div class="cup__inner"> <div class="tapioka tsubu-1"></div> <div class="tapioka tsubu-2"></div> <div class="tapioka tsubu-3"></div> <div class="tapioka tsubu-4"></div> <div class="tapioka tsubu-5"></div> <div class="tapioka tsubu-6"></div> <div class="tapioka tsubu-7"></div> <div class="tapioka tsubu-8"></div> </div>.tapioka{ position:absolute; width:20px; height:20px; border-radius:20px; background:#000; } //それぞれの位置はtsubu-の方に書くで、アニメーションは、一個の
@keyframesでアニメーションを作ってから、
それを実行する時間をひと粒ずつ変えてるって感じだぞ！！@keyframes tsubu { 0% { transform:translateY( 0px); } 100% { transform:translateY( 3px); } }今回は、開始値が0px、終了値が縦軸で3pxとした。
つまり、開始位置からアニメーションを終えると3px分下がってる位置にタピオカがあるってこと。【参考】
【CSS3】@keyframes と animation 関連のまとめこの
@keyframesを、.tsubu-1,2,3…のクラスに入れていくぞ。
animation:で以下のような記述を書いていこう！
今回は、この「1s」の部分をタピオカごとに変えていくぞ。
つまりこんな感じで0.1sくらいずつ時間をずらすんや！！！.tsubu{ &-1{ bottom:4px; left:5px; animation: tsubu 1.2s ease-in-out infinite alternate; } &-2{ bottom:-5px; left:28px; animation: tsubu 0.5s ease-in-out infinite alternate; } &-3{ bottom:2px; left:55px; animation: tsubu 1s ease-in-out infinite alternate; } &-4{ bottom:-2px; left:81px; animation: tsubu 0.6s ease-in-out infinite alternate; } &-5{ bottom:34px; left:2px; animation: tsubu 0.8s ease-in-out infinite alternate; } &-6{ bottom:25px; left:30px; animation: tsubu 0.7s ease-in-out infinite alternate; } &-7{ bottom: 32px; left: 61px; animation: tsubu 0.9s ease-in-out infinite alternate; } &-8{ bottom: 24px; left: 86px; animation: tsubu 1.1s ease-in-out infinite alternate; } }これで、一粒ずつちょっと違う動きをするふわふわタピオカが完成するぞい！
やった〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜✌︎('ω'✌︎ )
ただ、もろもろもっといいやり方がある気がするので、
もし親切な方がいたらもろもろ色々教えてくださ〜〜〜〜い！！！！！！追記
隣に座ってる同僚がCSSでにゃんこつくって動かす記事を書いたよ！！！！！！
[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす 〜作る編〜めっちゃ癒されるし勉強になるのでこっちもよろしくな！！！！！！
- 投稿日：2019-08-27T10:35:35+09:00
超優しい先輩に厳しく指摘してもらった"インデント"の流儀
はじめに
2019.06.17に人材系営業からRuby on RailsのWebエンジニアになったでみーと言います。
僕は文系出身で開発は全くの未経験ですが、一念発起してJOBチェンジした者です。
とても優しく指導して下さっている先輩たちのもと、コツコツと勉強を進めているのですが、やはり分からない事も多く、先輩の時間を頂くことが多い恐縮な日々です。。
今回、先輩たちに指摘してもらった"インデント"について、文系なりにまとめてみました。まとめる目的
①なぜインデントが必要なのか
②短な例えで言うとなに？
③どうやって付けるの？
④漏れ抜けしない対策
読者の対象
最近言語を覚えたエンジニア初心者。
後輩にインデントなんて基礎を教えなきゃいけない先輩エンジニアなぜインデントを理解できないのか？
未経験者や初心者人からすると、インデントってなにそれ？美味しいの？って感じです。
そもそもプログラミングしている自分の作業が何なのかイメージできない。
だからそういう人たちにも理解してもらう為には、言語化とイメージ化に両方が必要。①なぜインデントが必要なのか？
そのほうが見やすいでしょう？と言われても、あんまりイメージできない人いませんか？
僕もその一人でした。
まるで「貴様は今まで食ったパンの数を覚えているのか」に等しい感覚でした。
でも、僕たち初心者は綺麗かどうかが分からない。まず存在を理解するだけで精一杯。でも・・・待てよ・・・俺の遠い昔の記憶がこれに似た経験を・・・
②短な例えで言うとなに？
原稿用紙ッ・・・！！！
我々、文系でも馴染みのあるインデントはおそらく原稿用紙の記述ルールだろう。
夏休みの宿題、読書感想文、突然見せられた戦争テーマのアニメ映画
今思い出すだけでも久石譲の「summer」が聞こえてきそうな今日この頃だが、
これ以上に脱線せずにインデントの話の続きをします。[#参考]原稿用紙のルール
https://www.zkai.co.jp/el/course/sakubun_club/sakubun-kakikata/genkouyoushi.html
原稿用紙には、タイトルを書く時に２マス空けたり、名前の場所に指定があったり、改行にルールがあった。
コレが字下げ、インデントと言われるものだ。
このイメージができるとインデントの必要性が理解できてくる。例えば、原稿用紙をルール無用で字下げせずに、ひたすらに書き連ねていくとどうだろうか。
とても汚く読みにくい文章になる。
コーディングとは機械のために言語ではあるが、実際に書くのも直すのも人間だ。
ルールだけではなく、表現もそうだ。
いきなり村上春樹みたいな文章書かれても困るのだ。
誰しもがハルキストでは、ない。③どうやって付けるの？
ルールは会社によって様々だろうが、基本的には半角スペースを２つ付ける。
メソッド名の定義にif文を使うなどする時に[def create]の[end]と[if]の[end]を
きちんと分別しやすくないですか？
def createの条件のためその下のif文はさらにインデントを半角スペース2個分を付ける。
こうすることでend抜けのエラーも把握しやすくなるし、自分も修正しやすくなる。index.controller.rb (2)#カテゴリの新規作成 def create if params[:a_type].present? @create = AType.new(a_type_params) elsif params[:b_category].present? @create = BCategory.new(bcategory_params) end if @create.save @create.update_attributes(name: @create.id) redirect_to admin_customizes_index_path else render :index end endちなみにインデントが無いとこうなる・・・
index.controller.rb (2)#カテゴリの新規作成 def create if params[:a_type].present? @create = AType.new(a_type_params) elsif params[:b_category].present? @create = BCategory.new(bcategory_params) end if @create.save @create.update_attributes(name: @create.id) redirect_to admin_customizes_index_path else render :index end endなんか見づらく無いですか？？
こういう風に理解すると初心者の僕にもとても分かりやすいのだ。
人よがりな自己満足な書き方をしても、それは仕方ない。
さらに初心者は自分でコードの良し悪しが分からないんだから、余計にそうだ。
せめて人に「見ていただく」という視点を意識して今後も一緒に頑張っていきましょう。
僕も覚えがいい方では無いから、皆さんと一緒に頑張っていきたいです。④漏れ抜けしない対策
Visual Studioを使っているんですが、先輩にコレを入れてもらいました。
https://mimumimu.net/blog/2012/06/22/visual-studio-%E3%81%A7%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%87%E3%83%B3%E3%83%88%E3%81%AE%E6%95%B4%E5%BD%A2%E6%96%B9%E6%B3%95%E3%80%82/tabボタンを押すと自動でインデントが入る仕組みになります。
めっちゃ楽・・・スペースを押すために手を下にやる必要がなく便利です。
- 投稿日：2019-08-27T01:28:20+09:00
bootstrapを使う準備
未来電子テクノロジーでインターンをしているkota7175です。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
今回は便利なHTML/CSSフレームワークであるBootstrapについて書きます。Bootstrapとは
Bootstrapとは、HTMLやCSSのフレームワークであり、これを使うことで普通に書くより簡単にWebページをデザインすることができます。
また、グリッドシステムにより、スマホなどの小さな画面にも対応できるレスポンシブなWebページを作ることができます。Bootstrapの使い方
Bootstrapを使うには、まずはこちらからダウンロードします。
現在はBootstrap4が最新です。
ダウンロードできたら展開し、css、jsフォルダがある場所にindex.htmlを作って、以下をコピペします。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>SamplePage</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body></body> </html>ここで重要なのは、Bootstrapを読み込む前にjQueryをWeb上のソースから読み込むことです。
Bootstrapの一部のjsは、jQueryがないと動きません。以上でBootstrapを使う準備は完了です。
具体的な使い方はグリッドシステムなどと一緒に後程またまとめたいと思います。