2016 06 28 の学び - Ruby on Railsの設計哲学を理解する
今週は達成感のある仕事ができて、とても嬉しかったので、
時系列でやったことを覚書しておこうと思います。
【ミッション】CSVファイルのGUIインポート-エクスポートツールを作る
(1) 内容
ここに、指定されたcsvファイルに対して、「この列は残す、この列は消す」といったように様式を整え、新しいcsvファイルをアウトプットしてくれるシェルスクリプトファイルがあります。(仮にこのシェルスクリプトファイルを、sample.shとします)
このsample.shは、Terminalからアクセスして、sample.shが入っているディレクトリへ移動し、./sample.shコマンドを打つと、命令を実行してくれます。
...これをブラウザ上でできるようにするのが、今回のミッションです!!!
"ユーザーは「ファイルを選択する」ボタンを押すとファイル選択ウィンドウが出てきてファイルを選べる。CSVファイルを選択して、「アップロード」ボタンを押すと裏でsample.shが動き出し、様式の整った新しいCSVファイルが自動的にユーザーのPCへダウンロードされる。"
まさにGUIツールの開発です。
このミッションを聞いた私は正直申し上げると、
「マジか〜〜〜全く出来る気がしない〜〜〜」
となりました。いかんせん、GUIの意味も.shファイルの意味も知らなかった身です。
不安になりながらも、開発を始めることにしました。
(2) やってみたこと: Ruby on Railsで構築にチャレンジ
結論から言うと、やりたいことと使っている道具が全く噛み合ってないことに気付き、Ruby on Railsでの構築は辞めました。
ただ、先日会社HP作成を成し遂げた後に見たRuby on Railsの世界は、
何もわからずひたすら独学で学んでいたときに見た世界とガラリと変わったので、
ここにその感動を書き記したいと思います。
(3) 学んだこと: Ruby on Rails
(3-1) まず、Ruby on Railsってなんだ
初めて見た時: なんだろう...プログラミング言語かな?rails new projectコマンド押すと一杯フォルダが作られて怖い(;o;) MVCが全然覚えられない...
今: webアプリ構築に必要な道具が揃ってるし、それぞれフォルダにまとまってて見やすい!超便利!
Ruby on Railsは、オープンソースのwevアプリケーションフレームワークです。聞き慣れない言葉で未だにこの言い方はピンと来ないのですが、要するにwebアプリ構築に必要な道具が全部そろった道具箱なんですね。それは例えるなら、一人暮らしを始めることになって、デパートで布団・まくら・カバー付きセットを買うようなもんです。一つ一つを買うよりも、まとめて買ったほうが楽。そういう感覚です。
余談ですが、Ruby on Railsついに5が登場したんですね...!
どんどん進化しててすごいなぁ。
Riding Rails: Rails 5.0: Action Cable, API mode, and so much more
(3-2) Ruby on Railsの設計哲学
1) 設定より規定(Convention over Configuration) - - - webアプリケーションの作り方について、様々なオプションを用意して、開発者の自由に設定させるよりも、規定(すなわち、適切なデフォルトの設定)を用意しておく方がいい、という考え。
2) 繰り返しを避けよ(Don’t Repeat Yourself) - - - DRY原則とも。まったく同じかほとんど同じコードがプログラム中に複数登場するのは無駄なので、できるだけ避けるべきだ、とういう考え。
この哲学、HP作成するまでさっぱりわからなかったのですが、今は共感できるようになりました。特に2に関しては、ヘッダーとフッターの内容を、htmlファイルを作るたびにコピペするの面倒臭い...無駄すぎる!と自分のスキルの無さを呪ったので、今後はDRY原則でサイト構築していきたいと思いました。
(3-3) おまけ
プログラミング言語 擬人化でググったら、ものすごく可愛い擬人化を見つけました。
Java、C++、Python…プログラミング言語擬人化計画! - Tech総研
これを見て更にプログラミングが好きになりました。
CSRF対策の話
先週のバイトで学んだことで書き忘れがあったのでメモ。
【やったこと】
ドットインストールを参考にしながら、お問い合わせフォームにCSRF対策を施しました。
#06 CSRF対策を施そう | お問合せ管理システムを作ろう - プログラミングならドットインストール
動画を見ながら思った事。
そもそもCSRFって何だ?
初耳だし何度読んでも覚えられないので、しっかりと調べて記憶を定着させる事にします!
【調べた事】
CSRFとは
リクエスト強要(Cross-Site Request Forgery)の略称で、特定の情報を特定のページにユーザーの意図とは無関係に送信させる攻撃のこと。情報漏洩やユーザーの意図しない操作が起こるなどの問題が起きる。Webアプリが以下の仕組みで動作している場合、
・Cookieでセッション管理を行っている
・HTTPの基本認証、SSLクライアント証明書を利用している
ユーザーからのリクエストを本人のリクエストだと判別する仕組みを持っていないとCSRF脆弱性になる。
Cookieとは
Webサイトの提供者が、Webブラウザを通じて訪問者のコンピュータに一時的にデータを書き込んで保存させる仕組みのこと。CookieにはWebサイト(Webサーバ)側が指定したデータを保存しておくことができ、利用者の識別や属性に関する情報や、最後にサイトを訪れた日時などを記憶しておくことが多い。
CSRF攻撃具体例
ユーザーがWebアプリケーションにログインすると、CookieにセッションIDが保存される。ブラウザを閉じずその状態のまま他のサイトに移動しても、CookieにセッションIDは残ったままになっている。このとき、ユーザーが罠サイトにアクセスして、WebアプリケーションにPOSTリクエストを送信するリンクをクリックする、またはスクリプトが実行されると、ブラウザはCookieのセッションIDとパラメータをWebアプリケーションに送信してしまう。つまり、Webアプリケーションから見ると、CookieにセッションIDが入っているため、正規のユーザーが正当なリクエストを送信して来たと判断してしまうことが、この攻撃のやっかいなところである。
CSRF対策
ワンタイムトークンについて、yahoo知恵袋でとても分かりやすい質問をしている質問者様がいたのでリンク貼っておきます。
PHPでのCSRF対策をしたいと思い調べているのですが... - Yahoo!知恵袋
超分かりやすい。
今回CSRF対策を実装してみて、サイバー攻撃の怖さを痛感しました。
小学生の感想文並みの感想ですが、何が怖いって、対策するべき敵を知らない私自身です。ドットインストールさんのレッスンに、CSRF対策の項目が入ってなかったら、私はCSRFのことなんて考えずにHP作成を終えていたと思います。
プログラミングの勉強も大切ですが、webについての知識も身につけて行きたいと思いました。
ラスボス・文字化けオバケを魔法の呪文で倒した話
今週ようやく会社HP作成が完了しました(*°ω°*)
最後の最後にとんでもないラスボスが現れて、てんてこ舞いに...笑
未来の自分のために、ラスボスとの戦いのここに記録をしておきます。
【問題】
・お問い合わせフォームから送ったデータが、MySQL上で文字化け(åがたくさん出てくる)してしまう。
なお、お問い合わせフォームを作り方はドットインストールさんを参考にしました。
お問合せ管理システムを作ろう (全21回) - プログラミングならドットインストール
【てこづったこと】
・なにも考えずググッて出てきたものを手当たり次第試したことが失敗でした。肝心な目線が抜けていたのです。それは、今使っているphpやMySQLのヴァージョンはいくつなのか?という視点です。会社サーバー内のphpが結構古いヴァージョンだったので、そこが盲点でした。どうやらphpは5.3.6を境に仕様がガラリと変わったみたいですね。
PHP 5.3.6より前のバージョンの PDO MySQL で charset を指定する - Qiita
php 5.3.3とにらめっこしていた私は、見事文字化けオバケの餌食になりました...とほほ。これからはちゃんとヴァージョン確認してググりたいと思います。
【魔法の呪文】
ラスボス退治に使った魔法の呪文はこちらに書いてありました。
skip-character-set-client-handshake
"クライアントがどういう形で要求してこようがUTF-8で返答する"
問答無用で叩き切る感じがすごいコマンドですね。こちらを追記したら無事MySQLが日本語になりました。
【具体的に書いたコード】
(注1: php 5.3.3, MySQL 5.1.73を使っています)
(注2: ドットインストールに則ってファイルを作っています)
function.php
<?php
function connectDb( ) {
try {
array(PDO::MYSQL_ATTR_READ_DEFAULT_FILE => '/etc/my.cnf',
PDO::MYSQL_ATTR_READ_DEFAULT_GROUP => 'php',
);
return new PDO(DSN, DB_USER, DB_PASSWORD);
} catch (PDOException $e) {
echo $e->getMessage();
exit;
}
}
(以下の関数は省略)
?>
PDOについてはこちらに書いてあります。
/etc/my.cnfのphpグループを読み込めという命令を、ドットインストールで書かれているプログラムに追加しました。
そして、my.cnfファイルを以下のように書きました。
/etc/my.cnf
[mysqld]
character-set-server = utf8
skip-character-set-client-handshake
を、「symbolic-links=0」の下に追記
[php]
default-character-set = utf8
connect-timeout = 1
の項目を最後に追加。
こうしたら日本語でMySQLにデータが入るようになりました。
大好きな漫画でテスト投稿してみました。
解決してとても嬉しかったです。
引き続きプログラミングの勉強頑張ります(`・ω・)
ゼロから会社のHP作成してみて学んだこと
会社のHP作成をテンプレート等抜きでゼロから自分で作ってみて、
ドットインストールやProgateやTechAcademyだけでは学びきれなかったことを学びました。未来の自分のために覚書きしておきます。
・cssリセットを忘れずに行うこと。怠ると、違うブラウザやデバイスで見た時に、思わぬところに色がついちゃったりする。
貼り付けておきます: CSS Reset - YUI Library
・ヘッダーやフッターなど、どのページでも共通の部分は、事細かにidをつけて定義した方が良い。
(なぜそう思ったか) フッターに<table></table>で情報を書いていて、とあるページで、メインの中にも<table></table>を用いた時、フッターの微調整をするつもりでtableのcssを弄ったら、メインのtableの書式も変わってしまったから。出来る限り細かくidで指定しようと思いました。tableだけに留まらず、<p></p>なんかも、メインとは違うフォントサイズになることが多いので、idつけようっと。
・レスポンシブデザインにするべし
(なぜそう思ったか) レスポンシブデザインの真価は、どんなデバイスでも見栄えが良いということではなく、実装側の工数を最小限に抑えることにあるのだと今回身を持って体感しました。スマホサイトを別途作るということは、別のサイトをもう一個作ることと同じなのです...!作るのはそこまで大変じゃないのですが、実装後(リリース後)死ぬほど大変なんですよ。
例えば、「役員の写真を差し替えといて―」という状況になったときに、imgフォルダを2ついじらないといけなくなる。つまり、
/var/www/pc/img
/var/www/pc/sp/img (sp...スマホサイト用のディレクトリの意)
の2つをいじるということです。
「いやいや、/var/www/pc/imgだけ設置しておいて、スマホサイト用のhtmlやcssの相対パスを弄ればいいんでないの」
というご意見もあるかと思います。私もそう思ってました。
しかし、.htaccessで「PC以外のデバイスでアクセスした時に自動的にspディレクトリへリダイレクトする」という設定を行ったところ、相対パスで指定した部分が読み込めなくなるという事態に陥りました。具体的には、サーバーに上げた会社HPディレクトリにvim .htaccessで.htaccessファイルを作って、
RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /
RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteRule ^sp/(.*)$ $1 [R]
RewriteBase /
を作りました。
参考: htaccessによるデバイス振り分け - Qiita
これは私の推測ですが、
スマホ用HTMLさんとCSSさん「背景を取得しに、pcディレクトリ内のimgディレクトリ行って来まーす」
.htaccesさん「PC以外はspディレクトリに強制リダイレクトじゃ〜〜〜〜」
ということだと思います。つまり、PC以外はspディレクトリよりも上の階層のディレクトリへのアクセス権がないということです。
このめんどくささ、おわかりいただけたでしょうか。
次の仕事でHP作成するときはどのページも全部レスポンシブにします(´;ω;`)
.htaccessと4時間くらい戦ったんですが、見事敗北しました。
どのページにも共通するようなファイルは一括で管理したいと思ったので、他の戦法を考えました。
そんな私の解決策は以下のとおりです。
(前提条件)
・会社HPのトップ、採用情報、企業情報はPC用とスマホ用の2種類のHTMLがある(例: index.htmlとindex-mob.html)
・その他のページはPC用とスマホ用で共通
(やりたいこと)
・トップ、採用情報、企業情報にアクセスしたときに、PC以外からのアクセスだったら、スマホ用のページに自動的に飛ばす
(やったこと)
・PC用HTMLにJavaScriptで呪文を書いた。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>株式会社XXXX</title>
<link rel="stylesheet" href="css/index.css">
<!-- リダイレクト -->
<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) { location.href =
'http://XXX/index-mob.html'; }
</script>
<!-- jQuery読み込み -->
...
参考: リダイレクトだけじゃない!スマートフォンサイトを作ったら設定するべき3つのこと | Web制作会社スタイル
これで無事PC以外でのアクセスでは、スマホ用サイトへ自動的に飛ばすことができました。すごいよ、実装5秒で終わったよ。
JavaScript信者になりました。
勉強頑張ります!
nanoemで初音ミクちゃんを動かしてみたよ
MikuMikuDanceのwikipediaを読んでいたら...
MMDはニコニコ動画で大きな反響を呼び、ソフトウェアの完成度の高さに感動し、金を払って買いたいが作者が金銭を受け取る気が無いため買わせてくれないとして「振り込めない詐欺」とも評された[7][4]。樋口はこうした反響に対し「寄付してもいいと言ってもらえるのはたいへん光栄だが、それほど気に入っていただけたら、ぜひこのソフトを使ってすばらしい動画を作って公開してもらい、私をニコニコさせてほしい」とコメントしている[4]。
作者の樋口さんのコメントがあまりにもかっこよすぎで、これぞまさに理想のハッカーだと思い、プロダクトに触れたいと思ったのがきっかけでした。
諦めきれずググったらこんな記事を発見しました。
MacでもMMDが出来る!?その名も"nanoem"!! - NAVER まとめ
早速DLページヘ...
こんな素晴らしいソフトウェアを作ってくださって、
しまぴょんさんありがとうございます(´;ω;`)
nanoem-macOS-1.11.2.0-beta - BowlRoll
インストールを完了し、アプリを開くとこのような画面が出てきます。
日本語で非常にわかりやすいです。
メニューバーからファイル→読み込み→モデル
を選択し、モデルファイルを読みこめばOKです!
モデルファイルは簡単に言うと、
・動かしたいモデルさん
・モデルさんを動かせたいステージ
の2つを指します。
今回はこちらの2つを用いました。
動かしたいモデルさん: Tda式初音ミク・アペンドVer1.00 - BowlRoll
モデルさんを動かせたいステージ:
【MMDステージ配布】静穏な月夜 WW2【スカイドーム】 / 怪獣対若大将P さんのイラスト - ニコニコ静画 (イラスト)
それぞれDLして解凍します。注意書きも熟読します。
ディレクトリの中にはたくさんのファイルがありますが、拡張子が.pmxのものを選択すればOKです。
そうすると、満月の夜空の下に美しいミクちゃんの姿が現れます!
マウスを適当に動かしたり、適当に色んな物をクリックして、画面に慣れてみてください。ミクちゃんが変になったら(あらぬ方向に曲がったりとか)、1回アプリを終了させて、もう一度読みこめば大丈夫です。私もよくわからず動かしてミクちゃんが曲がってしまい、何度も終了しました(笑)
そしていよいよ、ミクちゃんに好きなポーズになってもらいます。
実は踊らせることも可能です。
ポーズや踊りなどの"動き"のデータは、モデルのデータとはまた別の拡張子なんです。
最近HP作成ばっかりやってるからか、HPに似ているなぁと思いました。
HP作成でいうところの、HTMLファイル, CSSファイルで静的な実装を行い、JSファイルで動きをつける、そんな感じです。
というわけで、ポーズのファイルを読み込みましょう。
【ポーズ配布】いろいろなポーズ / lite さんのイラスト - ニコニコ静画 (イラスト)
今回はこれのB1を利用させて頂きました。.vpdという拡張子のファイルです。
先ほどのスクリーンショット画面左側にある、
▼モデル
・Tda式ミク・アペンド
をクリックして下さい。
そうするとモーション選択ができるようになります。
モーション▶モーションの読み込み
をクリックして、先ほどの.vpdファイルを開きます。
そうすると、ミクちゃんがそのポーズになってくれます!このとき、このポースが確定されていないので、登録ボタンを押すのを忘れないようにして下さい。
そうしたらほぼほぼ完成です!!!!
あとは影を消したり、カメラワークを凝ったり、光源を調整すれば、こんな感じになります。
超楽しいです。
皆さんもぜひ遊んでみてください。
イルカちゃん(MySQL)を愛でるの巻
会社のHP作成もいよいよ終盤で、
お問い合わせフォームの実装までこぎつけました。
先週、お問い合わせフォームのHTML, CSSを書き終えてたので、
今度はお問い合わせ内容を保存するためのデータベースを扱います。
データベースといえばそうです、イルカちゃん(MySQL)です。
ということで、まずはこれで勉強しました。
今までMySQLの事がさっぱりわからなかったのですが、
入門に触れてみて、Terminal上で動かすエクセルだと感じました。
これを見ていただくと、感じた理由がわかると思います。
今回の最終目的であるお問い合わせフォームの実装では、sshで会社HPのサーバーにTerminalからアクセスし、MySQLをサーバーにDLしてあげて、そこでデータベースを作っていけばいいということです。
社長に聞いたら、すでにMySQLはサーバーに入っているということなので、データベース作成から仕事を進められそうです(*^^*)
数日前までそんな感じでしたが、なんのことはない、
MySQLはコマンドラインで動かすエクセルみたいなものでした。
認識が変わると、怖くなくなりました(笑)
これからイルカちゃんを愛でて行きたいと思います。
さて、まだまだコマンドがうる覚えなので、こちらを貼っておきます。
それから本題である、お問い合わせフォームの実装の仕方もドットインストールに載ってたので貼っておきます。
明日もバイト頑張ります!!!!
ちょっとした工夫が全てなんだろうな
どうもMiです。
今週もバイトで唸りながら会社HPリニューアルに勤しんでいます。
ヘッダー、フッダーなど、どのページに行っても同じ部分を微調整をしているときに、パーシャルで管理すればよかったぁああああああ!!!!と心底思いました。
開発の高速化を考えた時に、共通部分は全部同じファイルで管理するのが一番効率がいいということを身をもって体験できて良かったです。
実戦あるのみですね!たくさん失敗を重ねて次に活かします(`・ω・)
それから、ヘッダーのcssをちょっくら改善しました(青い部分)。
header {
background-color: #f6f3f1;
opacity: 0.95;
box-shadow: 0 3px 5px rgba(148, 135, 115, 0.4);
height: 55px;
width: 100%;
position: fixed;
z-index: 1;
display: table;
font-size: 16px;
}
少し透過させて、下に薄っすらと影をいれたらググッと見栄えが良くなりました。
また、aタグのCSSには全て:hoverを入れました。装飾はなんでも良いのですが、やっぱりカーソルが載った瞬間に変化が起こらないとモヤモヤしますよね。実装したら一気にポチポチ押したくなるサイトになったので、これからも:hoverまで気をまわして実装したいと思います。
さらにお問い合わせフォームも作ったのですが、その際にとても有益な記事を見つけたのでシェアさせて頂きます。
よく、性別や年齢を尋ねるお問い合わせフォームを見かけますが、あれ、本当に必要ですか?
このツッコミにグッと来ました。
本当にその機能は必要なのか?
議論に議論を重ねて、最低限必要な機能に注力する。
そういう議論が巻き起こる仕事がしたい><超楽しそう!
というわけで、今日はちょっとした工夫が全てなんだということを学びました。
影をつけたり、透過させたり、:hoverで変化を起こしたり、「そもそもその機能要るのか?」とゼロベースで考え直したり...
良いデザインはちょっとした気遣いと気付きで生まれるものですね。
明日はMySQLと戦います(唐突)。ではでは。