Kohei's Tech Note: September 2013

Tuesday, September 24, 2013

Chrome Extentionの要素の検証が消えてしまう

欲しい機能があったのでChrome Extentionで実現しようと、ドットインストールのクロームエクステンションの作り方の動画を見ていたのだが、そこで拡張の要素の検証ができない！！！！＞＜

なんてことですごく困ったので、その解決策をここに記しておく。

解決方法は拡張を右クリックして、一番したのポップアップの検証をクリックすること。
そうするとChrome Developer Toolが別ウィンドーで現れて拡張の要素を見ることができる。

コードを見ないでデバッグなんてとんでもないからね。
無事CDTが現れてよかった

macでXamppを自動起動

イメージしているのは、システムを終了したmacを起動した際に、最初からxamppがすでにきどうしているところ。

下記リンクを参考にさせていただきました。

→MAC OS XでのOS起動時の自動起動 | 電脳芸 (ここをほぼ丸コピ)
→MacOSXでLighttpdを自動起動する - hippos-lab::net (手順を１から説明してくれるからわかりやすい)
→MacでWeb開発-(1) XAMPP for Macの環境設置 | Tokyo O life - ずばぴたテック (こちらはxampp_startup.tgzをダウンロードして自動起動する方法について紹介している)
→Mac活用日記 Mac OS X で XAMPP を自動起動する (上のリンク先を参考にして自動起動を行ったかたの記事。もし一つ上を参考にするならこちらもあわせてどうぞ)

僕は一番上のリンクを参考にさせていただきました。

どきどきしながら、再起動したところ動きました！
ほぼ一番目のリンクの方とやったことは同じなのですが、まとめておきます。

<コマンド>

cd /Library/StartupItems/
sudo mkdir xampp
cd xampp
sudo vi xampp

xamppの中身 (ここからの内容はすべて一番目のリンクのコピペです。)

#!/bin/sh
# Source the common setup functions for startup scripts
test -r /etc/rc.common || exit 1
. /etc/rc.common
SCRIPT="/Applications/xampp/xamppfiles/xampp"
StartService ()
{
      ConsoleMessage "Startping xampp"
      $SCRIPT start > /dev/null 2>&1
}
StopService ()
{
      ConsoleMessage "Stopping xampp"
      $SCRIPT stop > /dev/null 2>&1
}
RestartService ()
{
      ConsoleMessage "Restarting xampp"
      $SCRIPT restart > /dev/null 2>&1
}
RunService "$1"

:wqで保存してパーミッション変更 (こちらも一番目のリンクに書かれております)

sudo chmod a+x xampp

vi StartupParameters.plist

以下の内容をかいて、保存

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Description</key>
<string>XAMPP</string>
<key>OrderPreference</key>
<string>None</string>
<key>Provides</key>
<array>
<string>Appache with SSL</string>
<string>MySQL</string>
<string>Appache with SSL</string>
</array>
<key>Uses</key>
<array>
<string>Network</string>
<string>Resolver</string>
</array>
</dict>
</plist>

Monday, September 23, 2013

gitをmacにインストール

gitをmacにインストールさせる。

一応gitが何なのかはわかっているつもりだが、それでもしっかりした知識ではないので、いろいろスムーズに行かなかった。

今回従ったリンク先はこちら→http://www.msng.info/archives/2008/10/_git_mac_os_x.php

じゃ、いか僕がつまづいたところとその解決策。
------------------------

<2013/09/23 21:00:00>
wgetこまんどがない！！
上のリンクの方と同じように僕もwgetが入ってなかった。
ので、リンク先の著者の方の通りこちらのリンクを参考にcurlでgitをインストール
gitのバージョンはこちら(https://www.kernel.org/pub/software/scm/git/)のフォルダーを参考になんとなく、git-1.8.3.tar.gzを選択

<同日 21:01:00>
tarで解凍されない！！
実行したら以下のようなエラー文がでる。

tar: Unrecognized archive format

tar: Error exit delayed from previous errors.

そもそもtarというコマンドを知らなかったので調べる。
tarはUnix OSにおいて解凍するコマンドでオプションの詳細はこちらで→http://itpro.nikkeibp.co.jp/article/COLUMN/20060227/230896/

これは結局どうしたらいいかわからなかったら、gitを直接ダウンロードして、Downloadフォルダの中でtarしたらうまくいった。

原因はcurlでダウンロードできてなかったらしい。

<同日 21:23:00>
無事以下3つのコマンドが通ってgitをインストールすることができた。

cd git-1.5.5
./configure
make prefix=/usr/local all
sudo make prefix=/usr/local install

なお、gitがインストールできたかは「git」でヘルプが表示され、「git --version」で現在使用しているgitのバージョンが表示される

さあ、次はレポジトリの作成だ！！

Friday, September 20, 2013

.screenrcの設定

スクリーンを使いたかったのだがscreenの挙動がうまくいかなったから.screenrcのめも

escape ^Tt
vbell off

bind w windowlist -b

defencoding utf8
encoding utf8 utf8

hardstatus alwayslastline "[%02c] %`%-w%{=b bw}%n %t%{-}%+w"
hardstatus off

このキーバインドはどうなんだろうか？よくわからない

<2013/09/24 追記>
俺の.screenが進化した。
今までの不満点

vimで何かファイルを開いた後に終了するとコマンドプロンプトが一番したに表示され、なおかつ上にはさっきまで開いていたファイルの内容が記されている。
→ファイルをとじたことがわかりづらい
screenを起動するたんびにメッセージが表示される→時間の無駄
shellが4.2bashとか表示されて今自分がどこのディレクトリにいるかがわからない。
vimで編集しているときにshift + 矢印でなぜか挿入モードになったり、文章が消えたりする。→これに関しては僕が一般的なvimな使い方をしていないのかもしれないけど、shift + 矢印で一気にカーソルを移動させたい。
lsなどでフォルダを表示させると、色別で表示されない

以下のコードを書くことによって、これらの問題が一気に解消された。

// shellの指定
shell -$SHELL
// startup_messageを表示しないでという命令
startup_message off
// パソコンがログアウトなり、なんらかの接続が失われたらデタッチしてちょうだいという意味
autodetach on
// color
term xterm-color // これはどういう風に働いているかがわからない
attrcolor b ".I" // これもわからない
defbce "on" // これも調べたけどよくわからなかった。

すっきり！！

<同日 5分後追記>
すっきりと思っていたのですが、以下ふたつの問題がありました。

vimでの編集の色がscreenが起動しているときと起動していないときで違う
今いるディレクトリからスクリーンを起動させることが出来ない (必ずホームのshellからスタートしてしまう) → おそらくshellこところを編集すればいい

-----------------
あと、スクリーンが何かの理由で増えてしまったとき。

 sudo rm -r /var/run/screen/S-root/*

OR
screen -S ○○○○ -X quit

これで解決。
おそらく、screenの仕組みってセッションを保存しているんじゃないかな。
だから、その保存されたセッションを消去すればいいのだろう。

ぶるぶるふるわせるjQueryプラグインがおもしろーーい

最近の僕のお気に入りのwebサービスがstorys.jpなのだが、僕はストーリーを読んでいる際のロゴをホバーしたときの、あのぶるぶると震えるのが好きだ

なので、自作しようと思ったができなかったので、プラグインを探した。
→そしたらあった。

それがこちら (http://jackrugile.com/jrumble/)
最高に面白い

導入方法は簡単で
リンク先にあるギットハブからzipファイルをダウンロード。
展開したファイルの中の「jquery.jrumble.min.js」を使いたいところで読み込み、サンプルの通り動かす。

         // ファイルの読み込み

とするだけでうごかせる。非常に簡単だ。
ちなみにホバーさせた時の一回だけのときはこうすればいいだろう

         // ファイルの読み込み
         

$(function () {
       $('#buruburu').jrumble();
        $('#buruburu').mouseover(function () {
                $('#buruburu').trigger('startRumble');
                setTimeout(function () {
                        $('#buruburu').trigger('stopRumble');
                }, 80);
        });
})

これまた簡単

ロゴとかをデザインするときに考えること

参考リン3つ

まだすべてを読み切れてない。

ロゴを考えるときに参考にする

Monday, September 9, 2013

mysqlのデータベース、テーブルの文字コードはutf8にしよう

文字コードは必ずutf8にしよう。
じゃないと文字化けの問題が出てしまう。

参考→http://babyp.blog55.fc2.com/blog-entry-838.html

文字コード関連でもう一つ
→http://ext.omo3.com/linux/mysql_character_set.html

とにかく、上のリンクでコマンドをコピペして、文字コード確認→文字コード変更しよう

Saturday, September 7, 2013

コードイグナイターが超簡単！！

まじ簡単でびっくりした。
データの取り出しを簡単にできるし、まじびっくり！！

以下メモ

・データベースについては、application/modelsに(データベース名)_model.phpに以下のコードを書く

class News_model extends CI_Model {

        public function __construct()
        {
                $this->load->database();
        }

        public function get_news ($slug = false) {
                if ($slug === FALSE) {
                        $query = $this->db->get('news');
                        return $query->result_array();
                }

                $query = $this->db->get_where('news', array('slug' => $slug));
                return $query->row_array();
        }
}

コントローラーにおける->dbはデータベースにつなげるだけだから、(テーブル名)_modelにしたからってそのテーブルだけしかつなげないということではない

・コントローラー(モデルとビューの橋渡し)はapplication/controllersに(テーブル名 || urlにしたい文字列).phpに以下のコードを書く
・functoinの名前は(クラス名)/(function名)のurlにアクセスされたときの処理

class News extends CI_Controller {

        public function __construct()
        {
                parent::__construct();
                $this->load->model('news_model');
        }

        public function index()
        {
                $data['news'] = $this->news_model->get_news();
                $this->load->view('news_index', $data);
        }

        public function view($slug)
        {
                $data['news'] = $this->news_model->get_news($slug);
        }
}

・ビュー。コントローラーで処理されたデータを表示する

こんにちは！

viewで変数にアクセスするには、$dataの連想配列のキーになる

＜追記＞
複雑なselectを書けたいときに参考になる
http://ellislab.com/codeigniter/user-guide/database/active_record.html#select

複数のメソッドをつなげる
こんな感じに
$this->db->select('title')->from('mytable')->where('id', $id)->limit(10, 20);
$query = $this->db->get();

詳細はMethod Chainingを参照

rowをカウントする

$this->db->where('id', 2);
$this->db->count_all_results();

Wednesday, September 4, 2013

CodeIgniterのindex.phpを消してアクセスする方法

参考→http://ellislab.com/codeigniter/user-guide/general/urls.html (てか公式ドキュメント)

Sunday, September 1, 2013

そのた (フロントエンド)

ユーザーのアクセス環境を取得
http://www.myu-zin.com/webridge/archives/1038.html
cssではうまくできなかったから、phpでやたた
phpはフロントエンドもできるけどサーバー系だし、どうやって記事を分類したら良いのかを迷うw

JSでウィンドーサイズの変更を取得するプラグイン
http://d.hatena.ne.jp/cyokodog/20101101/exresize01

コピーしましたってやつを実装
http://tech.genestream.co.jp/2013/09/11/clipbord_copy_of_web_application/
このブログを書いていた人の勤務先がつい最近知り合った人のインターン先だったw

一行で左右に文字をおきたいとき。
http://the-zombis.sakura.ne.jp/wp/?p=1564

firstクラスとsecondクラスを同じ行に入れたい

// html


こちらがfirstです

こちらがsecondです

// css
.first {
    float: left;
}
.second {
    text-align: right;
}

これでいける

文字を省略して...と表示させたいとき
http://ameblo.jp/linking/entry-10268808742.html

// html

これはとても長い文章です。それはとてもとても長いです。まるで、象の鼻みたい。もしくはキリンくらい。。。ちょっと言い過ぎたかも。。。
// css
.third {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

phpでもやる方法があったんだけど、また次使うときに調べる

CSSで図形を作る
http://css-tricks.com/examples/ShapesOfCSS/

要素に影をつける
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
アイコン系のCSSリンク
CSS3 Image Styles

beforeとafterの説明。超絶わかりやすい
http://www.hongkiat.com/blog/pseudo-element-before-after/

JSで要素を追加。ついでにクラスも二つくらいつけちゃうし、style属性も決めちゃう
いつもはjQueryでやってるんだけど、事情でJSだけでしからやらないといけないときのために

var p = document.createElement('p');
p.innerText = 'Hello, This is SAMPLE SENTENCE';
          
// クラスを追加
p.classList.add('red');
p.classList.add('sample');

// sytle属性を追加
p.style.color = 'red';
p.style.fontSize = 35;

document.getElementById('sample').appendChild(p);

テキストの色を背景色で変えるプラグイン
http://www.kennethcachia.com/background-check/index.html

要素を反転させるjQueryプラグイン
http://lab.smashup.it/flip/
絶対役に立つ

サーバー関連

ssh ... -vvv
とかくとなにをやっているか見せてくれる。
早く理解できるようになりたい

sshのconfigファイルをいじくって、簡単にssh接続できるようになった！
Permission denied(publickey)とエラーが出ていたのだが、こちらの方のエントリーをみて解決！
→http://nick.hateblo.jp/entry/20111209/1323455748

自分のサーバーのドキュメントルートを知る
httpd.confをまずみつける
デフォルトではきっと/etc/httpd/conf/httpd.confとある。

そのファイルを開き、DocumentRootを検索
参考→http://www.adminweb.jp/apache/docroot/index1.html

サーバーを再起動
sudo service network restart
sudo service httpd restart
httpd.confをいじったときはこれが必要
参考→http://blog.livedoor.jp/yuppi0412/archives/22480485.html

ディレクトリにアクセスされたときに表示するファイルを決める
httpd.confを編集
DirectoryIndexを検索して編集
参考→http://www.linuxmaster.jp/linux_skill/2013/07/apache-4.html

アパッチのバージョンを確認
httpd -v

所用であるディレクトリのときにこちらにアクセスさせたいというときがあり、.htaccessをいじっていたのだが、apacheで.htaccessが聞いていなかったためにひどいめにあった

httpd.confの<Directory /var/www/html>
のAllowOverrideをAllに変更する
参考→http://www.masatom.in/pukiwiki/Apache/.htaccess%A4%CE%CD%AD%B8%FA%B2%BD/

ログファイルの出力先
/var/log/httpd/error_log

php.iniの場所
/etc/php.ini

mysqlの設定ファイル場所を調べる

 mysql --help | grep -A1 "Default options"

左から順に表示される
参考→http://qiita.com/kengos@github/items/2ede226c1bec86459920

Basic認証
プログラムからも出来たらしい
参考→http://www.phpbook.jp/tutorial/auth/index1.html

CodeIgniterでやる方法も調べたからのせておく
参考リンク
→http://immature.01kawa.com/php/codeigniter/codeigniter%E3%81%A7basic%E8%AA%8D%E8%A8%BC/
→http://codeigniter.jp/user_guide_ja/general/creating_libraries.html→http://codeigniter.jp/user_guide_ja/general/creating_libraries.html（ライブラリー）

エンティティ化とmysqlインジェクション

mysqlインジェクションはPDOを使って対策。これも結構使えるようになるまでめんどくさかったけどもう覚えてない。

んじゃ、エンティティかのコードをば。言語はphp

 function entity ($str) {
         $search = array('<', '>');
         $change = array('<', '>');
         return str_replace($search, $change, $str);
 }

Unixのパーミッションの見方

Unixだとls -laで現ディレクトリ配下のパーミッションが見れる。

今までどうやってみるかしらなかったので調べた。

パーミッション、読み権利、書く権利、実行する権利についてはこちら。
非常にわかりやすい
→http://www.din.or.jp/~raelian/unix_permission.html

説明へ、ls -laで以下の表示があったとする

-rw----r-- 1 root root 2197 Aug 29 13:44 index.html

-rwxrwxr-x 1 root root 144 Aug 29 13:45 sample.html

drwxrwxrwx 6 root root 512 Jun 22 18:46 top.html

それぞれの記号の説明

「r」 = readable よみこみ可能

「w」 = writable 書き込み可能

「x」 = executable 実行可能

１桁目 -- ディレクトリかディレクトリじゃないか、ディレクトリだったら「d」違ったら「-」が表示される

2 - 4桁目ファイル所有者の説明

5 - 7桁目グループに所属するユーザー

8 - 10桁目グループに所属しないユーザー

以上でした

＜追記＞

パーミッションを変更したいときはchmod パーミッションコード (読み書き実行すべてのユーザーにオールオッケー) パス

を実行すればとりあえずmkdir() Permission deniedというエラーは出なくなるでしょー

多分大変な問題を引き起こすはずだけど、まだそこは勉強不足