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上で部屋に入るかどうか調べられる。

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

2016-05-24

今日の学び

今日もがっつりバイトしてきました。

ずっとコードを書くことができて超楽しい。

本日の学び。

(1) サブドメインのconfigファイルの設定

(1-1) 内容

サブドメインそれぞれにconfigファイルを作り、VitrualHostの設定を行った。

参考→

#13 VirtualHostの設定をしよう (1) | さくらのVPS入門

#14 VirtualHostの設定をしよう (2) | さくらのVPS入門

(1-2) 失敗したこと

confファイルをいじり終えた後、

# service httpd configtest

# service httpd restart

を行うのを忘れそうになったので書いておく。

(1-3) 自分へのアドバイス

VertualHostのことよくわかっていないので、勉強すること。

参考→ バーチャルホストとは

そういえば、VertualHostの80ってなんだろう。

TCPやUDPにおけるポート番号の一覧 - Wikipedia

Hypertext Transfer Protocol (HTTP)という意味らしい。

(2) BASIC認証設定

(2-1) 内容

サブドメインそれぞれのindex.htmlにBASIC認証を設定した。

参考→ #11 Basic認証を設定しよう | お問合せ管理システムを作ろう

このような便利サイトも→ htpasswdファイル生成(作成)

(2-2) 感じたこと

コマンドライン上で操作をしていると迷子になりそうに。困ったらすぐにpwdをしようと思った。どうしてもよくわからなくなったら、Cyberduckでアクセスして、自分の立ち位置を、見慣れた形式で確認しよう。

(3) レスポンシブwebサイト

(3-1) 内容

会社のHPをレスポンシブにする！メディアクエリを用いる。

メディアクエリを使うときは、hmtlファイルに付け加える決まり文句があることを学んだ。

(3-2) よくわかってないこと

・idとclassの使い分け(idは一意に決まるということだけわかっているものの、上手な使い分けはよくわかっていない。)

・レスポンシブにするために、widthはpxではなく%を用いるべきだと言葉ではわかったけど、実際どうすりゃいいかわかってない。

・box-sizing: border-box、よくわかっていない。

　参考→box-sizing－CSS3リファレンス

・絵の隣に文章を置こうとしてfloat: left;をすると、レイアウトが崩れてしまう。

(3-3) 自分へのアドバイス

とにかく頑張って勉強するべし。

Mi in progress

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

今日の反省

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

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

今日の学び - slick.jsは神

今日の学び

思いついたネタ

今日の学び