Sass, LESS勉強メモ

CSSは慣れないと書くのも読むのも面倒くさい。
そういった不満を取り除く言語があるらしい。それがSaSSとLESS。

Sass(サス)

LESS(レス)


まとめ

SassもLESSも同じようなことができる。
しかし実際に導入されているのはSassの方が多いらしい。

僕自身は初めて聞いたものだったが、
なんでもDeNAやLINE、クックパッドなどの会社も導入しているとかなんとか。
Sassでラクに書きたいけどCSSフレームワーク使いたい・・・

そんなアナタにBoostrap-sass。
もしかして・・・とは思ったけれど、まさか本当にあるとは。
それだけSassの需要が高まっているのかもしれない。

Posted on 3月 20, 2015 at 23:50 by 伊崎 · Permalink · Leave a comment
In: CSS · Tagged with: ,

jQuery, Bootstrapの勉強メモ

jQuery


jQueryはかなり便利だった。導入も簡単なのがいい。
本当ならJavascriptだけで色々やってみた後で
jQueryに手を出してみると、更にその威力が分かるのかもしれない。
先にjQueryありきで始めると手放せなくなりそう。


先日HTML5について改めたとき、
DOMと聞いてドキュメントオブジェクトモデルかー、へー。
と何か新しく覚えた気になっていたけれど、
前にXMLの勉強をしたときに普通にやってた。忘れてた。

そうしてみるとjQueryはXMLパーサに色々機能を追加した感じぽい。
途中でboostのプロパティツリーを思い出した。

Bootstrap


Bootstrapを少し触ってみて驚いた。
本当に簡単に色々と出来てしまう。
応用しようと思うとクラスや細かい属性の知識が必要になってくるけれど、
デザインを作ること意識せずに中身の実装に力を入れられる。

はじめ、CSSフレームワークを使うと
大体同じような見た目になってしまうのではないかとも思っていたけれど、
きちんと使えばモダンでオリジナル性の強いサイトも作れる。
ふと気になってドットインストールのサイトでソースをみてみたら、
Bootstrapが使われていた。驚き。

CSSフレームワークはBootstrapだけでなく他にも色々と公開されている。
Bootstrap(Twitter Bootstrap)から派生して
Google Bootstrapなんかもあるらしい。

勉強につかったサイト

ドットインストール – jQuery入門
ドットインストール – Bootstrap入門

Posted on 3月 19, 2015 at 11:06 by 伊崎 · Permalink · Leave a comment
In: Bootstrap, jQuery

Bootstrap勉強中の残念な出来事

HTML、CSS, CSS3, Javascript, jQueryと入門をやって、
次にBootstrapをやってみている際に起きた残念な出来事。

Bootstrap便利だなー!と思って進めていると、
Gridシステムだけなぜかきちんと表示されない。

2015-03-18_165900

こう表示されるはずなのに、

2015-03-18_170233

どうしてもこうなってしまう。
コードは間違っていないし、他のメニューなんかは正常に表示されている。
公式のサンプルでもグリッドシステムだけがうまく表示されない。

例ではBootstrapのバージョン3.0を使用しており、
ダウンロードしてきたのは最新版の3.3.4だった。
バージョンアップで何か変わったのかもと、過去バージョンにしてみても結果は変わらない。

Windows上で色々試してもダメ。
ならばLinux上ではどうかとUbuntuで同じことをしてみる。
正常に表示される。

うそ・・・だろ・・・

Windowsに戻って改めて確認してみる。
どこも間違っていない。

もっと詳しく見ようとブラウザを拡大する。

あっ・・・・

2015-03-18_170836

2015-03-18_171746

誰も詰まらないようなところで詰まる。
残念すぎて自分で苦笑い。これがレスポンシブデザインってやつか。

こんなのわざわざ記録するのも恥ずかしいことだけど、
もしかしたら数千、数万人に一人は同じところで悩む人がいるかもしれない。

・・・いるのかな。

でも今回詰まったおかげで、
Chromeで開発するときは開発者ツールのメニューから
「DevTools」を開いているときはキャッシュしない設定があること知った。
こんな残念なことでも身についたことがあってよかった。

でかいディスプレイが欲しい

Posted on 3月 18, 2015 at 17:13 by 伊崎 · Permalink · Leave a comment
In: Bootstrap

Javascript勉強メモ

敬遠していたけれど今更ながらやってみる。
ひとまずドットインストールのJavascript入門をやった上での感想をメモ。

ドットインストール – Javascript入門

思ってたよりシンプル


Javascriptで書かれたコードを目にする機会はそれなりにあった。
しかし実際に運用で使われているコードはどうしても複雑で難しい印象があった。
今回、改めて基本構文などを勉強してみると、
思っていたよりシンプルで分かりやすかった。

細かい機能やどんなことができるのかは流石に覚えきれないが、
基本的な記述はCやC++などと大差はなくぽんぽんと進められた。

以下困りそうなところ。


即時関数は変数のスコープを制限するのに使われることがあるらしい。
他にも複雑になってくると多用されていることがあるとか。
スコープに関して言えばC/C++みたいに、
{}で囲っただけで判断してくれれば分かりやすいんだけどなぁ。

オブジェクトはクラスみたいなもの。
プロパティに直接アクセスできること、
アクセス制限がないことを考えると、
C++で構造体を使うようなものなのかもしれない。

DOM


ドキュメントオブジェクトモデル。
Javascriptでページ上の要素を自由に操作できる。
そんな感じのことができるというのは知っていたけれど、
実際にやってみて笑ってしまった。これは頑張ればなんでもできそう。

リファレンス


Javascriptを触る上ではMozillaのリファレンスがいいらしい。
https://developer.mozilla.org/ja/docs/Web/JavaScript

なんか・・・


WordpressのJetpackでMarkdownを有効にしてみたら
表示が気持ち悪いことになってる。なんだこれ。
見出しの後の改行が文の改行になってる・・・。

Posted on 3月 17, 2015 at 15:10 by 伊崎 · Permalink · 2 Comments
In: Javascript

HTML5+CSS3勉強メモ

色々と改めて勉強をするにあたって、
そもそもの基礎であるHTML+CSSの基本を改める。

今までも興味本位で触ったことはあったけれど、
その場限りで出来ればいいやといい加減に済ませていた部分が多かった。

それに関する勉強メモ。

HTML5関連


CSS関連


CSS3関連



まとめ

HTML5は少し前に簡単にやってみたことがあったけれど結構忘れていた。
sectionやarticle、asideといったセクショニングコンテンツの存在を思い出した。
前に勉強したときはHTML5が正式にリリースされたときでまだまだ情報が少なかったけれど、
今は解説サイトも増えててよかった。

CSS、CSS3については今まで本当にいい加減だった。
「これをしたい」と思ったらとりあえずググってそれっぽいコードを拾ってきて、
トライアンドエラーで試行錯誤していた。
ボックスモデルとか存在はGoogleChromeの要素の検証で見ていたけれど
呼び方すら知らなかった。

HTML5関係はひとまず、
html5プロフェッショナル認定資格のレベル1を目指してみようと思う。
レベル1でも舐めてかかるとそれなりに難しいらしい。

CSS3とかもうぶっ飛んでる。
キーフレームアニメーションまで出来るとか、
もう見た目を規定するCSSって言い方すらおかしいんじゃないか・・・?

勉強に使ったサイト

ドットインストール – HTML入門
ドットインストール – CSS入門
ドットインストールCSS3入門


Posted on 3月 17, 2015 at 11:15 by 伊崎 · Permalink · 4 Comments
In: CSS, HTML

Unityについて少し調べた

やってみませんかと言われたので少し調べてみた個人的メモ。

Unityとは



動作環境



Unity5でもっと増えてるっぽい。

開発環境



開発言語



JavaScriptはWEBで使われているそれとは違い、
Unity用に拡張されているらしい。
JavaScriptらしくない部分も多く、一部のユーザからJavaScriptではなく
UnityScriptと呼ばれるほどとか。

Unity5の公式みたらUnityScriptが正式名になってた。

BooはPythonぽい記述ができるスクリプト言語らしい。
使っている人はほぼいないとか。

Unity5のスクリプト一覧になかった。
消されたっぽい。


Unityで作れるゲーム



その他、やり方次第で何でも作れる。

http://japan.unity3d.com/create-games/


3Dゲームと2Dゲーム


Unityは元々3Dゲームを作るためのエンジンだった。
2Dゲームも作れなくはないが、かなり大変だったらしい。
それがUnityのバージョン4.3で、
2D機能もガッツリと強化されたとか。

ライセンス


Unityはユーザ登録を行うことでUnityを使う権利を得られる。
Unity自体が手に入るわけではない。
使う権利を得るだけなので、
手にしたUnityを使う権利を第三者に譲渡してはいけない。

UnityのライセンスにはUnityとUnity Proの2種類がある。
Proは日本円で約15万。

無料版であるUnityでもゲームを作るうえで
必要な機能は全て使うことができる。
Proにすると痒いところに手が届くようになる。

Proの機能のひとつ、
スプラッシュスクリーンの変更というのは、
起動時にでるUnityのロゴのことだと思う。

昨年度の売り上げが1000万円を超える場合

正確にはUSDで100,000を超える場合は、
Pro版を契約しなければならない。

http://japan.unity3d.com/unity/licenses


完成したゲームの権利


リソース、アプリケーション共に開発者に帰属する。

テキストアドベンチャーゲームについて


日本ではアニメやマンガ、ライトノベルが強いように、
ゲームでもテキストアドベンチャーがチカラを持っている。

Unityではその辺をどうやって実現するのか少し調べた。
結果、大きく3つの実装方法がみつかった。


イベントやキャラクターのメッセージをエクセルで編集できるすごいツール。
表示させたキャラクターのアニメーションも簡単に表現できる。
当然別にゲームを作って会話パートとして宴を使うこともできる。

ただし有料で7000円。

http://madnesslabo.net/utage/


ジョーカースクリプト

商用でも無料で使えるADV作成ツール。
タグによってさまざまな処理が行える。
宴に比べると覚えることが多くて難しそう。
こちらも宴と同様に会話パートとして使うこともできる。
リファレンスを見る限りではアニメーションには弱いみたい。
もしかしたら出来るのかもしれない。プラグインが準備中で期待大。

http://jokerscript.jp/


自作する

Unity上で自力で実装しようとするブログがあった。

http://tsubakit1.hateblo.jp/entry/2014/12/06/233000


テキストの表示さえ出来てしまえば、
後は独自のタグなんかを解釈する仕組みができればいい。
一番面白そうではあるけどかなりの手間がかかる。
C#でLuaをバインドする方法もあるらしいので、
もし出来たら夢が広がる。

結局どうなの?

テキストアドベンチャーについて分かりやすいスライドがあったのでメモ。

http://japan.unity3d.com/unite/unite2014/files/DAY1-1800-room3-KobayashiAndTokimura.pdf


どれを使うにしても、
Unity上でバストアップや背景画像などの
膨大なデータを扱うのは相当大変らしい。
これらを上手くさばける仕組みは自作する必要があるっぽい。

ただ宴の編集の簡単さとアニメーションはかなり魅力的。

感想


JavaScriotの勉強になるかなと思ったらダメそう。
ただ普通にゲームを作る目的としては面白そうだと思った。
ドットインストールに全26回のレッスンがあるからやってみてもいいかも。

5も出たばっかりらしいし、
触れてみるタイミングとしてはいいかもしれない。

Playgroundとかいうエンジンも少し気になるところ。

http://d.hatena.ne.jp/hdk_embedded/20131106/1383681073

Posted on 3月 15, 2015 at 19:58 by 伊崎 · Permalink · Leave a comment
In: Unity

Atomエディタがすごすぎた話【0.187.0】

2015-03-14_003912

Sublime Text:あそびだったのね!
( ' ^'c彡))Д´) パーン

Sublime Textについて書いたら
Atomエディタもあるよと教えていただいた。

ははは、Sublimeに勝てるエディタがあるわけ・・・

Atomに乗り換えました

乗り換えたというほどSublime Textもまだ使っていないけれど。
Sublime Textはインストールした後、
UIの格好良さやパッケージ周りの使い勝手のよさで
惹かれていった部分があるけれど、
Atomはもっとすごかった。

GitHub社製

そう聞いただけでなんだかプログラマのために作られた感がすごい。
更にためしにインストールをしてみると・・・

2015-03-14_003803

インストール画面。
なにこれすてき。

インストール直後の画面も格好良い。

2015-03-14_003912

AtomエディタはブラウザであるChromiumがベースになっているらしい。
タスクバーに表示されるアイコンもテキストエディタとは思えない感じ。

2015-03-14_200242

Atomエディタで出来ること

パっとメニューだけみると
Sublime Textよりもできることが少なそうにみえるが、
その機能は本当にプログラマのために考えられた
すばらしいものばかりだった。

ドットインストールに
Atomエディタのレッスンがあったのでやってみた。

ドットインストール – Atom入門

タブで複数のテキストを編集できるのはもちろんのこと、
Sublime Textのようにパッケージで色々な機能を追加できる。

コマンドパレット

基本的にAtomエディタ上で出来ることは
コマンドパレットという機能から検索ができる。
ちょっとショートカットキーを忘れてしまったようなときも、
例えばコマンドパレットに「undo」などと打ち込むと
それに関する機能の一覧とショーカットキーも表示してくれる。

2015-03-14_201302

ファイルの開き方

Atomエディタではファイルメニューに
「ファイル」だけではなく「フォルダを開く」が用意されている。

2015-03-14_201718

フォルダを開くでフォルダを指定し、
ビューメニューから「Toggle Tree View」
もしくは「Ctrl+\」でツリービューが開く。

さまざまな設定が言語ごとに行える

コマンドパレットにsettingと入力すると
「Settings View」という項目が表示されるので選択。
すると設定画面が開く。

ここでは基本設定から言語別の設定、キーバインドの確認、
パッケージのインストール、テーマの変更などが行える。

ドットインストールのAtomエディタレッスンの04で
言語設定はSettings Viewのメニューに何か入力しているが、
レッスンと同じ場所に検索窓は付いていない。

最新バージョンでは「Packages」に入って、
「Installed Packages」の検索窓の「Lang」と打ち込めば出てくる模様。

2015-03-14_202542

スニペット

これがまたすごい。
言語ごとにすごい数のスニペットが用意されている。
これはトリガーとなる文字を打ち込んでTABを押すと、
コードを補完してくれるという機能。

これをきちんと覚えたらコーディング速度がはんぱなくあがると思う。

2015-03-14_202908

スニペットは各言語の設定ページの下部でみることができる。

ファイル検索、文字列検索もすごい

開いてるフォルダを対象にCtrl+Tでファイルを探すことができる。

文字列検索はおなじみCtrl+Fから。
正規表現なんかも使える検索ウィンドウが表示される。

更にここからがまた便利な点。
Ctrl+Shift+Fで開く検索ウィンドウは、
現在開いているフォルダの中から文字列を検索してくれる。

こういう機能は別に最近のエディタにはよくあるので
そこまで珍しいものではないけれど、検索結果がいい。かなりいい。

2015-03-14_203644

Ctrl+Shift+Rで開くシンボル検索では、
変数名なんかも検索できる。

マルチカーソル

他にも対応する括弧への移動(Ctrl+M)やブックマークなど、
よくある機能はもちろんのこと、
特に目を惹く機能がマルチカーソル。

2015-03-14_204529

例えばこんなとき。
あー、やっぱり”hello atom!”みたいに!付けたかったなー
と思ったら、

一番上の”hello atom”のmの後にカーソルを移動し、
Ctrl+Altを押しながら矢印キーの下を押すとカーソルが増える。
この状態で入力すると、
カーソルが出ている部分全てに文字が挿入される。

2015-03-14_204823

マルチカーソルがこうした繋がった場所だけでなく、
Ctrlを押しながら任意の場所をクリックすることで、
好きな位置にカーソルを置くことができる。

2015-03-14_205034

マルチカーソルモードはエスケープキーか、
マウスでテキトウな場所をクリックすれば抜けることが出来る。

もちろんMarkdownエディタも付いてます!

2015-03-14_205325

Atomエディタはブラウザがベースになっているので、
Markdownファイルを開いているときCtrl+Shift+Mで
画面を分割してプレビューを表示させることができる。

似たような形で画面の半分をブラウザにすることもできるらしい。

さまざまなパッケージ

便利なパッケージもたくさん用意されている。

Atomエディタのレッスンで紹介されていたもの
+ autocomplete-plus
– コード補完を強化する
+ file-icons
– ツリービューのファイル名の横に可愛いアイコンが付く

他にもAtom上でgitを触れるようにするgit-plusとかあって
きたこれ!と思ったけれど日本語文字化けしてた。
minimapとかいれたらパッと見Sublime Textとほとんど変わらない。

まとめ

とにかくすごかった。
まさにコードを書く人のためのエディタという感じ。

問題があるとすれば、メニューが日本語化できないことくらい。
ただこれも基本的な操作は普通のテキストエディタと同じだし、
それなりに馴染み深い単語が多いので
英語が苦手な僕のような人間でもそこまで困らない印象。

ただコマンドで色々できる反面、
色々できるようになってくると中毒性が高そう。
Vimに慣れた人が頑なにVimを使うように、
Atomに慣れすぎると他のエディタが使えなくなる可能性。

まだそんなに調べていないので分からないけど、
Atomのウィンドウの一つとして端末を表示させられたりしたら
最高だなぁと思った。

Posted on 3月 14, 2015 at 21:19 by 伊崎 · Permalink · 4 Comments
In: ソフトウェア・ツール

Git勉強メモ

2015-03-13_211851

Gitがまともに使えなくて絶望したので
今更ながらも勉強することにした。

ひとまずドットインストールのGit入門を全て受講して基本を学び、
実際にいくつかの機能を試してみた。

ドットインストトール – Git入門

+ #01 gitとは何か
+ #02 バージョン管理の流れを理解しよう
+ #03 gitの設定をしよう
+ #04 初めてのコミットをしてみよう
+ #05 gitのログを見てみよう
+ #06 現在の状態を把握しよう
+ #07 差分を確認してみよう
+ #08 gitでのファイル操作について
+ #09 git管理に含めない設定
+ #10 直前のコミットを変更する
+ #11 過去のバージョンに戻る
+ #12 過去のバージョンに戻ってみよう(2)
+ #13 ブランチを使ってみよう
+ #14 ブランチをマージしてみよう
+ #15 マージの衝突を解決してみよう(1)
+ #16 マージの衝突を解決してみよう(2)
+ #17 タグを使ってみよう
+ #18 エイリアスを使ってみよう
+ #19 初めての共同作業
+ #20 共有リポジトリにpushしてみよう
+ #21 リポジトリの内容を共有してみよう
+ #22 共有時のトラブルを解決する

反省

今までGit自体はGithubで使っていた。
しかし、僕がGithubを使う目的はあくまでソースのバックアップのためであって、
効率的な開発を行うためではなかった。
それゆえにGitコマンドを覚えることは必要だと思いつつも、
便利なGUIのクライアントツールを使ってしまっていた。

今回とある事情からGitをコマンドで操作できないことが
自分の中で大きな痛手となった。

今更ながらまずは基礎だけでも学んで
気持ちよくGitを使えるようになりたい。

おれ・・・Gitが自由に使いこなせるようになったら
オクトキャットパーカー買うんだ・・・。

インストール

Windows7とノートに入っているUbuntuに導入した。
Ubuntuはソフトウェアセンターで普通にインストールできるけれど、
WindowsはストレートにGitが見つからない。
どうやらmsysgit(最近はGit for windowsと呼ぶらしい)というのが
Windows用のGitらしいのでこれをインストールした。

最新版のGit for windowsでGitのバージョンを確認する。

$ git --version
git version 1.9.5.msysgit.0

Gitの最新バージョンは現時点で2.3.2。
ただしGit for windowsだと1.9.5らしい。
Ubuntuの方に入れたGitは2.1.0。

とはいえそこまで特別なことをするわけではないので、
まずはGitらしい最低限の機能が試せればいいので問題なし。

ドットインストールのレッスンを終えて

コマンド自体は少ないが、
オプションや細かい部分で覚えることが多い印象だった。

リポジトリやブランチの考え方はSVNとあまり変わらないので
大分前に調べた知識がそれなりに役立った。

今更Subversionの基本を学ぶ

よく分かっていなかったのはコミットとpush、pullの関係。
僕の中で「コミット」といえば最終段階だった。

今までのSVNの使い方といえば、
自分のPCにリポジトリをチェックアウトして
そこで作業をして更新、コミットするだけだった。
自分の作業中の細かいバージョン管理は行わず、
とにかく動くようになったらマージしてコミットして終わり。

自分の作業中、よく分からなくなって
いったん作業コピーごと別の場所に複製して、
改めてリポジトリからチェックアウトするなんてこともよくあった。

もちろんSVNにもブランチやタグといった考え方はある。
上手く使いこなしていればその辺も管理できたのかもしれないが、
そこまで多人数での開発をしたこともなかったのであまり気にしていなかった。

Gitでは、
リモートリポジトリとローカルリポジトリが明確に分かれている。
リモートリポジトリからクローンしたリポジトリは、
自分の手元でローカルリポジトリになり、
そこでコミットやリセットが行える。

自分の細かい作業に対してもバージョン管理が行える。
そうして完成した自分の作業をリモートリポジトリに戻すのがpush。
リモートリポジトリにあがっている更新を受け取るのがpull。
リポジトリが2段構えになっているイメージ。
手元の管理はコミット、チェックアウト。
共有リポジトリへのアクセスがpullとpush。

コマンドもそれほど多くないし、
コマンドを知っているとできることも色々と分かってきた。
すぐに上手く使うのは難しいかもしれないが案外できそうな気がしてきた。

今までバージョン管理はクライアントでしかできなかったので
Linuxでの開発なんかは避けていた部分があった。
それがむしろコマンド覚えたら
Linuxで開発するほうがラクなんじゃないかとすら思えた。

最初はツラいことも多いけれど、
出来ることが増えるとワクワクする。

Posted on 3月 13, 2015 at 21:02 by 伊崎 · Permalink · Leave a comment
In: Git