近日中に達成したい目標整理
プログラミングが楽し過ぎて、目標を定めるのを怠ってたので、目標を整理します。
目標1: 会社のHPを仕上げる。
そのためにするべきこと。
- HTML CSS CSS3をマスターする。
- レスポンシブデザインを理解する。
- サーバーへのアップロードの仕方を理解する。
具体的な学習計画
- HTML入門 (全24回) 完了
- CSS入門 (全23回) 完了
- CSS3入門 (全19回) 完了
- CSSレイアウト入門 (全15回) 完了
- 実践!ウェブサイトを作ろう (全16回) 完了
- Bootstrap 3.0入門 (全18回) 完了
- レスポンシブなウェブサイトを作ろう (全11回) 完了
- ProgateのHTML/CSSコース全部5週してやる! 完了
上記2つは完了済みなので、他を完了させます。
これを終えたら、GitHubのマイページを改良する事で身につけたことを応用します。
目標2: soundcloud APIで何か作る
そのためにするべきこと。
- JavaScriptを理解する
- SoundCloud Developersの内容を理解できるようになる
- 他のAPIを使ってみる(API慣れする)
具体的な学習計画
- JavaScript入門 (全24回)
- ProgateのJacaScript入門
- Google Chart Tools入門 (全12回)
こうやって書いてみると明確になりますね。
定期的に整理します。
目標掲げておいてアレですが、
Node.jsが猛烈に気になるので今夜はこれをやります!!!!
ネタ帳 - EDM業界とヲタク業界は極めて似ている
タイトルまんまです。
EDM業界とヲタク業界って非常に似ているんですよ。
どちらも、
- 原作がある
- それを真似て、新しいものを創りだす人がいる
- 原作も新しいものも買う人がいる
- 1.~3.が集うでっかいイベントがある
という共通点があります。
EDM業界なら、1.はOriginal mix、2.はRemix、 3.はリスナー、4.はフェスです。
ヲタク業界なら、1.は原作漫画、2.は同人誌、3.はヲタク、4.はコミケです。
こうして見ると、結構似てないですか?
ここで私が言いたいのは、この2つのマーケットってものすごくお金が回りそうだということです。調べてないですけど、実際回ってますよね。フェスもコミケも数百億というお金が平気で動いています。
なぜ、こんなにもお金が回るのでしょうか?
私は、このマーケットに出てくる人々は、誰もが買い手であり売り手であるからだという答えに辿り着きました。
例えば、1.を創った原作者でも、Remixや同人誌を買う人がいますし、2と3は同一人物である事も多いですよね。つまり、買い手になったり売り手になったりと、立場が変わる分満たされる欲求が増える訳です。(買い手の時は物欲、売り手の時は承認欲求などなど...) だから飽きがこなくて、ずっとそのマーケットに居続けてもらえるのかなと思いました。
買う行為と売る行為が同時に生まれるマーケットとでも言いましょうか。
非常にビジネスチャンスを感じるんですよね。(言い方が胡散臭くてすいませんw)
こういうマーケットを見つけ出して、面白いプロダクトや文化を創りたいと常日頃思っているので、今日は文章に書き起こしてみました。
今日の学び - 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>の中に書きましょう。
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
パスは適宜変えてください。続いてjsファイル。こちらは</body>の直前に書きます。
<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<!-- slick.js読み込み -->
<script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script>
<!-- slick.jsの設定を書いて行く -->
<script type="text/javascript">
$(document).on('ready', function(){
$('.slider').slick({
<!-- ここにいろいろと設定を書きます!-->
});
});
</script>
(6) スライドさせたい写真をhtmlファイルに書き連ねる。
<div class="slider">
<div><img src="img1.png" alt=""></div>
<div><img src="img2.png" alt=""></div>
<div><img src="img3.png" alt=""></div>
</div>
以上です。これでかっこいいスライダーが実装できます。
みなさんもぜひやってみてください!
今日の学び
今日はひたすら会社の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) 便利サイト
思いついたネタ
こんなんあったらいいなーというアイデア出しの記事です。
(1) SoundCloudの音源でDJできるサービス
先日のハッカソンでご一緒したBさんが華麗にGoogle APIを使いこなす姿に感化されてしまい...自分もなにかAPIを使ってアプリを作りたいと思いました。
色々と探して見つけたのがこれ - SoundCloud Developers
APIのことよくわかってないし、そもそもこのAPIで何ができるかさえわかってない状況。でもとりあえず、考えてみます。
・このAPIを理解する
→まずはJavaScriptの理解を深める レッスン一覧 のJavaScriptパックを制覇せよ。
→英語を勇気出して読む
→とりあえず、コードを鵜呑みにしてみる
・似たようなサービス無いか探してみる
→音楽系のスタートアップ見ようぜ 音楽系スタートアップ in 欧米 100社まとめ
(2) まどりくん
最近流行りの360度写真とかVRとかの話を聞いて思いつきました。
スマフォに簡単に取り付けられる、まどりくん(仮名)なるアイテム。
これを使えば、簡単に自分の部屋の3Dデータがパソコンに取り込める。
それを見ながら、ニトリやら無印やらイケヤなどの家具データを引っ張ってきて、PC上でその家具が部屋に入るかどうか試すことができる。
もっと言えば、家全体のデータを取り込めば、この経路で運べるか否かも調べられる。大きい家具って、思わぬところで引っかかったりするよね。
これは最初BtoCでやっていくサービスだけど、そのうちCtoCもあり得る。
つまり、要らない家具のデータをアップロードすれば、知らない誰かが「これ欲しい!」となったときに、その人がPC上で部屋に入るかどうか調べられる。
家具のビジネスが加速する...なんて思った。(加速しない)
今日の学び
今日もがっつりバイトしてきました。
ずっとコードを書くことができて超楽しい。
本日の学び。
(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ファイルに付け加える決まり文句があることを学んだ。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(3-2) よくわかってないこと
・idとclassの使い分け(idは一意に決まるということだけわかっているものの、上手な使い分けはよくわかっていない。)
・レスポンシブにするために、widthはpxではなく%を用いるべきだと言葉ではわかったけど、実際どうすりゃいいかわかってない。
・box-sizing: border-box、よくわかっていない。
・絵の隣に文章を置こうとしてfloat: left;をすると、レイアウトが崩れてしまう。
(3-3) 自分へのアドバイス
とにかく頑張って勉強するべし。
今週の学び
今週はアルバイトを始めたり、ハッカソンに初出場したり、怒涛のプログラミング週間でした。バイトやハッカソンで学んだことを箇条書きしていきます。
(1) さくらVPSサーバー設定
(1-1) 内容
アルバイト先で新しいサーバーを立ち上げるミッションを頂きました。
まずはさくらVPSサーバーの設定です。設定はドットインストールを見ながら行いました。
→ さくらのVPS入門 (全21回) - プログラミングならドットインストール
(1-2) 失敗したこと
・SSHの設定を行い、rootでのログイン、パスワードでのログインを禁止する設定を行った際に、私しか入れなくなってしまった。社長のアカウントにSSH権限を与えることを忘れてしまった。
(1-3) 自分へのアドバイス
sshd_config.orgファイルを弄って、rootおよびパスワードでのログインを許可する設定に戻すときは、YES or NOの書き換えではなく、該当箇所をコメントアウトしないとダメだった。それからもっとサーバーの仕組みを理解しよう。そしてvimの使い手になれ。
(2) DNSサーバー設定
(2-1) 内容
(1)で設定したさくらサーバーのIPアドレスにドメイン名を与える作業。VALUE DOMAINで買ったドメイン名とIPアドレスを結びつけた。
(2-2) 失敗したこと
さくらの管理ページだけ設定して、VALUE DOMAINの管理ページでも設定することを忘れた。
(2-3) 自分へのアドバイス
紐付けるということを意識して、次回からは両方を設定することを忘れないようにする。それからDNSサーバーについて理解を深めよう。
(3) サブドメイン作成
(3-1) 内容
サブドメイン作った。
参考ブログURL→ さくらVPSのサブドメイン設定方法 - メコログ
(3-2) 失敗したこと
さくらの管理ページで、サブドメインを作成したものの、反映させる更新ボタンを押し忘れた。
(3-3) 自分へのアドバイス
更新ボタンを押すことを忘れないように気をつけること。それから、コンソール画面上でもファイルの位置を把握できるようになれたらいいね。
(4) APIを使うということ
(4-1) 内容
今回のハッカソンで、「APIを見つけて利用する」という感覚を学びました。
今回使ったもの→ Web Speech API Specification
(4-2) 自分へのアドバイス
色々なAPIを見つけて、それを使ってみることをしたい。
(5) GitHub使った
(5-1) 内容
ハッカソンの最中にBさんのコードと私のコードを合わせるべく、GitHub上で管理を行った。
(5-2) 失敗したこと
Bさんがリポジトリを作って下さったので、それに参加(この表現があっているかわからない)して、そこへpushしようとしたができなかった。クローンのやり方などがわかってなかった。
(5-3) 自分へのアドバイス
GitHubマスターになるべし。とりあえず、GitHub上でしりとりするような、失敗して消しても問題ないリポジトリを作って、色々と操作の練習しようっと。
(6) Bさんに教わった有益なサイト
・プログラミング学習サイト Udacity
・IT情報サイト Hacker News (日本語サイト見つけた POSTD)
・イベント検索サイト dots.