2014-04-24

GithubでWEBページを瞬時に公開しようの巻

git github 開発 web開発

事のいきさつ。

「githubにWEBプロジェクトをプッシュして、他のメンバーにcloneしてもらえるのはいいんだけど、開発じゃない人はいちいちcloneしてから確認するのめんどいよね」

「githubから直接htmlのページ見れたらいいのに…」

とか思ってたら、実はgithubで見れるみたいです。

（たぶんとても今更。）

というわけで以下のサイトを参考にやってみました。

Web - Githubを使って3分でHPを公開する。 - Qiita

「3分」という響きがすごい。みりょくてき。

おおまかな手順

（すでにindex.html が作成してあるリポジトリとする。）

公開したいリポジトリで「gh-pages」ブランチを作成。
「gh-pages」ブランチをデフォルトブランチとして設定する。（公開したいリポジトリの「Settings」ページに「Default branch」という項目があるので、そこを「gh-pages」に変更するだけ）
数分たったら、「http://ユーザ名.github.io/リポジトリ名」にアクセス！

そしてできたのが以下のページ。

http://massirohuyu.github.io/sapporo-aed-map/

（↑諸事情でもしかしたら消えるかも…）

できるのに３分じゃなくて５分くらい経ってたきがする…

まあ、気長にまちましょう。

これでモックアップ用に作ったhtmlファイルなんかはすぐに確認してもらえますね、とても便利！

2014-04-24

gitコマンドのカンペ集（ターミナルでgithubにpushするまで）

開発ターミナル git github

自分がよく忘れがちなもの、

それは「gitコマンド」である。

というわけで、よく使用するgitコマンドをメモってみる。

リポジトリの作成

新しくリポジトリを作る場合はこのコマンドで。

$ git init

githubやらどこかやらからクローンしてくる場合はこれ。

$ git clone https://github.com/username/repositori.git

リモートリポジトリの指定

githubであらかじめリポジトリを作っておいて、そこをpush先に指定。

$ git remote add origin https://github.com/username/repositori.git

ファイルをコミットするリストに追加

ファイルを色々作って、イニシャルコミットする段階になったらこのコマンド。

$ git add .

「.」をつけることで新しく作ったファイル＆変更したファイルを、コミットするリストに追加してくれる。

以下で、ちゃんとコミットしたいファイルが追加されてるか確認。

$ git status

ファイルをコミットする

いよいよコミット。コミットメッセージも一緒に入力。

$ git commit -m "Initial commit"

ちなみに、以下のオプション？を場合によってつけるとよいかも。

--amend　：直前のコミットを取り消して、コミットし直してくれる。
-a　：「git add .」してなくても、以前コミットした状態から変更があるファイルのみコミットしてくれる。（新規ファイルは無視）

リモートリポジトリにプッシュする

最初に登録したリモートリポジトリ（今回だとhttps://github.com/username/repositori.git）にプッシュ。

$ git push -u origin master

ちなみにデフォルトのブランチ（通常はmaster）にプッシュするなら、「-u origin master」は初回のみでOKです。

これでgitコマンドうつときもこわくないね！

＼＼└(’ω’)┘／／

2014-04-23

RailsをMac OS Xに入れようの巻 vol.1

開発ターミナル Ruby Rails

いきなりですが

家計簿アプリなんぞをphpとbackbone.jsを使用して作っています。

一応githubにあげてありますが、人に使ってもらえるもんじゃなく完璧に自分用です。

自分勝手にがりがり書いてたのですが、旦那氏と相談して、以下を実装しようということになりました。

スマホで使いやすいようにしたいよね
ていうかデータベース使おうよ（現状、テキストファイルにデータ保存してた）
phpじゃなくてrails使って、herokuで動かそうよ

そんなわけでとりあえず

ローカル上でrails環境構築するところからはじめました。

以下、奮闘の様子

過去にRails使ってたかチェック

昔一瞬だけRailsを使用したことがあったので、PC（Mac）に痕跡が残ってないかターミナルで調べました。

$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

あれ、無いみたい…。

（なぜか）rbenv入れて、複数バージョンのRubyをインストール

何気なくRubyのバージョン確認したら1.8.7でした。

どうせなら最新のをrbenvで入れたいなと思ったので下記サイトを参考に入れてみる。

Rails開発環境の構築（rbenvでRuby導入からBundler、Rails導入まで） - Qiita

学んだこと（主にターミナルのコマンド）

bash→ターミナルの中でうごいてるやつ
「cd」だけ入力するとホームディレクトリに移動する
「cat <ファイル名>」でファイルの中表示
「touch <ファイル名>」でファイルの作成
あんまりinstall時に「sudo」使いすぎると、今後もsudoさんまみれになる
「ls -la」で一覧表示＆隠しファイルも表示

で、

肝心なRubyの最新版を入れる件ですが、「rbenv install」するところで何やらつまづきました…

とりあえず今回はここまで。

2014-04-22

ブログ上でコードを整形して見やすく表示してくれる「Syntax Highlighter Scripts Generator」

プログラミング開発

技術者がブログはじめたら

まずはコードを見やすく残せるようにならねばあかん。

ということで

こちらの記事を参考にしてみました。

http://k-1-ne-jp.blogspot.jp/2012/10/syntaxhihglighter.html

「Syntax Highlighter Scripts Generator」というサイトで

よく使う言語にチェックつけて「generate」ボタンをクリック！

出てくるscriptタグをまとめてこぴーして

<head>タグ内にペーストすればあらふしぎ。

function test(){
  console.log('もちもち');
}

記事のhtml編集で↓のように書けば上のように表示されます。。。

<pre class="brush: javascript;">function test(){
  console.log('もちもち');
}
</pre>

これできれいにコードを残せそう、やったね(^ω^)

2014-04-22

はじめまして

おしらせ

はじめまして、『ましろ』という者です。

自分のやっているサイトづくりの手順やらなんやらを

メモしないとすぐ忘れてしまうので、

ついでにWEB上に残したくてブログはじめました。

あ、あとブログサービスってどんな機能があるのか知りたかったので

これを機に色々いじって学習していこうとおもいます。

ちなみに自分の仕事は一言でいうと『WEBデザイナー』です。

もっと細かくいうと、

Photoshopでサイトのデザイン描いたり
HTML・CSSでマークアップしたり
Javascript（主にjQuery）プログラミングしたりしなかったり

ということをしています。

このブログでは、上に関連することだったり、

これ以外にも自分が興味でて片足つっこんだりしたことを

残していこうと思います。

それではどうぞよろしく。

まっしろぐ

Web関連、主にHTML、CSS、JavaScriptなんかの自分がやったことログ。