PHP①「Hello PHP」、入力フォーム作成
今月はPHPの勉強に勤しみました。その中で、いくつかピックアップして掲載していきたいと思います。
XAMPPの入手
まずは、PHPを実行可能とするWebサーバソフト「XAMPP」をダウンロードします。一通りインストールが終わったら、「Apache」を起動します。
無事起動することができました。ここから、PHPのプログラムを作っていきます。
「Hello PHP」
まずは基本中の基本から。
上記のプログラムを「1.php」として「C:\xampp\htdocs」内に保存します。ここから、Webブラウザを起動して実行すると・・・
無事表示されました。続いて、入力フォームを作成します。
入力フォームの作成
まずは入力フォームを作るためhtmlを記述していきます。
上記コード内にある「2.php」は以下の通りです。
これをブラウザ上で実行すると、
このように名前を入力するフォームと送信ボタンが出現するため、名前を入力して送信してみます。
実行結果はこの通り。しかし、まだこのコードには問題点があります。
例えばこのように、「<shika」という名前を入力して送信すると・・・
名前が表示されないようになってしまいました。原因は「<」。このほかに「>」、「&」、「"」など「HTMLエスケープ(エンコード)」が必要な文字がそのまま使用されている場合には前述のような不具合が起こってしまうので、コードを以下のように書き換えます。
上記のように「htmlspecialchars関数」を用いてコードを修正。先ほどと同じようにこのコードを実行すると・・・
そのまま名前が表示されるようになりました。
次回も、引き続きPHPでのプログラムを組んでいきます。
参考
ちゃんと使える力を身につける Webとプログラミングのきほんのきほん
- 作者: 大澤文孝
- 出版社/メーカー: マイナビ
- 発売日: 2015/02/19
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
アイデア分析④
前回に引き続き、仮想のサービス案についてアイデア分析を行う。今月は、上田拓治『マーケティングリサーチの論理と技法〔第4版〕』(日本評論社、2016年〔初版:1999年〕)を参考にする。
サービス案
サービス名:「30s」(仮)
形態:スマートフォンアプリ、Webサイト
料金:無料(一部有料)内容:アーティスト側に曲、または動画の「聴いてほしいところ」の30秒を切り取ってもらい公開する。アーティスト側にとっては一番聴いてほしい部分を手軽に伝えることができ、リスナー側にとっては自分で飛ばす手間なく聴きたい部分を手軽に聴けるという「いいとこどり」のメリットがある。
どのような調査が可能(適切)か
今回は、上記サービス案に対してどのような調査が適切であり、可能であるかを探ってゆく。それに当たり、前回挙げた「9つの質問」を今一度振り返っておきたい。
9つの質問
Q.1 「30s」にご満足いただけたでしょうか？また、その理由をお教えください。
Q.2 最もご満足いただいた点は何ですか？また、その理由をお教えください。
Q.3 最もご不満だった点は何ですか？また、その理由をお教えください。
Q.4 音楽試聴アプリ・サイトについて、どのような印象を抱いていましたか？
Q.5 「30s」をご利用いただいた一番の理由をお教えください。
Q.6 「30s」をご利用いただく時、またはその以前に他の音楽試聴サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。
Q.7 「30s」をご利用いただく時、またはその以前に音楽ストリーミング配信サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。
Q.8 「30s」をどこでお知りになりましたか？
Q.9 誰かに「30s」をオススメする可能性は何点でしょうか？(0~10点で評価)
プリコード回答
上記の9つの質問は基本的に「自由回答方式」を推奨しているため、ここでは「プリコード回答を用いて回答者(ユーザー)の本音をより引き出すためにはどうすれば良いか」ということについて考える。
(1)二分法:「はい」か「いいえ」いずれかで答えてもらうもの・・・〇
→9つの質問の中ではQ.1、Q.6、Q.7に当てはまる。ここでの回答に因って後の質問への回答も各々異なってくるため、ユーザーに対する調査の最初のアプローチとしては欠かせないものであろう。
(2)指示に従い、当てはまる回答カテゴリを1つまたは複数選択してもらうもの
①SA(Single Answer):1つだけ選択・・・×
→上記質問中には無いものであるが、回答者の自由でありのままな意見を引き出すためにも複数選択にすべきではないだろうか。
②MA(Multiple Answer):複数選択(制限なし)・・・△
→制限が存在しないためSAよりもより自由な回答は得られると考えられるが、あまりにも多くの回答を得た場合アフター・コーディング作業を含めたアウトプットに時間がかかってしまう。効率化を求めるためにも、複数選択とはいえ制限を設けても良いのではないだろうか。
③LA(Limited Answer):数を制限して複数選択・・・〇
→「最も近いものを3つまで選択してください」等、数の制限を設けることでMAよりも自由度は下がるものの、ある一定の自由度を保ちつつ回答者がより考え抜いて出した回答を得ることができる。
④「態度評定尺度」:回答者の意見や態度を測定するための尺度・・・〇
→9つの質問にもいくつか取り入れられている。プリコード回答の中では比較的自由度が高く、また手軽に自分の意見を取り入れやすい回答方式であると考える。しかし、この「態度評定尺度」による質問が続け様に為されると回答者への負担がかかり本音を引き出せない回答(適当に選んだ回答等)が得られることになる可能性もあり得る。そのため、全体のバランスを考えながらこの質問方式を用いていくべきであると考える。
また、「態度評定尺度」を用いた質問の中でも「強制選択尺度」(「どちらともいえない」という選択肢の排除)はかなり慎重に用いるべきであると考える。「どちらともいえない」という回答自体曖昧なものであるが、何より回答者が選びやすいものでもある。回答者の自然な心理状態を保つためにも、「どちらともいえない」という拠り所を排除するのはあまり好ましくないと言えよう。
自由回答方式
これに関しては、読んで字の如く最も回答者の意見を自由に引き出せるものであろうが、やはりどうしても文章が理路整然としてしまったり、ないしは文章を短く済ませようとするなど本音から遠ざかる可能性は捨てきれない。回答欄は短すぎず長すぎず、バランスの良いものを設けるのが適切であろう。
質問
以上から、改めて「30s」ユーザーに対する質問を考える。
Q.1 「30s」にご満足いただけたでしょうか？
①「はい」 ②「いいえ」
Q.2 Q.1で①「はい」とお答えいただいた方へ質問です。ご満足いただけた点は何ですか？最も近いものを以下の選択肢から3つ選んでください。また、その理由をお教えください。(LA選択肢及び5行程度の自由回答欄)
Q.3 Q.1で ②「いいえ」とお答えいただいた方へ質問です。ご不満だった点は何ですか？最も近いものを以下の選択肢から3つ選んでください。また、その理由をお教えください。(LA選択肢及び5行程度の自由回答欄)
Q.4 音楽試聴アプリ・サイトについて、どのような印象を抱いていましたか？
非常に便利―便利―どちらでもない―不便―非常に不便
Q.5 「30s」をご利用いただいた一番の理由をお教えください。(5~10行の自由回答欄)
Q.6 「30s」をご利用いただく以前に他の音楽試聴サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。(MA競合サービス選択肢及び5行程度の自由回答欄)
Q.7 「30s」をご利用いただく時、またはその以前に音楽サービスも検討(利用)されましたか？よろしければサービス名等と、その理由をお教えください。(MA同一カテゴリ代表サービス選択肢及び5行程度の自由回答欄)
Q.8 「30s」をどこでお知りになりましたか？(MA選択肢)
Q.9 誰かに「30s」をオススメする可能性はどれくらいでしょうか？
非常に薦めたい―薦めたい―どちらでもない―薦めたくない―絶対に薦めたくない
おわりに
先月読了した『9つの質問』の解釈と、今月読了した『マーケティングリサーチの論理と技法』ではまた細かいところで解釈が異なっており読んでいて興味深かった。今回改めて質問を練り直し、Q.8の「顧客接点」質問を敢えて自由回答方式ではなくMA選択肢式にしたのは、ある程度接点(選択肢)を絞ることができることに加え、それまでの設問で「自由回答方式」が多くなりすぎていたためである。
以前の9つの質問よりも自由回答方式は最低限にまで抑えた状態になっているため、全体のバランスを取るためにも一部改変を行った。ユーザーの「本音」を引き出すというのは非常に難しい課題であるが、全体の設問のバランスを考えるというのもユーザーの心理状態を平静に保つ上では重要なことであろうと考える。
参考
HP制作②
先月に引き続き、架空のカフェのHPを作っていきます。前回はHTMLを書いて終わっていましたが、今回はCSSを用いて全体のデザインを整えました。
TOPページ
前回からの変更点としては、全ページに共通することとしては
・Illustratorを用いたロゴマークの作製・配置
・背景色の設定
・メニューを横並びにして体裁を整える
といったところが主なものです。
TOPページに関しては、主にキービジュアルをフレームで装飾しました。
コーヒーの画像にツタのフレームを直接重ねて画像化したものになりますが、後にcssを用いて二つの画像を重ねることも試みました。「position:relative」、「position:absolute」を用いるものでしたが実際に重ねた画像を中央寄せしようとすると一筋縄ではいかず少々苦労しました。結果、paddingとmarginの微調整で事なきを得ましたがこの辺りはもう少し深く探ってみたいと思います。
ABOUTページ
カフェの概要を記した「ABOUT」ページです。「CAFE CERVAについて」部分はfloat機能で写真の右側に説明文を回り込ませた形になります。
また、「店舗情報」部分はtableを利用して表を作りました。当初、表を横幅いっぱいに広げた際に項目名部分(th)が縦に伸び表の比率がおかしなことになって困っていたのですが、「 width: auto;」、「white-space: nowrap;」を加えることで上記画像のように落ち着きました。
MENUページ
季節のおすすめメニューを掲載する「MENU」頁です。こちらもtableとfloatを利用して画像を回り込ませる形になっています。左側のメニューをクリックすることで、
各メニューに応じた写真の拡大図と説明文が右側に表示されるようになっています。
CONTACTページ
問い合わせフォームを設けたページです。送信ボタンを押してもとりわけ反応は無いのですが、この送信後の結果やHP公開の実装については来月取り掛かりたいと思っています。また、全体的にもう少しデザインを改善できる部分が無いか考えたいと思います。
参考、素材をお借りしたサイト
①
②
読了:大澤文孝『Webとプログラミングのきほんのきほん』(マイナビ出版、2016年〔初版:2015年〕)
大澤文孝『Webとプログラミングのきほんのきほん』(マイナビ出版、2016年〔初版:2015年〕)を読了した。WebブラウザにおいてWebページが表示される仕組み(HTML、CSS、JavaScript等)から実際にWebプログラミングを行うまでの過程が至極丁寧に解説されている本であった。Webプログラミング初心者にとってもかなり理解しやすい内容なのでは、と思う。
先月までに読了してきた本においてはHTML、CSS、JavaScriptをさらってきたが、今回はPHPも加わりより詳しい内容を学ぶことができた。PHPを書いていく上での「XAMPP」の入手・インストールまで事細かに解説されており、スムーズに導入を行うことができたように思う。
PHP自体の解説は飽くまで基本中の基本といったところであるため浅いところをさらっていく感覚ではあるが、PHPというものを学ぶ上においては非常に分かりやすく、またそこからHTML、CSS、JavaScriptとWebサイトを作っていく過程までが非常にスムーズに進んでゆく。
最終的にはデータベースを使ったプログラミング(SQL)も解説されているため、タイトルの通りWebプログラミングの基本を満遍なく学べるものなのでは、と思う。今月はPHPを学び、HP制作にも本腰を入れていく予定であるためこちらを大いに活用していきたいと考えている。
ちゃんと使える力を身につける Webとプログラミングのきほんのきほん
- 作者: 大澤文孝
- 出版社/メーカー: マイナビ
- 発売日: 2015/02/19
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
読了:上田拓治『マーケティングリサーチの論理と技法〔第4版〕』(日本評論社、2016年〔初版:1999年〕)
上田拓治『マーケティングリサーチの論理と技法〔第4版〕』(日本評論社、2016年〔初版:1999年〕)を読了した。
マーケティングリサーチについての知識が網羅されており、非常に情報量の多い本であった。今までこの分野を勉強したことはなく、専門用語も多く出て来たため勉強になる反面理解に時間がかかる場面も多かった。以下、とりわけ気になった点を取り上げたいと思う。
1.マーケティングリサーチの新しい波
「マーケティングリサーチ」という分野において、近年の調査状況の変化は以下の通りである。
①生活者サイドの変化
・他記式→自記式・・・誰にも束縛されず自由に自分の意見を述べたいという欲求
・セールス等、訪問調査・・・調査への拒否や不在の増加
・インターネット利用者の増加・・・インターネット(Web)調査における良好な環境
②クライアント・サイドの変化
競争の激化・・・意思決定の迅速化、調査コストの低下を求められる
→「早い、安い」を最大の特徴とするインターネット調査に合致
③調査会社サイドの変化
・企業間競争の激化・・・定性調査の活用
・ICT技術の進化・・・自由回答やチャート、レポート等の自動処理が可能に
これら3つに共通して言えるのは、インターネット調査が多く活用されるようになっているということである。それは単にインターネットの進化や利用者増加のみを理由とするのではなく、「迅速」「低コスト」といったメリットを孕んでいる。
ここで、「①生活者サイドの変化」における「自記式」に注目したい。
2.自由回答質問
筆者は、自由回答質問について以下の長所・短所を挙げている。
【長所】
①特定のテーマに関する多種多様な回答
②調査対象者の生の声
③想定外の意見を得られることがある
④回答量が多い→プリコード回答よりも深い分析が可能
⑤調査対象者が本当に表現したい回答が得られる
→プリコード回答においては、自分の意見に近いと思われる回答カテゴリを選択するだけ
⑥プリコード回答欄を用意する時間・情報が無い時の次策
【短所】
①プローピング質問の方式により回答の質と量が変化
②回答量について個人差が大きい
→回答量の多い人に調査結果が偏る
③留置き調査では回答を作文するため表現が理路整然となりやすい
→本音から遠ざかる可能性
④プリコード回答に比べ時間がかかる
⑤留置き調査では記入欄が狭いと回答量が限られてしまう
⑥留置き調査では回答をなるべく短く書こうとする人が存在する
⑦電話調査では会話のスピードが速い
→正しく記録できない可能性
⑧自由回答のアフター・コーディング作業には時間がかかる
⑨アフター・コーディング作業でのコーディング・ミス
先月読了した橋本哲児『顧客の「本音」が分かる9つの質問』(秀和システム、2015年〔初版:2014年〕)においても指摘されていたことだが、プリコード回答にはデメリットが存在する。
上田にしろ橋本にしろ、両者が指摘しているのはプリコード回答においては「回答者の自由度が下がる(本当に表現したいことが限られてしまう)」という点である。その一方で、自由回答方式のメリットはやはりプリコード回答よりも自由な表現ができ、深い分析が可能ということである。
しかし今回本書を読んだことで、自由回答方式にもある程度のデメリットが存在することを学んだ。自由度が高いだけに、回答者側の時間が多く取られ回答を短くしようとする、文章化を意識して本音が隠れていまうといったリスクはある。また、アフター・コーディングにも時間がかかってしまう。
プリコード回答、自由回答の両者ともにメリット・デメリットは存在するが、そのバランスを考えて調査に当たるべきであると強く感じた。とりわけ、「回答者の本音を探りたい」という場合には自由回答方式において質問形式に気を付けつつ調査を行うのが良いのではないかと考える。
3.インターネット調査
「紙とペン」調査の限界
前述のように、インターネットが普及し始めると従来の「紙とペン」型の調査は限界を迎えるようになった。インターネットの使用とそれを介したコミュニケーションが拡大すると、インターネットが広告媒体の1つとして考えられるようになる。
1996年にインターネット調査が始まったが、当初の主流はオープン型であった。その後多様なニーズに対応するため、インターネット調査はオープン型からクローズ型へとシフトし、現在に至る。
インターネット調査は「迅速性」、「安価性」においては優れた手法として認知されてきた反面、従来型調査が目指した「標本の代表性」、「データの品質」に関わる領域については批判が生まれるようになった。
インターネット調査の将来展望
日本のインターネット調査の売上シェアは世界の4位に位置しており、安定期に入りつつあると言える。Web調査に関しては、「公募型」と「確率型」を調査テーマや機会によって使い分けることが最善であると考えられる。しかし、安定した回収率を確保するために確率型Web調査の長所をクライアントに充分理解してもらうことが大切である。
また、動画を提示して質問する方式はインターネット調査において非常に大きな利点であり、今後その利用度は一段と高まっていくものと思われる。
これまでインターネット調査は定量調査が主とされてきたが、最近は定性調査のニーズが高まってきている。これはクライアントが生の声を真に導き出す要因を望んでいるものと思われてる。
また、携帯電話(スマートフォン)を利用したいわゆるモバイル・リサーチはユビキタス社会での必須の情報収集ツールである。その特徴は、いつでもどこでもリアルタイムで情報収集し送受信できる。デメリットとしては、長文の入力に向かないこと、質問数・回答欄の選択肢の限界、画面の大きさ等様々な制約がある。また、キャリアごとに規格が異なるため時間とコストがかかる。
しかし、モバイル・リサーチはPC離れをした若者への調査としては欠かせず、GPS機能の活用など携帯電話ならではのメリットがある。モバイル・リサーチにはまだデータ品質や代表性の問題等残された課題は多いが、今後の新しい調査モードとして期待は大きい。
4.おわりに
マーケティングリサーチについて最新の情報が網羅された本であった。とりわけ、インターネット(Web)調査についての動向がよく勉強できた。しかし、前述の通り情報量が非常に多くなかなか理解が難しかった。マーケティングリサーチについては、これからの活用法を見極めつつより深い勉強を心がけたい。
Photoshop③ 料理写真をおいしく見せる
今回は、HPに使う料理写真をおいしく見せられるような加工を施していきたいと思います。
1.クレープをおいしく加工
元画像がこちら。これをよりおいしく見えるよう加工していきます。
トーンカーブを調整し、色調補正します。
続いて、「特定色域の選択」でレッド系を選び、いちごの赤やクレープ生地の色が映えるよう調整していきます。
クレープが載った皿以外の背景を選択し、トーンカーブで明るさや色調を調整していきます。
背景にぼかしを加え、最後に全体的な色調を改めて調整して完成です。
2.カフェラテをおいしく加工
元画像はこちら。これだけでも充分良い写真なのですが、写真全体に温かみを加えたいと思います。
先ほどと同様、トーンカーブと特定色域の選択ツールを用いて写真の色調を調整していきます。
続いて、「レンズフィルター」を用いて写真全体に暖色系のフィルターをかけ、温かみを増します。
こちらもクレープの時と同様、カフェラテ以外の背景を選択しトーンカーブにて色調調整を行います。
続いて、カフェラテのアート部分のみを選択し「アンチシャープ」のフィルターをかけます。次は湯気を合成・・・といきたいところなのですが、チュートリアル通りにいけばAdobe Stockの素材を用いることになっていました。しかしこちらに加入していないため・・・今回はこちらのサイトを参考に湯気を自分で作っていきます。
新規レイヤー作成→「スクリーン」選択→「フィルター」→「描写」→「雲模様1」という流れなのですが、初っ端から全体がもくもくになってびっくりしました。さながら銭湯のよう。これでは曇りすぎなので、カフェラテ付近のみに湯気をかけることにします。
まずは湯気のフィルターを湯気っぽく「波打たせる」ために、「フィルター」→「変形」→「波形」の順に湯気に流れを作ります。
仕上げに取り掛かります。まずはカフェラテ上部をなげなわツールで適当に選択。この時、最終的に湯気が自然な形となるよう境界線のぼかしを設定します(今回は20px)。「マスクを追加」をクリックし、選択部分だけに湯気が残るようにします。
湯気(レイヤーマスク)の不透明度を調整し、最後に全体の色調を改めて調整して完成です。
3.おわりに
Photoshopは機能が揃いすぎているぐらい揃っていてなかなか使いこなせない部分も多いのですが、今回は写真加工の機能を多く使えたかなと思います。特にフィルターとレイヤーマスクの活用はやっていて面白かったです。トーンレベルや色調補正に関してはもう少しスムーズに使いこなせたら、と思います。まだまだ勉強しなくては・・・
HP制作①
今月から、HP制作に取り掛かります。先日記事にて作ったワイヤーフレームを元に、架空のカフェのホームページを作っていきます。今月は、HTMLを用いて制作を行います。
まずはこちらがTOPページのコード。キービジュアルの下に「NEWS」を表示します。
こちらがキービジュアル。この下に・・・
いくつかのニュースを表示します。
続いて、「ABOUT」ページのコード。店舗紹介を載せると共に、テーブルを用いて店舗情報を掲載します。
こちらが実際のページ。店舗紹介の文章レイアウトは、のちにCSSを用いて整えていきます。
こちらは「MENU」ページのコード。基礎となるのはこのファイル(menu.html)ですが、選んだメニューを大きく表示できるようにするため各メニューを表示するためのファイルを複製(menu1.html、menu2.html、menu3.html)していきます。
こちらが実際の表示になります。各メニューの写真をクリックすると上部に大きく表示されるようになっていますが、こちらものちにCSSを用いてレイアウトを整えていきます。
今回は主にHTMLを用いてサイトを作りましたが、これだけではまだまだ見苦しい点も足りない点も多すぎるため来月はCSSを用いてよりレイアウトやデザインを整えていきたいと思います。
参考
