2013年11月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

サブドメインをまたいでcookieを引き継ぐjavascript

cookieを保存させて、その内容によってコンテンツを変えたり、
iphone用サイト/pc用サイトを切り替えたりしたいことがあります。

document.cookie = "key=value"; 

などとかいて、keyという名前のキーにvalueを入れていきます。

document.cookie = "name=takuya";

というような感じで。

こうすることによって、クッキーのnameキーにtakuyaが入っていたら
特定のコンテンツを表示するとか、特定のリンクに飛ばすとか、そういうことが
できるようになるわけなんですが・・・。

クッキーはドメインに対して保存されるものなので、
同じサイトでも、コンテンツによってサブドメインを使っていると
cookieが引き継げない

サブドメインがつくとcookieが引き継がれない!!

という問題があります。

それを回避することができます。



たとえば、あなたのサイトが
http://example.com

だとして、
http://neko.example.com
でもcookieにくわせたname=takuyaを利用したいとき、

cookieに保存するときに以下のようにします。

document.cookie = "name=takuya; domain=.example.com";

cookieにはdomain属性というのがあります。

基本的にドメインをまたいでcookieを保存させることはできないのですが、
上記のように

. example.com

というのをdomain属性に指定すると、
example.comでも
neko.example.comでも

クッキーを使うことができるのです。

 

さくらVPSを申しこんでから、node.jsインストール、socketサーバーの準備まで

自分がやった手順をメモ。
これでひとまずサーバー側は準備OKで、
フロント側のweb socketのjsを書き始められるよっていうメモ。
(※セキュリティなどは甘いかと思いますので、ご注意ください)

このとおりやってけば、わけわかんなくても一気にいけるはず。
1時間くらいで完了。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【申し込みしてsshログイン】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

①さくらサーバーVPSに申し込む
(2週間無料)
 

②さくらから登録完了メールがくるので、VPSコントロールパネルにログイン


③仮想サーバーのステータスが「停止」になってるので「起動」ボタンをクリックしてサーバーを起動
(その後はなんかあるまで放置)
リモートコンソールボタンをおすと、サーバーの処理がずらーっと動いているのがわかる。
それがとまるまでひとまず待つ。


④ターミナルを立ち上げてIPアドレスとrootユーザーとパスワードでsshログインする。
$ ssh root@111.111.11.111
(111.111.11.111はダミーです。メールで届いた正しいIPアドレスをいれてね)




━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【サーバーの基本設定】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

①パスワードを変更する
$ psswd


②adminユーザーを作成
$ useradd 'admin' 
$ passwd 'admin'

パスワードを設定する。
$ logout
でいったんログアウトして、ssh admin@111.111.11.111で再度ログイン


③sshのポート番号を変更
$ su
$ vi /etc/ssh/sshd_config

変な文字列が出てきたら、「i」をクリック下の方にインサートと出てきたら
インサートモードになって、編集できるようになったので、
#Port 22を
Port 10022
に変更。

escボタンをおすと、インサートモードが終了するので、続いて
:wq
と入力すると、保存されてviが終了する。

rootにログインしてる状態でsshを再起動

$ /etc/init.d/sshd restart

ログアウトしてrootでsshログインを試してみて入れなければOK
 
今後はポートを指定してログインすることになる。

今後のログインの文
$ ssh -l root -p 10022 111.111.11.111





━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【nodeとexpressとsocket.ioのインストール(あとforeverも)】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

このへんはもうコピペで!↓ 

①rootでログイン
$ wget http://nodejs.org/dist/node-latest.tar.gz

②nodeのインストール
次の文を1文ずつ実行していく
$ wget http://nodejs.org/dist/node-latest.tar.gz

$ tar zxvf node-latest.tar.gz

$ cd node-v0.10.22/
↑これはバージョンがどんどんあたらしくなるので、1つまえの実行結果の文章をみると、v0.10.23とか書いてあるのでそれをいれる

$ ./configure

$ make
↑ここで10分ほどまつのでお菓子を食べる

$ sudo make install

$ node -v

さいごバージョンが表示されればインストール成功!


③ディレクトリをつくる
$ mkdir 001
 
$ midir 001/public


④npmコマンドでsocket.ioとexpressをインストールする
$ npm install socket.io express

⑤npmコマンドでforeverのインストール
$ npm install forever -g

⑥ftpでサーバーに入ってみる
filezillaを立ち上げて、
サーバー : IPアドレス
接続 : SFTP
ポート : 10022
アカウント : root
パスワード : 上記で設定したやつ

入れれば成功!!



 

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【socketサーバーを作る】
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

①以下のjsファイルをつくってapp.jsと名付ける
---------
app.js 
var io = require('socket.io');
var express = require('express');
var http = require('http');

var app = express();
app.use(express.static(__dirname + '/public'));

var server = http.createServer(app).listen(80);
var io = io.listen(server);

io.sockets.on('connection',  function(socket){
       socket.on('msg', function(msg){
                socket.emit('msg', msg);
                socket.broadcast.emit('msg', msg);
        });
});
---------

②app.jsをサーバーにアップ
FTPソフトでroot/node-v0.10.22/001にapp.jsをアップ
↑さっきつくったディレクトリ


③ターミナルでapp.jsを実行
001ディレクトリまでcdで移動し、app.jsを実行
001$ node app.js


④WEBサーバーが立ち上がったかチェック
適当なテスト用intdex.htmlを作って、
FTPソフトで
root/node-v0.10.22/001/public にアップ

IPアドレスに接続して、表示されてればWEBサーバー動いてる

⑤foreverでWEBサーバーを動かす
そのままではターミナルを閉じるとWEBサーバーもとまる。

$node app.js とやるところを
$forever start app.js
とすると、ターミナルを閉じても動き続ける。

nodeの終了のさせ方は、「ctrl + c」 

iphoneサイトのデバッグをpcのsafariからやる


普段の制作は、chromeでやってます。

なんか問題起きたら、すぐに「要素を検証」を起動!(alt + command + i)
てな感じで。


この要素を検証にあたるやつが、実はsafariにも隠されていたと知り驚く。

そして、safariのデバッグツールには、ユーザーエージェントの切り替えもついていた!
(挙動のおかしいchromeの拡張機能とか使わなくてもいいんだ!)

そしてそして、safariのデバッグツールを使うと、usbで接続したiphoneのsafariが表示してる画面のデバッグが直接できる。


1.safariのデバッグツールを使えるようにする

普段は隠されていて、日常生活をしていたら見つからない。
1つ星以上のハンターが念で見つけたんだとか。

safariの環境設定>詳細

48


を開くと、「メニューバーに”開発” メニューを表示」というのがあるので、これにチェックを入れる。
(念で入れる)


すると、画面上のメニューに「開発」って文字が出てくる。

この中に、ユーザーエージェントやら、僕のiphoneやら(名前がだだもれしている)が表示されて、いろいろできるってわけ。 

21


そしてchromeと同様に、画面から右クリックでも、要素を検証的なやつを開ける
(要素の詳細という名前らしい)

17




2.iphoneのデバッグのためにiphone側の設定をする

設定アプリ>safari

をひらくと、一番したのほうに「詳細」っていうのがあるのでそれをタップ

Webインスペクタというのがoffになってるのでonにする。

これで準備OK!
(iphoneはiphone5S / iOS7.01です)


3.デバッグ

iphoneとpcをUSBでつないだ状態で、
iphone safariで自分の作ってるサイトを表示。


その状態で、今度は、macのsafariの環境>自分のiphoneの名前>url名を選択すると
iphoneで表示されてるページの、要素の詳細がひらく。

該当するソースとかクリックすると、リアルタイムでiphone側の画面も青くなるから
どこがどの場所なのか、とかも丸見え。




便利になった。

safariの支持率がちょっとあがった。 

phpで?(はてな)と:(コロン)が出てきて混乱した人、それは三項演算子というやつです

php勉強してたらサンプルプログラムで
「?」と「:」が使われた一文が出てきて混乱した人いるかい?

あたしだよ! (古い)


神dotinstall様 のphpでログインを作る授業で関数内に

return $user ? $user : false;

というのが出てきました。 

三項演算子のルールは

A ? B : C

Aがtrueの場合はBを実行する
Aがfalseの場合はCを実行する 


という意味
「Aなの?そうならBね、違うならCね」みたいな文章というわけ。

戻って、dotinstall御中の式を分解すると、

return $user ? $user : false; 

$userが存在するなら、$userを返す
存在しないならfalseを返す


っていう意味でした。

 

MAMP起動時にエラー「Checking MySQL databases failed」

MAMPを使って、ローカル環境でいろいろしてたら、
ある日から起動時にエラーが出るようになった。

52

/Applications/MAMP/Liverary/bin/mysqlcheck: Got error: 1045: Access denied for user 'root:localhost' (using password: YES) when trying to connect

というエラー文

これの解決方法を探してぐぐって英語のページで解決したので、
日本語で書いておく。


MySQLのrootのパスワードを設定ことがある? 


僕は最初にMySQLを使い始めるにあたって、root権限のパスワードを設定した。
 このエラーが出てる人は、同様のことをしているんじゃないかと思う。

パスワードが違って入れませんねん
 というエラーがでている。



解決方法

①Finderを使ってディレクトリにいく

Finderで

/Application/MAMP/bin

に行く。
 


②3つのファイルを探す

次の3つのファイルがある。
・checkMysql.sh
・quickCheckMysqlUpgrade.sh
・repairMysql.sh

 この3つのファイルをエディタで開く


③一部書き換える

どのファイル数十文字程度の命令文が書いてあるので
次の場所を見つける

 -u root -proot 〜 
どのファイルにも真ん中辺りにあると思う。

これの-prootの部分を、かつて自分が変更した新しいパスワードに変える。
rootのパスワードをaaaa1111にしたのであれば、

-u root -paaaa1111

とする。

 
④MAMPを再起動!

エラーが出なくなっていれば成功!

 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ