2016-06-05

三本線のアイツ

ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。

(1) 概要

会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました！

(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する

まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。

www.nxworld.net

こちらの1番を用いました。

余談ですが自作にあたって一番驚いたのが、ハンバーガーナビゲーション部分のHTMLファイルが

HTML

<a class="menu-trigger" href="#">

<span></span>

<span></span>

<span></span>

</a>

こんなに簡単な記述だということでした。spanの空タグとは予想外。

(3) クリックするとハンバーガーが×になるアニメーションを実装する

続いて、アニメーションの実装を行いました。

CSS (一部のみ)
.menu-trigger.active-btn span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
/*transform: translateY(20px) rotate(-45px);*/
}

JS

$(function( ){
$('.menu-trigger').on('click', function( ) {
$(this).toggleClass('active-btn');
return false;
});
});

起こしたい変化(今回はハンバーガーから×になること)にクラス名をつけて、それをjsファイルで「クリックしたらそのクラスが追加されるよ」と書けばいいだけなんですね...

HTMLファイルは全くいじらないということに驚きました。

(4) ハンバーガーをクリックしたら、メニューも出てくるようにしたい

続いて、ハンバーガーをクリックしたら、メニューも出てくるようにするために、メニューを実装しました。まずはそのビュー部分から。

HTML

<div id="menu-bar-item">
<ul>
<li><a href="#section1">ニュース</a></li>
<li><a href="#section2">事業内容</a></li>
<li><a href="#section3">実績紹介</a></li>
<li><a href="#section4">VISION</a></li>
<li><a href="#section5">CONTACT</a></li>
</ul>
</div>

CSS

#menu-bar-item {
display: none;
background-color: rgba(0, 0, 0, 0.8);
text-align: right;
margin-top: 0px;
width: 360px;
margin: 0 auto;
}

#menu-bar-item li {
padding: 16px;
}

#menu-bar-item li:not(:last-child) {
border-bottom: 1px solid white;
}

#menu-bar-item a {
color: white;
}

#menu-bar-item a:hover {
color: pink;
}

ポイントはモーダル実装でお馴染みの、初期値はdisplay: none;にすることです。

続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。

qiita.com

これを元に書いたCSS、JSがこちら。

HTML

#menu-bar-item.active-btn {
display: block;
opacity: 1;
animation-duration: 0.5s;
animation-name: fade-in;
-moz-animation-duration: 0.5s;
-moz-animation-name: fade-in;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: fade-in;
}

@keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
display: none;
opacity: 0;
}

20% {
display: block;
opacity: 0.5;
}

100% {
display: block;
opacity: 1;
}
}

JS

$(function( ){
$('.menu-trigger').on('click',
function( ){
$(this).toggleClass('active-btn');
$('#menu-bar-item').toggleClass('active-btn');
return false;
});
});

今回の実装一番の学びが、クリック１つで２つのイベントを起こしたいときに、２つ連ねて書けばOKだということでした。

というわけで、無事、ハンバーガー完成です(｀・ω・)b

2016-06-01

今日の反省

今日は会社のHP作成の続きを行っていました。

レスポンシブデザインにしようと画策していたのですが、

中々うまくいかないので、PC用とスマホ用で別々のHPを作る事にしました。

スマホ版のHPといえば、ハンバーガーナビゲーション！

ということで、ハンバーガー作りにチャレンジしたものの、参考にしたサンプルコードの解読ができず、今日は断念して、他の部分のコーディングを行いました。

悔しいです(T^T)

まだまだHTML CSSマスターへの道は長い！

一歩一歩進みます(｀・ω・)b

今出来なくてもきっと何度も見たり読んだり書いたりしてれば、上達しますから！

【今日の学び】

・最後の１つだけ除く、というオプションの付け方を学びました。

条件に外れた場合だけ装飾するCSS3「:not()」の使い方 [ホームページ作成] All About

2016-05-28

近日中に達成したい目標整理

プログラミングが楽し過ぎて、目標を定めるのを怠ってたので、目標を整理します。

目標1: 会社のHPを仕上げる。

そのためにするべきこと。

HTML CSS CSS3をマスターする。
レスポンシブデザインを理解する。
サーバーへのアップロードの仕方を理解する。

具体的な学習計画

上記2つは完了済みなので、他を完了させます。

これを終えたら、GitHubのマイページを改良する事で身につけたことを応用します。

目標2: soundcloud APIで何か作る

そのためにするべきこと。

JavaScriptを理解する
SoundCloud Developersの内容を理解できるようになる
他のAPIを使ってみる(API慣れする)

具体的な学習計画

こうやって書いてみると明確になりますね。

定期的に整理します。

目標掲げておいてアレですが、

Node.jsが猛烈に気になるので今夜はこれをやります！！！！

Node.js入門 (全16回)

2016-05-26

ネタ帳 - EDM業界とヲタク業界は極めて似ている

タイトルまんまです。

EDM業界とヲタク業界って非常に似ているんですよ。

どちらも、

原作がある
それを真似て、新しいものを創りだす人がいる
原作も新しいものも買う人がいる
1.~3.が集うでっかいイベントがある

という共通点があります。

EDM業界なら、1.はOriginal mix、2.はRemix、 3.はリスナー、4.はフェスです。

ヲタク業界なら、1.は原作漫画、2.は同人誌、3.はヲタク、4.はコミケです。

こうして見ると、結構似てないですか？

ここで私が言いたいのは、この2つのマーケットってものすごくお金が回りそうだということです。調べてないですけど、実際回ってますよね。フェスもコミケも数百億というお金が平気で動いています。

なぜ、こんなにもお金が回るのでしょうか？

私は、このマーケットに出てくる人々は、誰もが買い手であり売り手であるからだという答えに辿り着きました。

例えば、1.を創った原作者でも、Remixや同人誌を買う人がいますし、2と3は同一人物である事も多いですよね。つまり、買い手になったり売り手になったりと、立場が変わる分満たされる欲求が増える訳です。(買い手の時は物欲、売り手の時は承認欲求などなど...) だから飽きがこなくて、ずっとそのマーケットに居続けてもらえるのかなと思いました。

買う行為と売る行為が同時に生まれるマーケットとでも言いましょうか。

非常にビジネスチャンスを感じるんですよね。(言い方が胡散臭くてすいませんw)

こういうマーケットを見つけ出して、面白いプロダクトや文化を創りたいと常日頃思っているので、今日は文章に書き起こしてみました。

2016-05-26

今日の学び - slick.jsは神

今日は会社HPにスライダーを埋め込む作業を行いました。

初めは自力でjsファイルの構築を試みたのですが、撃沈。

ぐぐったら高性能で美しいスライダーを発見しました。

それがこちらのslick.jsです。

slick - the last carousel you'll ever need

サイトデザインから既に洗練された印象を受けますよね。とても素敵です。

[超ド級の初心者がやったslick.js実装の手順]

(1) ヘッダーのget it nowをクリックして、Download Nowから圧縮ファイルをダウンロード

(2) 解凍したslick-1.6.0ディレクトリの中を覗く。とりあえずindex.htmlをchromeで開くとサンプルが見られるのでオススメです。ついでにテキストエディタでも閲覧して、どんな風にコードが書かれているか覗きましょう(｀・ω・)b

(3) 以下のファイルを、自分のHP用ディレクトリの最適な場所に分配する(要するにcssファイルならcssディレクトリに、jsファイルならjsディレクトリに...ということです)

・jsファイル: slick-1.6.0/slick/slick.min.js

・cssファイル: slick-1.6.0/slick/slick.css および slick-1.6.0/slick/slick-theme.css

・fontファイル (※どうやらこのfontファイルは、font awesomeのようなもののようです。これをちゃんと入れておくと、スライダーについている矢印も正しく表示できます): slick-1.6.0/slick/fontsディレクトリに入っている4つのファイル全部。

(4) slick-theme.cssファイルの中身を弄る

slick-theme.cssをテキストエディタで開いて、上から17行目までに書いてあるurl('パス')の部分を、先ほど自分で分配したパスに直してあげましょう。こうすることで、ちゃんとそれぞれのファイルが読み込まれます。

(5) htmlファイルに読み込む宣言を書く

ここまでできたら、htmlファイルに「slick.jsを読み込むよー」という宣言をします。

まずはcssファイルから。cssファイルは<head>の中に書きましょう。

パスは適宜変えてください。続いてjsファイル。こちらは</body>の直前に書きます。

<script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).on('ready', function(){

$('.slider').slick({

});
});
</script>

(6) スライドさせたい写真をhtmlファイルに書き連ねる。

</div>

以上です。これでかっこいいスライダーが実装できます。

みなさんもぜひやってみてください！

2016-05-25

今日の学び

今日はひたすら会社のHPを作ってました。

時間がないので大事なことだけ箇条書き。

暇な時情報を足していきます。

(1) フォントを埋め込む方法。

・oftファイルをHPディレクトリに追加する。

・以下をCSSファイルに書く。

@font-face {

font-family: ‘好きなフォントの名前’;

src: url(‘フォントのファイルがある場所‘);

}

(2) clear: left;をしたらfloatさせた要素が綺麗に配置できた。

正直よくわかってないから、あとで調べる。なぜ綺麗になるのか説明できるようになる。

(3) 会社ロゴ＋文字を並べたヘッダーの上下中央揃えに成功した。

(今まで) li ulタグを用いてそれをfloat:left;させていた。まったく上下中央揃えができなかった。

(今日) img a タグだけ使って、vertical-align: middle;を指定した。

これ今日一番感動した！これも後でちゃんと書きたい。

(4) 便利サイト

XHTML/CSS〜ブロック要素とインライン要素の一覧表〜

2016-05-24

思いついたネタ

こんなんあったらいいなーというアイデア出しの記事です。

(1) SoundCloudの音源でDJできるサービス

先日のハッカソンでご一緒したBさんが華麗にGoogle APIを使いこなす姿に感化されてしまい...自分もなにかAPIを使ってアプリを作りたいと思いました。

色々と探して見つけたのがこれ - SoundCloud Developers

APIのことよくわかってないし、そもそもこのAPIで何ができるかさえわかってない状況。でもとりあえず、考えてみます。

・このAPIを理解する

　→まずはJavaScriptの理解を深めるレッスン一覧のJavaScriptパックを制覇せよ。

　→英語を勇気出して読む

　→とりあえず、コードを鵜呑みにしてみる

・似たようなサービス無いか探してみる

　→音楽系のスタートアップ見ようぜ音楽系スタートアップ in 欧米 100社まとめ

(2) まどりくん

最近流行りの360度写真とかVRとかの話を聞いて思いつきました。

スマフォに簡単に取り付けられる、まどりくん(仮名)なるアイテム。

これを使えば、簡単に自分の部屋の3Dデータがパソコンに取り込める。

それを見ながら、ニトリやら無印やらイケヤなどの家具データを引っ張ってきて、PC上でその家具が部屋に入るかどうか試すことができる。

もっと言えば、家全体のデータを取り込めば、この経路で運べるか否かも調べられる。大きい家具って、思わぬところで引っかかったりするよね。

これは最初BtoCでやっていくサービスだけど、そのうちCtoCもあり得る。

つまり、要らない家具のデータをアップロードすれば、知らない誰かが「これ欲しい！」となったときに、その人がPC上で部屋に入るかどうか調べられる。

家具のビジネスが加速する...なんて思った。(加速しない)

Mi in progress

研究者ではなく、エンジニアになることを決意した人のブログ。