Mi in progress

研究者の道ではなく、エンジニアになることを決意した人のブログ。

ラスボス・文字化けオバケを魔法の呪文で倒した話

今週ようやく会社HP作成が完了しました(*°ω°*)

最後の最後にとんでもないラスボスが現れて、てんてこ舞いに...笑

未来の自分のために、ラスボスとの戦いのここに記録をしておきます。

 

【問題】

・お問い合わせフォームから送ったデータが、MySQL上で文字化け(åがたくさん出てくる)してしまう。

f:id:mi_progress_oOo:20160625000349j:plain

なお、お問い合わせフォームを作り方はドットインストールさんを参考にしました。

お問合せ管理システムを作ろう (全21回) - プログラミングならドットインストール

 

【てこづったこと】

・なにも考えずググッて出てきたものを手当たり次第試したことが失敗でした。肝心な目線が抜けていたのです。それは、今使っているphpMySQLのヴァージョンはいくつなのか?という視点です。会社サーバー内のphpが結構古いヴァージョンだったので、そこが盲点でした。どうやらphpは5.3.6を境に仕様がガラリと変わったみたいですね。

PHP 5.3.6より前のバージョンの PDO MySQL で charset を指定する - Qiita

php 5.3.3とにらめっこしていた私は、見事文字化けオバケの餌食になりました...とほほ。これからはちゃんとヴァージョン確認してググりたいと思います。

 

【魔法の呪文】

ラスボス退治に使った魔法の呪文はこちらに書いてありました。

MySQLで文字化けしたときの対処法 - Qiita

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についてはこちらに書いてあります。

PHP: MySQL (PDO) - Manual

/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にデータが入るようになりました。

f:id:mi_progress_oOo:20160624235805j:plain

大好きな漫画でテスト投稿してみました。

解決してとても嬉しかったです。

引き続きプログラミングの勉強頑張ります(`・ω・)

ゼロから会社の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ファイルを作って、

.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ディレクトリに強制リダイレクトじゃ〜〜〜〜」

スマホ用HTMLさんとCSSさん「NOOOOOO !」

ということだと思います。つまり、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で初音ミクちゃんを動かしてみたよ

MikuMikuDancewikipediaを読んでいたら...

MikuMikuDance - Wikipedia

MMDニコニコ動画で大きな反響を呼び、ソフトウェアの完成度の高さに感動し、金を払って買いたいが作者が金銭を受け取る気が無いため買わせてくれないとして「振り込めない詐欺」とも評された[7][4]。樋口はこうした反響に対し「寄付してもいいと言ってもらえるのはたいへん光栄だが、それほど気に入っていただけたら、ぜひこのソフトを使ってすばらしい動画を作って公開してもらい、私をニコニコさせてほしい」とコメントしている[4]。

作者の樋口さんのコメントがあまりにもかっこよすぎで、これぞまさに理想のハッカーだと思い、プロダクトに触れたいと思ったのがきっかけでした。

 

しかし、残念ながらMMDmacでは使えません。

諦めきれずググったらこんな記事を発見しました。

MacでもMMDが出来る!?その名も"nanoem"!! - NAVER まとめ

早速DLページヘ...

こんな素晴らしいソフトウェアを作ってくださって、

しまぴょんさんありがとうございます(´;ω;`)

nanoem-macOS-1.11.2.0-beta - BowlRoll

 

インストールを完了し、アプリを開くとこのような画面が出てきます。

f:id:mi_progress_oOo:20160614233149p:plain

日本語で非常にわかりやすいです。

メニューバーからファイル→読み込み→モデル

を選択し、モデルファイルを読みこめばOKです!

モデルファイルは簡単に言うと、

・動かしたいモデルさん

・モデルさんを動かせたいステージ

の2つを指します。

 

今回はこちらの2つを用いました。

動かしたいモデルさん: Tda式初音ミク・アペンドVer1.00 - BowlRoll

モデルさんを動かせたいステージ: 

【MMDステージ配布】静穏な月夜 WW2【スカイドーム】 / 怪獣対若大将P さんのイラスト - ニコニコ静画 (イラスト)

それぞれDLして解凍します。注意書きも熟読します。

ディレクトリの中にはたくさんのファイルがありますが、拡張子が.pmxのものを選択すればOKです。

f:id:mi_progress_oOo:20160614233909p:plain

そうすると、満月の夜空の下に美しいミクちゃんの姿が現れます!

マウスを適当に動かしたり、適当に色んな物をクリックして、画面に慣れてみてください。ミクちゃんが変になったら(あらぬ方向に曲がったりとか)、1回アプリを終了させて、もう一度読みこめば大丈夫です。私もよくわからず動かしてミクちゃんが曲がってしまい、何度も終了しました(笑)

 

そしていよいよ、ミクちゃんに好きなポーズになってもらいます。

実は踊らせることも可能です。

ポーズや踊りなどの"動き"のデータは、モデルのデータとはまた別の拡張子なんです。

最近HP作成ばっかりやってるからか、HPに似ているなぁと思いました。

HP作成でいうところの、HTMLファイル, CSSファイルで静的な実装を行い、JSファイルで動きをつける、そんな感じです。

 

というわけで、ポーズのファイルを読み込みましょう。

【ポーズ配布】いろいろなポーズ / lite さんのイラスト - ニコニコ静画 (イラスト)

今回はこれのB1を利用させて頂きました。.vpdという拡張子のファイルです。

 

先ほどのスクリーンショット画面左側にある、

▼モデル

 ・Tda式ミク・アペンド

をクリックして下さい。

f:id:mi_progress_oOo:20160614234746p:plain

 

そうするとモーション選択ができるようになります。

モーション▶モーションの読み込み

をクリックして、先ほどの.vpdファイルを開きます。

そうすると、ミクちゃんがそのポーズになってくれます!このとき、このポースが確定されていないので、登録ボタンを押すのを忘れないようにして下さい。

そうしたらほぼほぼ完成です!!!!

 

あとは影を消したり、カメラワークを凝ったり、光源を調整すれば、こんな感じになります。

f:id:mi_progress_oOo:20160614235159p:plain

超楽しいです。

皆さんもぜひ遊んでみてください。

イルカちゃん(MySQL)を愛でるの巻

会社のHP作成もいよいよ終盤で、

お問い合わせフォームの実装までこぎつけました。

先週、お問い合わせフォームのHTML, CSSを書き終えてたので、

今度はお問い合わせ内容を保存するためのデータベースを扱います。

 

データベースといえばそうです、イルカちゃん(MySQL)です。

ということで、まずはこれで勉強しました。

dotinstall.com

 

今までMySQLの事がさっぱりわからなかったのですが、

入門に触れてみて、Terminal上で動かすエクセルだと感じました。

#02 データベース用語について | MySQL入門

これを見ていただくと、感じた理由がわかると思います。

 

今回の最終目的であるお問い合わせフォームの実装では、sshで会社HPのサーバーにTerminalからアクセスし、MySQLをサーバーにDLしてあげて、そこでデータベースを作っていけばいいということです。

社長に聞いたら、すでにMySQLはサーバーに入っているということなので、データベース作成から仕事を進められそうです(*^^*)

 

MySQLってなに、プログラミング言語?なんなの?

数日前までそんな感じでしたが、なんのことはない、

MySQLコマンドラインで動かすエクセルみたいなものでした。

認識が変わると、怖くなくなりました(笑)

これからイルカちゃんを愛でて行きたいと思います。

 

さて、まだまだコマンドがうる覚えなので、こちらを貼っておきます。

Mysqlコマンド - Qiita

 

それから本題である、お問い合わせフォームの実装の仕方もドットインストールに載ってたので貼っておきます。

dotinstall.com

 

明日もバイト頑張ります!!!!

 

ちょっとした工夫が全てなんだろうな

どうも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まで気をまわして実装したいと思います。

 

さらにお問い合わせフォームも作ったのですが、その際にとても有益な記事を見つけたのでシェアさせて頂きます。

websae.net

よく、性別や年齢を尋ねるお問い合わせフォームを見かけますが、あれ、本当に必要ですか?

このツッコミにグッと来ました。

本当にその機能は必要なのか?

議論に議論を重ねて、最低限必要な機能に注力する。

そういう議論が巻き起こる仕事がしたい><超楽しそう!

 

というわけで、今日はちょっとした工夫が全てなんだということを学びました。

影をつけたり、透過させたり、:hoverで変化を起こしたり、「そもそもその機能要るのか?」とゼロベースで考え直したり...

良いデザインはちょっとした気遣いと気付きで生まれるものですね。

 

 

明日はMySQLと戦います(唐突)。ではでは。

三本線のアイツ

ハンバーガーナビゲーションの実装ができるようになったので、学びの整理。

(1) 概要

会社HPのスマホ用サイトを構築するべく、画面の隅っこに必ずいる三本線のアイツ、ハンバーガーナビゲーションの実装を行うことにしました!

(2) ハンバーガーナビゲーションアイコンをHTMLとCSSで自作する

まず最初に悩んだのが、ハンバーガーアイコンを画像として貼り付けるか、CSSを用いてアイコンを自作するかということ。ググってみると、CSSで自作すれば、ハンバーガーから×に変化させるアニメーションを実装できることがわかったので、自作することにしました。以下参考にさせて頂いたページです。

www.nxworld.net

こちらの1番を用いました。

余談ですが自作にあたって一番驚いたのが、ハンバーガーナビゲーション部分のHTMLファイルが

HTML

<a class="menu-trigger" href="#">

<span></span>

<span></span>

<span></span>

</a>

こんなに簡単な記述だということでした。spanの空タグとは予想外。 

(3) クリックするとハンバーガーが×になるアニメーションを実装する

続いて、アニメーションの実装を行いました。

CSS (一部のみ)

.menu-trigger.active-btn span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-45deg);
/*transform: translateY(20px) rotate(-45px);*/
}

JS

$(function( ){
   $('.menu-trigger').on('click', function( ) {
   $(this).toggleClass('active-btn');
return false;
});
});

起こしたい変化(今回はハンバーガーから×になること)にクラス名をつけて、それをjsファイルで「クリックしたらそのクラスが追加されるよ」と書けばいいだけなんですね...

HTMLファイルは全くいじらないということに驚きました。

(4) ハンバーガーをクリックしたら、メニューも出てくるようにしたい

続いて、ハンバーガーをクリックしたら、メニューも出てくるようにするために、メニューを実装しました。まずはそのビュー部分から。

HTML

<div id="menu-bar-item">
 <ul>
  <li><a href="#section1">ニュース</a></li>
  <li><a href="#section2">事業内容</a></li>
  <li><a href="#section3">実績紹介</a></li>
  <li><a href="#section4">VISION</a></li>
  <li><a href="#section5">CONTACT</a></li>
</ul>
</div>

CSS

#menu-bar-item {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: right;
  margin-top: 0px;
  width: 360px;
  margin: 0 auto;
}

#menu-bar-item li {
  padding: 16px;
}

#menu-bar-item li:not(:last-child) {
  border-bottom: 1px solid white;
}

#menu-bar-item a {
  color: white;
}

#menu-bar-item a:hover {
  color: pink;
}

ポイントはモーダル実装でお馴染みの、初期値はdisplay: none;にすることです。

続いて、起こしたい変化にクラス名をつけてその中身を実装していきます。そのときに参考にさせて頂いたのかこちらの記事です。

qiita.com

これを元に書いたCSS、JSがこちら。

HTML

#menu-bar-item.active-btn {
  display: block;
  opacity: 1;
  animation-duration: 0.5s;
  animation-name: fade-in;
  -moz-animation-duration: 0.5s;
  -moz-animation-name: fade-in;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: fade-in;
}

@keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-moz-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

@-webkit-keyframes fade-in {
0% {
  display: none;
  opacity: 0;
}

20% {
  display: block;
  opacity: 0.5;
}

100% {
  display: block;
  opacity: 1;
}
}

JS

$(function( ){
  $('.menu-trigger').on('click',
  function( ){
  $(this).toggleClass('active-btn');
  $('#menu-bar-item').toggleClass('active-btn');
return false;
});
});

今回の実装一番の学びが、クリック1つで2つのイベントを起こしたいときに、2つ連ねて書けばOKだということでした。

というわけで、無事、ハンバーガー完成です(`・ω・)b

 

 

今日の反省

今日は会社のHP作成の続きを行っていました。

レスポンシブデザインにしようと画策していたのですが、

中々うまくいかないので、PC用とスマホ用で別々のHPを作る事にしました。

 

スマホ版のHPといえば、ハンバーガーナビゲーション!

ということで、ハンバーガー作りにチャレンジしたものの、参考にしたサンプルコードの解読ができず、今日は断念して、他の部分のコーディングを行いました。

 

悔しいです(T^T)

まだまだHTML CSSマスターへの道は長い!

一歩一歩進みます(`・ω・)b

今出来なくてもきっと何度も見たり読んだり書いたりしてれば、上達しますから!

 

【今日の学び】

・最後の1つだけ除く、というオプションの付け方を学びました。

条件に外れた場合だけ装飾するCSS3「:not()」の使い方 [ホームページ作成] All About