挫折克服、、、！ 実際自分のコードが間違っていただけなのですが。 ほんとに反応しなくて焦りました。 持つべきものは教えて貰える環境です。 あと優しい世界。 独り言でなんのアウトプットもありませんが、いいね押してもらえたり情報頂けたりと感謝です、、、 続けることができそうです。 【メモ】 今日やったこと CSSで色を変える デベロッパーツールを見てみる (ctrl ＋ shift ＋ Iで出てくる) 検証してみること
挫折克服、、、！
実際自分のコードが間違っていただけなのですが。 ほんとに反応しなくて焦りました。
持つべきものは教えて貰える環境です。
あと優しい世界。 独り言でなんのアウトプットもありませんが、いいね押してもらえたり情報頂けたりと感謝です、、、
続けることができそうです。
【メモ】 今日やったこと CSSで色を変える デベロッパーツールを見てみる (ctrl ＋ shift ＋ Iで出てくる) 検証してみること
..html <!DOCTYPE html> <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>Document</title> <link rel="stylesheet" href="css/styles.css"> <div class="container"> <main> <img> </main> <nav> <ul> <li id="play">PLAY</li> <li id="prev"><</li> <li id="next">></li> </ul> </nav> <ul class="thumbnails"> </ul> </div> ..javascript 'use strict'; { const images = [ 'img/pic00.png', 'img/pic01.png', 'img/pic02.png', 'img/pic03.png', 'img/pic04.png', 'img/pic05.png', 'img/pic06.png', 'img/pic07.png', ]; //今何番目の画像を表示しているかという変数 let currentNum = 0; // サムネイル画像をクリックしたときの関数処理 function setMainImage(value){ document.querySelector('main img').src = value; } // メインのイメージのソースをimages配列のcurrentNum番目とする // document.querySelector('main img').src = images[currentNum]; setMainImage(images[currentNum]); // currentクラスを外す独自の関数 function removeCurrentClass(){ document.querySelectorAll('.thumbnails li')[currentNum].classList.remove('current'); } function addCurrentClass(){ document.querySelectorAll('.thumbnails li')[currentNum].classList.add('current'); } // thumbnailsクラスの取得 const thumbnails = document.querySelector('.thumbnails'); // サムネイル画像たちの生成 images.forEach((value, index) => { const li = document.createElement('li'); if(index === currentNum){ li.classList.add('current'); } li.addEventListener('click', () => { setMainImage(value); removeCurrentClass(); currentNum = index; addCurrentClass(); }); const img = document.createElement('img'); img.src = value; li.appendChild(img); thumbnails.appendChild(li); }); const next = document.getElementById('next'); next.addEventListener('click', () => { removeCurrentClass(); currentNum++; if(currentNum === images.length){ currentNum = 0; } addCurrentClass(); setMainImage(images[currentNum]); }); const prev = document.getElementById('prev'); prev.addEventListener('click', () => { removeCurrentClass(); currentNum--; if(currentNum < 0){ currentNum = images.length - 1; } addCurrentClass(); setMainImage(images[currentNum]); }); } ..css .container{ width: 300px; margin: 0 auto; user-select: none; } ul{ list-style: none; padding: 0; margin: 0; } main{ margin-bottom: 8px; } main img{ width: 300px; height: 200px; vertical-align: bottom; } nav{ margin-bottom: 8px; } nav ul{ display: flex; justify-content: space-between; } nav li { width: 60px; border: 1px solid #dedede; border-radius: 4px; font-size: 12px; padding: 4px; text-align: center; cursor: pointer; user-select: none; } nav li:hover{ background: #f8f8f8; } play{ width: 140px; } .thumbnails{ display: grid; grid-template-columns: repeat(5, 56px); gap: 5px; } .thumbnails li { cursor: pointer; opacity: 0.4; } .thumbnails li:hover{ opacity: 1; } .thumbnails li.current{ opacity: 1; } .thumbnails img{ width: 56px; vertical-align: bottom; }
..html
<!DOCTYPE html>
<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>Document</title> <link rel="stylesheet" href="css/styles.css">
<div class="container"> <main> <img> </main> <nav> <ul> <li id="play">PLAY</li> <li id="prev"><</li> <li id="next">></li> </ul> </nav> <ul class="thumbnails"> </ul> </div>
..javascript
'use strict';
{
const images = [ 'img/pic00.png', 'img/pic01.png', 'img/pic02.png', 'img/pic03.png', 'img/pic04.png', 'img/pic05.png', 'img/pic06.png', 'img/pic07.png', ]; //今何番目の画像を表示しているかという変数 let currentNum = 0; // サムネイル画像をクリックしたときの関数処理 function setMainImage(value){ document.querySelector('main img').src = value; } // メインのイメージのソースをimages配列のcurrentNum番目とする // document.querySelector('main img').src = images[currentNum]; setMainImage(images[currentNum]); // currentクラスを外す独自の関数 function removeCurrentClass(){ document.querySelectorAll('.thumbnails li')[currentNum].classList.remove('current'); } function addCurrentClass(){ document.querySelectorAll('.thumbnails li')[currentNum].classList.add('current'); } // thumbnailsクラスの取得 const thumbnails = document.querySelector('.thumbnails'); // サムネイル画像たちの生成 images.forEach((value, index) => { const li = document.createElement('li'); if(index === currentNum){ li.classList.add('current'); } li.addEventListener('click', () => { setMainImage(value); removeCurrentClass(); currentNum = index; addCurrentClass(); }); const img = document.createElement('img'); img.src = value; li.appendChild(img); thumbnails.appendChild(li); }); const next = document.getElementById('next'); next.addEventListener('click', () => { removeCurrentClass(); currentNum++; if(currentNum === images.length){ currentNum = 0; } addCurrentClass(); setMainImage(images[currentNum]); }); const prev = document.getElementById('prev'); prev.addEventListener('click', () => { removeCurrentClass(); currentNum--; if(currentNum < 0){ currentNum = images.length - 1; } addCurrentClass(); setMainImage(images[currentNum]); });
}
..css
.container{ width: 300px; margin: 0 auto; user-select: none; }
ul{ list-style: none; padding: 0; margin: 0; }
main{ margin-bottom: 8px; } main img{ width: 300px; height: 200px; vertical-align: bottom; } nav{ margin-bottom: 8px; } nav ul{ display: flex; justify-content: space-between; } nav li { width: 60px; border: 1px solid #dedede; border-radius: 4px; font-size: 12px; padding: 4px; text-align: center; cursor: pointer; user-select: none; } nav li:hover{ background: #f8f8f8; }
width: 140px;
} .thumbnails{ display: grid; grid-template-columns: repeat(5, 56px); gap: 5px; } .thumbnails li { cursor: pointer; opacity: 0.4; } .thumbnails li:hover{ opacity: 1; } .thumbnails li.current{ opacity: 1; } .thumbnails img{ width: 56px; vertical-align: bottom; }
現在、フィリピンのセブでもないマニラでもないどこかの涼しい雨ばかりの街でIT Boot Camp(6ヶ月)に参加した僕が感じていることやIT勉強したい、身に付けたいけど最善の方法って結局学校？それとも働いた方がいい？などの答えのヒントに少しでもなればなぁと思います。（あくまで全て一個人の僕の感想です） そもそもIT Boot Campて何？ これは、知らない方もいると思いますが、このIT Boot Campはビリーズブートキャンプの仲間ではなく、アメリカやイギリスなどでも開催されているITの知識を詰め込む集中講座のようなものです！ IT Boot Campの特徴 -超短期集中 -勉強する範囲が6ヶ月コースなどになってくると結構広い。 -授業は全て英語 -毎日コード書く生活漬け -（他は知りませんが）インターンシップ先を用意してくれる ...こんなところですかね。 とりあえずまとめると、6ヶ月と言う期間でコードを書きWebsiteを作れるように学習し、そしてクライアントを獲得できるまでに成長させよう！ みたいなノリのコースですね。 実際、仕事を自分で得れるほどまでに成長するの？ ここが全員気なっているところですよね〜。 結論から言います。（これもただの僕の意見です） ただ言われてるだけのことをこなして学校が終わり次第家に帰っていたら絶対無理です。 ただ誤解して欲しくないのは、別にコースを否定している訳ではなく、ただお金をいただいてオンライン上でクライアント様の希望を目に見える形にすると言うのはとても大変と言うことです。6ヶ月のコースでそれが完璧に身につくはずはありません。いくら学校に高い授業料を払っていても、自分で主体的に動かなければ生き残ってはいけません。 それならいかない方がいい？ そう思いがちですが、ちょっと待ってください。 だからこそIT Boot Campでは、エンジニアとして一番大事なスキルである自分をアップデートする方法を学べるんです。 これは本当に日常生活でも役に立つんですが、まず知らない事をすぐに調べると言う情報の収集の癖がつきますし、 その情報収集の仕方やcオーディングでバグが出た際の解き方など応用がきくテクニックもひたすら教えてくれます。 でも授業では、実際そのやり方を教えてくれるだけで自分のスキルとして落とし込むまでの時間は取ってくれないんですよ。 なので、終わった〜って家に帰ってしますと綺麗さっぱり忘れてまたぐるぐる同じことを学んで時間だけ過ぎて言ってしまいます。 要は、自分で学んだことをしっかりと整理しアウトプットできればそれなりに成果の上がるコースだと言うことです。 自分なりのメリットとデメリット メリット ・コーディングの基礎は身につく（HTML、CSS、JavaScriptなど）。 ・マネタイズやクライアントの獲得の仕方まで一応体系的に教えてくれる。 ・やる気がある人にとってはいいスピード感でどんどん新しい分野や言語を教えてくれる ・仕事上だと何回もきくことに抵抗があるが生徒の立場なら何回も納得がいくまで聞ける。 ・授業はほぼどこでも英語なので英語が上達する ・エンジニアになりたいけど、何をどうやって始めたらいいの？って言う方には唯一お勧め！ デメリット ・アカデミックな内容も多いので実践で活かせないこともある。 ・前回の記事でも書きましたが、やっぱり実際に企業に入ろうとすると現実的にたかだか数ヶ月しかコーディングかじってないと言う現実を痛感するので自分でアンテナをしっかりはってどの言語やどんなスキルが生きるかを模索し続けながら勉強していく必要がある事。 （これに関してはいいきっかけにもなるので、メリットでもありますね！） ・日本の案件は全くカリキュラム内では取ろうとしないので海外案件を狙うというハードルの高さが少しある。 ・カルチャーギャップで苦しむ時がある（来てみて感じてみてください笑） 最後に 未経験で企業に入っていきなりコーディングを詰め込まれても正直限界がありますが、そのあとの仕事は自分で取らなくても用意されていると言うことになります。 一方、こういったコースを受講しいいご縁にも恵まれ、フリーランスとして活躍できれば自分の仕事を選ベルし嫌なら断れます。 値段だって交渉できます。とにかく規制がありません。自由です。 これは勧誘でもないし、IT Coding Boot Campというシステムへの悪口でもありません。 ただ、実際に足を踏み入れたことがない方や、少しでも興味がある方達がこの記事をみて『やっぱやーめた』とかなったり『背中を押せたり』できればなと思い本音で全て書いてあリます。 なので、なんか言っていることが矛盾していればこのコースのいい側面もあるけど嫌なところや不満も抱えながらコーディングに励んでいたということです笑 以上、僕の体験談でした。 何かありましたらコメントください。 読んでいただきありがとうございました。
現在、フィリピンのセブでもないマニラでもないどこかの涼しい雨ばかりの街でIT Boot Camp(6ヶ月)に参加した僕が感じていることやIT勉強したい、身に付けたいけど最善の方法って結局学校？それとも働いた方がいい？などの答えのヒントに少しでもなればなぁと思います。（あくまで全て一個人の僕の感想です）
これは、知らない方もいると思いますが、このIT Boot Campはビリーズブートキャンプの仲間ではなく、アメリカやイギリスなどでも開催されているITの知識を詰め込む集中講座のようなものです！
IT Boot Campの特徴 -超短期集中 -勉強する範囲が6ヶ月コースなどになってくると結構広い。 -授業は全て英語 -毎日コード書く生活漬け -（他は知りませんが）インターンシップ先を用意してくれる ...こんなところですかね。 とりあえずまとめると、6ヶ月と言う期間でコードを書きWebsiteを作れるように学習し、そしてクライアントを獲得できるまでに成長させよう！ みたいなノリのコースですね。
ここが全員気なっているところですよね〜。 結論から言います。（これもただの僕の意見です） ただ言われてるだけのことをこなして学校が終わり次第家に帰っていたら絶対無理です。 ただ誤解して欲しくないのは、別にコースを否定している訳ではなく、ただお金をいただいてオンライン上でクライアント様の希望を目に見える形にすると言うのはとても大変と言うことです。6ヶ月のコースでそれが完璧に身につくはずはありません。いくら学校に高い授業料を払っていても、自分で主体的に動かなければ生き残ってはいけません。
そう思いがちですが、ちょっと待ってください。 だからこそIT Boot Campでは、エンジニアとして一番大事なスキルである自分をアップデートする方法を学べるんです。 これは本当に日常生活でも役に立つんですが、まず知らない事をすぐに調べると言う情報の収集の癖がつきますし、 その情報収集の仕方やcオーディングでバグが出た際の解き方など応用がきくテクニックもひたすら教えてくれます。
でも授業では、実際そのやり方を教えてくれるだけで自分のスキルとして落とし込むまでの時間は取ってくれないんですよ。 なので、終わった〜って家に帰ってしますと綺麗さっぱり忘れてまたぐるぐる同じことを学んで時間だけ過ぎて言ってしまいます。 要は、自分で学んだことをしっかりと整理しアウトプットできればそれなりに成果の上がるコースだと言うことです。
メリット ・コーディングの基礎は身につく（HTML、CSS、JavaScriptなど）。 ・マネタイズやクライアントの獲得の仕方まで一応体系的に教えてくれる。 ・やる気がある人にとってはいいスピード感でどんどん新しい分野や言語を教えてくれる ・仕事上だと何回もきくことに抵抗があるが生徒の立場なら何回も納得がいくまで聞ける。 ・授業はほぼどこでも英語なので英語が上達する ・エンジニアになりたいけど、何をどうやって始めたらいいの？って言う方には唯一お勧め！ デメリット ・アカデミックな内容も多いので実践で活かせないこともある。 ・前回の記事でも書きましたが、やっぱり実際に企業に入ろうとすると現実的にたかだか数ヶ月しかコーディングかじってないと言う現実を痛感するので自分でアンテナをしっかりはってどの言語やどんなスキルが生きるかを模索し続けながら勉強していく必要がある事。 （これに関してはいいきっかけにもなるので、メリットでもありますね！） ・日本の案件は全くカリキュラム内では取ろうとしないので海外案件を狙うというハードルの高さが少しある。 ・カルチャーギャップで苦しむ時がある（来てみて感じてみてください笑）
未経験で企業に入っていきなりコーディングを詰め込まれても正直限界がありますが、そのあとの仕事は自分で取らなくても用意されていると言うことになります。 一方、こういったコースを受講しいいご縁にも恵まれ、フリーランスとして活躍できれば自分の仕事を選ベルし嫌なら断れます。 値段だって交渉できます。とにかく規制がありません。自由です。
これは勧誘でもないし、IT Coding Boot Campというシステムへの悪口でもありません。 ただ、実際に足を踏み入れたことがない方や、少しでも興味がある方達がこの記事をみて『やっぱやーめた』とかなったり『背中を押せたり』できればなと思い本音で全て書いてあリます。 なので、なんか言っていることが矛盾していればこのコースのいい側面もあるけど嫌なところや不満も抱えながらコーディングに励んでいたということです笑
以上、僕の体験談でした。 何かありましたらコメントください。 読んでいただきありがとうございました。
a
動機 誕生日に手紙を贈るのは普通すぎると思って, ちょっと勉強中のHTMLやらを使ってURLを贈ることにしました. なんかまずい部分あれば教えていただけると幸いです... あまりにも酷いコード全貌 : github どんなものを作ったのか 生年月日いれて, 当人の誕生日に合致していたら次のページ →ドット絵のGIFがお祝いする 52thとかいう書き方あってるんかな... ※iphone向けでしか作っていません. 開発環境 ・sublime ・xampp 7.3.9 web上に公開する progateというサイトのこちら(自分で作ったWebページをインターネット上に公開しよう！)を参考にgithubを用いてHPをweb上に公開しました. スマホでの画面を確認する xamppを用いてlocalhostで作成したHPを確認しながら作成しました. 絶対もっと楽な方法ある... どのHPでも[F12]キーを押せば,そのHPのソース等が表示される開発者向けページになってくれます. 今すぐ[F12]キーを押せば下画像のような画面が表示されると思います. このページではスマホで表示した場合の画面を確認することもできます. しかもiphone6/7/8,Galaxy S5,ipadとか色々選べます(画像左上). ドット絵 piskelというサイトでドット絵作成.ドット絵描くのが非常に楽しかった. スマホ用に やさしいWebアプリ を参考にしました. <meta name="viewport" content="initial-scale=1.0"> でスマホ向け画面になってくれるみたいです. 画像の表示を横幅に合わせるために CSSで調整. .gif img{ width:100%; } 誕生日を入力してもらうフォーム 誕生月・日のセレクトボタンを作成. <form> <select name="sel2"> <option value="#"></option> <script type="text/javascript"> for(var i=1;i<13;i++){ document.writeln("<option>" +i + "月</option>"); } </script> </select> <select name="sel3"> <option value="#"></option> <script type="text/javascript"> for(var i=1;i<32;i++){ document.writeln("<option>" +i + "日</option>"); } </script> </select> <input type=button value="決定" onClick="return check(sel2.value,sel3.value)"> </form> function check()では当人の誕生日が入力されたら次のページへ という感じ. 違えばalertでます. スマホでの音声出力 audioタグでは, safariやChromeで音楽の自動演奏ができないと知った時にはびっくりしました. こちらのサイトを参考に, 画面タップで音楽が流れるような仕様に. <audio autoplay loop id="audio"> <source src="happy_birthday_to_you_unpluged.mp3"> </audio> <script type="text/javascript"> document.addEventListener('click', audioPlay); function audioPlay() { document.getElementById('audio').play(); document.removeEventListener('click', audioPlay); } </script> おわり こんな初歩的なものでも知識が0からだったので2~3日程度かかったきがする. (他のこともしていたから,と言い訳.)
誕生日に手紙を贈るのは普通すぎると思って, ちょっと勉強中のHTMLやらを使ってURLを贈ることにしました. なんかまずい部分あれば教えていただけると幸いです...
あまりにも酷いコード全貌 : github
生年月日いれて, 当人の誕生日に合致していたら次のページ →ドット絵のGIFがお祝いする
52thとかいう書き方あってるんかな...
※iphone向けでしか作っていません.
・sublime ・xampp 7.3.9
progateというサイトのこちら(自分で作ったWebページをインターネット上に公開しよう！)を参考にgithubを用いてHPをweb上に公開しました.
xamppを用いてlocalhostで作成したHPを確認しながら作成しました. 絶対もっと楽な方法ある...
どのHPでも[F12]キーを押せば,そのHPのソース等が表示される開発者向けページになってくれます. 今すぐ[F12]キーを押せば下画像のような画面が表示されると思います. このページではスマホで表示した場合の画面を確認することもできます. しかもiphone6/7/8,Galaxy S5,ipadとか色々選べます(画像左上).
piskelというサイトでドット絵作成.ドット絵描くのが非常に楽しかった.
やさしいWebアプリ を参考にしました.
<meta name="viewport" content="initial-scale=1.0">
でスマホ向け画面になってくれるみたいです.
画像の表示を横幅に合わせるために CSSで調整.
.gif img{ width:100%; }
誕生月・日のセレクトボタンを作成.
<form> <select name="sel2"> <option value="#"></option> <script type="text/javascript"> for(var i=1;i<13;i++){ document.writeln("<option>" +i + "月</option>"); } </script> </select> <select name="sel3"> <option value="#"></option> <script type="text/javascript"> for(var i=1;i<32;i++){ document.writeln("<option>" +i + "日</option>"); } </script> </select> <input type=button value="決定" onClick="return check(sel2.value,sel3.value)"> </form>
function check()では当人の誕生日が入力されたら次のページへ という感じ. 違えばalertでます.
audioタグでは, safariやChromeで音楽の自動演奏ができないと知った時にはびっくりしました. こちらのサイトを参考に, 画面タップで音楽が流れるような仕様に.
<audio autoplay loop id="audio"> <source src="happy_birthday_to_you_unpluged.mp3"> </audio> <script type="text/javascript"> document.addEventListener('click', audioPlay); function audioPlay() { document.getElementById('audio').play(); document.removeEventListener('click', audioPlay); } </script>
こんな初歩的なものでも知識が0からだったので2~3日程度かかったきがする. (他のこともしていたから,と言い訳.)
株式会社セレス3daysインターンシップ 【インターンシップの概要】 Day1：アイディアソン テーマに沿って新しいメディアを自分達で考えてみましょう！ とはいえ、アイディア出しって何からするの？という方もいるかもしれませんが、心配いりません。 しっかりとアイディア出しのノウハウや企画のコツをお教えします！ Day2：ハッカソン 1日目のアイディアソンで出たアイディアを、実際にカタチにしてみましょう！ チームで開発を行うので、自分の知らない技術や得意な技術を教え合う事もあります。 Day3：ハッカソン＆成果発表 最終日は成果発表を行ってもらいます。開発と同時進行で自分たちの成果をまとめたプレゼンの準備も進めていきましょう。 発表後はプロのエンジニアからフィードバックを行うので、今後の開発に役立ててください！ ※サポーターズ引用 1日目は色々なアイデア出しの手法を教えてもらった。 Break the bias 否定、逆説からアイデア出しをする手法。 調べすぎないのも重要 シナリオグラフ いつ、誰が、どこで、何した、という４点から選択肢をピックアップして物語にすることでアイデアを生み出すフレームワーク ブレスト 批判しない 自由発言 質より量 アイデアのシナジー などなど... 【実際に製作したサービス】 ライブ後の感動をファン同士で共有できるサービス「Yo-in」 好きなアーティストのライブに参戦した後って、なんだか悲しい気分になりませんか？虚無感というか...（特にぼっち参戦だったら）そんな人たちのためにライブ後にファン同士で交流できるサイトを作りました！ ライブ映像というのは全てが映像化されて永遠に保存できるものではなく、「あのとき〇〇が手振ってくれた！」などのその時のその場でしか味わえない感動があると思います。そういった「鮮度の高い感動をその場で共有できるお友達ができたら嬉しい」という方のためのアプリです。自分の参戦するライブが決まったらこのサイトを通じてファンの交流会に参加して仲間を見つけてみませんか？ぜひ「余韻」に浸ってみってください！ 【エンジニアの方々のフィードバック】 ・今はツイッターで行われている気がする。そっからデータ取ってきたりすればいいかも？ ・「発狂」にフォーカス当ててるところ評価する ・最近だとマップアプリで検索するとすぐ出てきそう… ・どういう風な提案かと思いきや二次会提案サービスでちょっと残念。 ・ライブ本体にどうやって寄生するのかが難しそうに感じました ・ライブに限らなくてもいいんじゃないじゃなあ。 ・いいね！ ・作り込まれていてよかったです。 ・ライブの後はカラオケや食事に行きたくラリますよね！駅も混んでますし…。 ・お疲れ様です。プレゼンがすごく上手でした！ライブの後に飲み会行きたいのは分かります！ただLIVEならではの工夫が欲しいです。今回のデモストーリーだと、普通の飲み屋予約サービスとの違いがわかりませんでした。 ・プレゼン資料が見やすく、説明も聞きやすくて良かった ・twiplaなんかで募集してたりするので、専門のサービスを作るのもアリだなと思いました。 ・感動を共有したい、帰るまで→ライブ後の居酒屋探し・・・？ ・3日間お疲れ様でした！サービスもデザイン含め凄くよくまとまっていました！ライブとかの後に余韻を共有したいというのは非常にニーズがありそうだと思いました。 ・発想も面白いと感じ、ライブ会場やレストランとの場所の連携もとれていて機能性も良いと思った。空席が分かるのも、ユーザー・レストランニーズ満たせて良いと感じました。 ・マネタイズが少し弱い気がしました。サイトの作りはきれいな感じにまとまっていたと思います。 ・デザインがきれいで良かったです。 ・余韻で乗っかる系のサービスは良さそうですね。集客は何もしなくてもできそう。 ・ライブに限らず色んな余韻を共有しあえるといいのかなとも思ったり 【インターン終えての感想と反省】 ・Twig,slim,PHP, Bootstrapなど知らない技術ばかりだったけれどフレームワークやチートシーををとても丁寧に用意してくれていたのでそれなりに形にして実装することができた。 ・チームの中でタスクと進捗を共有する時間を十分に取ったことで、時間内に作り上げることができた。 ・枝葉末節にとらわれず、とりあえず「最低限動くものを作る」という感覚を養うことができた。 ・既存のソーシャルアプリ（twitterなど）との違い、「なぜこのアプリでなければいけないのか？」をうまく伝えられなかった。 ・他にも実装したい機能はたくさんあった。
Day1：アイディアソン テーマに沿って新しいメディアを自分達で考えてみましょう！ とはいえ、アイディア出しって何からするの？という方もいるかもしれませんが、心配いりません。 しっかりとアイディア出しのノウハウや企画のコツをお教えします！ Day2：ハッカソン 1日目のアイディアソンで出たアイディアを、実際にカタチにしてみましょう！ チームで開発を行うので、自分の知らない技術や得意な技術を教え合う事もあります。 Day3：ハッカソン＆成果発表 最終日は成果発表を行ってもらいます。開発と同時進行で自分たちの成果をまとめたプレゼンの準備も進めていきましょう。 発表後はプロのエンジニアからフィードバックを行うので、今後の開発に役立ててください！
Day1：アイディアソン テーマに沿って新しいメディアを自分達で考えてみましょう！ とはいえ、アイディア出しって何からするの？という方もいるかもしれませんが、心配いりません。 しっかりとアイディア出しのノウハウや企画のコツをお教えします！
Day2：ハッカソン 1日目のアイディアソンで出たアイディアを、実際にカタチにしてみましょう！ チームで開発を行うので、自分の知らない技術や得意な技術を教え合う事もあります。
Day3：ハッカソン＆成果発表 最終日は成果発表を行ってもらいます。開発と同時進行で自分たちの成果をまとめたプレゼンの準備も進めていきましょう。 発表後はプロのエンジニアからフィードバックを行うので、今後の開発に役立ててください！
※サポーターズ引用
1日目は色々なアイデア出しの手法を教えてもらった。
否定、逆説からアイデア出しをする手法。 調べすぎないのも重要
いつ、誰が、どこで、何した、という４点から選択肢をピックアップして物語にすることでアイデアを生み出すフレームワーク
などなど...
ライブ後の感動をファン同士で共有できるサービス「Yo-in」
好きなアーティストのライブに参戦した後って、なんだか悲しい気分になりませんか？虚無感というか...（特にぼっち参戦だったら）そんな人たちのためにライブ後にファン同士で交流できるサイトを作りました！ ライブ映像というのは全てが映像化されて永遠に保存できるものではなく、「あのとき〇〇が手振ってくれた！」などのその時のその場でしか味わえない感動があると思います。そういった「鮮度の高い感動をその場で共有できるお友達ができたら嬉しい」という方のためのアプリです。自分の参戦するライブが決まったらこのサイトを通じてファンの交流会に参加して仲間を見つけてみませんか？ぜひ「余韻」に浸ってみってください！
・今はツイッターで行われている気がする。そっからデータ取ってきたりすればいいかも？ ・「発狂」にフォーカス当ててるところ評価する ・最近だとマップアプリで検索するとすぐ出てきそう… ・どういう風な提案かと思いきや二次会提案サービスでちょっと残念。 ・ライブ本体にどうやって寄生するのかが難しそうに感じました ・ライブに限らなくてもいいんじゃないじゃなあ。 ・いいね！ ・作り込まれていてよかったです。 ・ライブの後はカラオケや食事に行きたくラリますよね！駅も混んでますし…。 ・お疲れ様です。プレゼンがすごく上手でした！ライブの後に飲み会行きたいのは分かります！ただLIVEならではの工夫が欲しいです。今回のデモストーリーだと、普通の飲み屋予約サービスとの違いがわかりませんでした。 ・プレゼン資料が見やすく、説明も聞きやすくて良かった ・twiplaなんかで募集してたりするので、専門のサービスを作るのもアリだなと思いました。 ・感動を共有したい、帰るまで→ライブ後の居酒屋探し・・・？ ・3日間お疲れ様でした！サービスもデザイン含め凄くよくまとまっていました！ライブとかの後に余韻を共有したいというのは非常にニーズがありそうだと思いました。 ・発想も面白いと感じ、ライブ会場やレストランとの場所の連携もとれていて機能性も良いと思った。空席が分かるのも、ユーザー・レストランニーズ満たせて良いと感じました。 ・マネタイズが少し弱い気がしました。サイトの作りはきれいな感じにまとまっていたと思います。 ・デザインがきれいで良かったです。 ・余韻で乗っかる系のサービスは良さそうですね。集客は何もしなくてもできそう。 ・ライブに限らず色んな余韻を共有しあえるといいのかなとも思ったり
・Twig,slim,PHP, Bootstrapなど知らない技術ばかりだったけれどフレームワークやチートシーををとても丁寧に用意してくれていたのでそれなりに形にして実装することができた。 ・チームの中でタスクと進捗を共有する時間を十分に取ったことで、時間内に作り上げることができた。 ・枝葉末節にとらわれず、とりあえず「最低限動くものを作る」という感覚を養うことができた。 ・既存のソーシャルアプリ（twitterなど）との違い、「なぜこのアプリでなければいけないのか？」をうまく伝えられなかった。 ・他にも実装したい機能はたくさんあった。
今日、teratailの回答でローディング画面を作ったらなかなかうまくできたので記事にします。 以下コードとCodePenです。 <body> <div id="loading"> LOADING </div> <main> <div class=menu> MeNu </div> <img id=topimage src=https://4k-wallpaper.com/3840x2160/4k-Ultra-HD_00348.jpg> </main> </body> * { margin: 0; padding: 0 } main { display:none } #topimage { width: 100% } .menu { height:2em; line-height: 2em; position: absolute; top: -2em } window.onload = function () { $("#loading").delay(1000).fadeOut(); $("main").delay(2000).fadeIn(); $("#topimage").delay(3000).animate({width:"90%",marginLeft:"5%",marginTop:"2em",height:"auto"},"slow", "swing"); $(".menu").delay(3000).animate({top:"0"},"slow", "swing"); } See the Pen PoYMbNp by asuchi0819 (@asuchi0819) on CodePen. 頑張った〜
今日、teratailの回答でローディング画面を作ったらなかなかうまくできたので記事にします。 以下コードとCodePenです。
<body> <div id="loading"> LOADING </div> <main> <div class=menu> MeNu </div> <img id=topimage src=https://4k-wallpaper.com/3840x2160/4k-Ultra-HD_00348.jpg> </main> </body>
* { margin: 0; padding: 0 } main { display:none } #topimage { width: 100% } .menu { height:2em; line-height: 2em; position: absolute; top: -2em }
window.onload = function () { $("#loading").delay(1000).fadeOut(); $("main").delay(2000).fadeIn(); $("#topimage").delay(3000).animate({width:"90%",marginLeft:"5%",marginTop:"2em",height:"auto"},"slow", "swing"); $(".menu").delay(3000).animate({top:"0"},"slow", "swing"); }
See the Pen PoYMbNp by asuchi0819 (@asuchi0819) on CodePen.
頑張った〜
問題 ツールチップを作る際、hover時に ふわっと表示されるようにしたいが、 今回都合上displayプロパティを使用することになった。 .tooltip { display:none;/*いつもはopacity:0;と書いていた*/ transform: translateY(5px); transition: 0.3s; } .tooltip:hover { display:block;/*いつもはopacity:1;と書いていた*/ transform: translateY(0px); } すると、transitionが効かない。 解決 @keyframes tooltipShow { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0px); } } .tooltip { display: none; } .tooltip:hover { animation: tooltipShow 0.3s linear 0s; display: block; }
ツールチップを作る際、hover時に ふわっと表示されるようにしたいが、 今回都合上displayプロパティを使用することになった。
.tooltip { display:none;/*いつもはopacity:0;と書いていた*/ transform: translateY(5px); transition: 0.3s; } .tooltip:hover { display:block;/*いつもはopacity:1;と書いていた*/ transform: translateY(0px); }
すると、transitionが効かない。
@keyframes tooltipShow { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0px); } } .tooltip { display: none; } .tooltip:hover { animation: tooltipShow 0.3s linear 0s; display: block; }
