コードノート

コードノートはwebを中心にテクノロジー・クリエイティブを伝えるWebメディアです。コードリンク代表、片岡亮が執筆しています。

今のインターネット空間はフラットなのか。AbemaTVとかニコニコ動画のお話。

f:id:moba13:20171106125847j:plain

先日からAbemaTVでやっていた元SMAPの3名が出演する、72時間ホンネテレビ内の企画で、Twitterの世界トレンド1位を目指すというものが達成されて本当に凄いですね。

通信と放送の融合という一つの時代の切り替わりとしてニュースでも多く取り上げられいくことでしょう。

そしてこのTwitterで世界トレンド1位を取った現象を「まさにインターネット的だ!」みたいに言う方々がちょいちょいいるいのですが、僕としてはこれは「インターネット」という文脈には当てはまらないんだよなーっていうのが今回の記事の内容です。

「インターネット的」とは何か

たぶん、この現象をインターネット的という人は、番組提供側と視聴者が双方向にやりとりをしてバズを起こす、というのがインターネット的だと捉えているんだと思います。

僕もリアルタイムに双方向にやり取りをできるのはインターネットの特徴だと思いますが、それはただの一つの前提としての環境だと捕らえています。

それよりも大事に感じているのが、その双方にいる人と人との関係性です。それがタイトルにも書いた「フラット」というもの。

僕の中のインターネット的というのは、リアルタイムに人と人とが双方向かつ、フラットな関係性でコミュニケーションを取れるということです。

そんな中で今回のニュースというのは、双方向にやり取りはしているけど、有名人がファンに向けて○○ってツイートしよう!と呼びかける超上下関係があるもので、なんらフラットで無いじゃん、と思っているのです。

別にそれはなんら悪いことでなく、今のYoutuber文化なども動画投稿者とファン、という上下関係があるものだし、AbemaTVに限らず最近のインターネット文化ってそういうカンジだよね、という認識でいます。

フラットな関係性と匿名性

この話って、時より話題にあがる、インターネットで匿名でコミュニケーションを取るのはどうなんだ議論に繋がるものがあります。

匿名が良い人がそう思う理由は、匿名だから好き勝手悪口言っても大丈夫!ということではありません。(そんな人も一部いるだろうけど。)

匿名の良さというのは、社会的な肩書きや年齢、容姿などに縛られずに、多くの人とフラットな関係値で仲良く話すことができる、ということに魅力があるわけです。

でも、最近のインターネットサービスは段々と匿名性が薄れ、ユーザー同士の関係もフラットでなく上下関係が目立ってきています。それはなぜでしょうか。

ユーザーは上下関係がある方が楽

まず上下関係というと、下の人が損をするように捕らえられるかもしれませんが、場の構築においては下にいる人の方が圧倒的に楽です。

上下と書くとややこしいかもしれませんが、生産者と消費者と言い換えるとわかりやすいかもしれません。

これまでのインターネット的なメディアというと、掲示板やTwitterなど、参加者全員が生産者であり消費者である、というのが主流でした。

つまり全員が、テキスト投稿ないし画像投稿ないしで、自分も消費者である前に生産者である、というのもフラットなメディアの特徴なのです。

しかし、インターネットも利用者が増え自分が何かを生産しなくても、誰かが先に作ってくれているという状態が当たり前になってくると、ただ消費するだけなユーザーがだいぶ増えてきました。

何かを作るって結局面倒くさいですからね。

そこでwebサービスを作る会社は、Twitterのように140文字だけで良いよ、とかInstagramのように写真投稿だけでも良いよ、と生産コストが低くても場が成り立つような仕組みを頑張って作ってきました。

それでもユーザーはインスタ疲れしているぐらいですから、「イイネ!」を押すのが精一杯な生産行為という人も増えてきているのでないでしょうか。

そうやって自分もその場で何か生み出すよりも、何もしないで上の人が作ったものを消費する方が圧倒的に楽です。さらにインターネットの成熟に伴ってそれでも一時的には成り立つようになってきました。

でもそんな場も全員が生産せず、ただ消費するのが当たり前になってくると当然崩壊してしまいます。

そんな中で日本のwebサービス会社の多くがやっていることは、ユーザーの生産を促進することでありません。

有名人の起用や、ネットですでにある程度名が売れている人をピックアップしていくことを始めました。それはなぜでしょうか。

上下関係がある場のほうが収益を上げやすい

それは、フラットなコミュニティ内では金銭のやり取りが発生しにくい、という点に大きな要因があります。

基本的にお金というのは、その場にいる人達の上下関係が広ければ広いほど、多くやり取りされます。アーティストやアイドルとそのファンの間には上下関係がありますし、先生と生徒の間にも上下関係が存在します。だからお金を払います。

下の人は上の人と距離が離れていればいるほど、その距離を埋めるためにお金というアイテムを利用するわけです。

だから、例えばTwitterで有益なやり取りが出来たらお互い知識の等価交換ができているわけで、そこにお金のやり取りは発生しません。互いに生産者で提供する価値同士が相殺され満足できるからです。

でも例えば、アイドルとファンみたいな生産者と消費者という場になると、消費者は生産者に対して渡すものがないので、代わりにお金を支払うことになります。

なんだかすごく当たり前の話をしていますが、場を提供する側としては、その場がフラットで金銭のやり取りが発生しない場なのか、上下関係があり金銭やり取りのある場なのかはとても重要な事項です。

なぜなら場を提供する人達は、その場への参加費用や、その場でやり取りされる金銭に手数料をかけることで収益を得るからです。

ネットサービスなら直接金銭が発生しなくとも、人がたくさん集まれば広告収益で売り上がるんじゃ?とも思われていそうですが、Twitterですらしっかりとした広告収益の体勢は整えられていません。

広告だけじゃ採算が合わないなら、その場で直接金銭発生させる仕組みが必要で、そのためにはユーザー同士の関係をフラットにするのでなく、上下関係をつけた方が良いんですよね。

上下関係を作って収益を上げるというのは、ネット限らずなことですが、古い感覚だよなーと思いつつ、みんな結局それ好きねってかんじです。

ニコニコ動画もフラットな場では無い側面が大きくなりつつある

日本において、フラットなネットコミュニティ空間として有名なサービスにニコニコ動画があります。

動画を投稿するほどのスキルがない人でも、コメントで動画にツッコミをいれることで、そのコメントもコンテンツの一部となり自分も生産者になれる素敵文化ですね。

しかし、そんなニコニコ動画も数年前から、公式生放送やニコニコ超会議といったリアルイベントで有名人を起用したり、一部の有名動画投稿者をピックアップし有料のチャンネル会員制度(ファンクラブみたいなもの)を整えるなど、これまで書いてきたような上下関係を生み出す形へシフトしていました。

それは、そうした方が収益が上げやすいからでしょう。

ニコニコ動画というと、最近プレミアム会員数が減少したということでニュースになりましたが、この有料チャンネル会員制度からの収益も考えれば売上は伸びているのでないかと思います。決算書見てないので知らないですけど。

この選択は、短期的な収益を出すという点では正しいのかと思います。しかし、それはフラットな場を形成した恩寵を焼き畑農業的にしているとも捕らえることができます。

実際問題、最近新たな有名投稿者がニコニコ動画では生まれてるとは言えず、Youtubeに若い動画投稿者が流れ、既存メディアの有名人をAbemaに取られているニコニコ動画がどんな一手を打つのかは注目していきたいですね。

それでもフラット文化は美しい

つまるところ、商売を考えると「フラット」というのは成り立っていないのです。それでも前々からインターネットをやっていた人達はその文化を美しいと思っているのではないでしょうか。

先のニコニコ動画の有名動画投稿者であり、今はアーティストとしても有名なハチさんこと米津玄師さんも最近のインタビューで「砂の惑星」という新曲について以下の発言をしていました。

ハチ 最初に依頼していただいたときは「どうしようかな……」と考えていたんですよ。で、最近のニコニコ動画をずっと観ていたんです。ランキングとか、自分が観なくなってから流行った動画とかをさかのぼって観たりして。なんと言うか、僕が投稿していた時期とは明らかに景色が違う。ニコニコ動画というもの自体がどんどん砂漠になっているというイメージが広がっていって。「ああ、これ、砂漠だな」と思ったときに、自分がかつて過ごしてきた一種の故郷である、ニコニコ動画が砂漠になっていく光景を曲にしたら面白いんじゃないかと思ったんです。今のニコニコ動画を表現するべきと言うか、する人がいてもいいんじゃないか、と。これならやる意味があるかなと思って、依頼を受けました。

初音ミクの10年~彼女が見せた新しい景色~| 第1回:ハチ(米津玄師)×ryo(supercell)対談 2人の目に映るボカロシーンの過去と未来 (3/3) - 音楽ナタリー 特集・インタビュー

今のインターネット文化は、ニコニコ動画に限らず砂漠化しているのかもしれません。それでもお金のためにこれからも伐採をする人達の方は変わらずいるどころか増えていくのでしょう。

フラットなインターネット文化は死んだ!とは言いません。でもここ十年ぐらいでフラットはお金にならないというか、フラットはお金のない社会を目指している文化だ、ということは証明されてきたのだと思います。

ここ数年、そんな中でこれから僕らは何をしていくか仮説も出せていない時期でした。でもボチボチ何か見えてくるのではないか、という時期になってきてこんな曲も生まれてきているのではないでしょうか。

なにか具体的なオチがあるわけではありませんが、改めてこんなことを考えてながら生きていきたいよねっというお話でした。

www.youtube.com

これからのインターネットを考える

f:id:moba13:20120928162315j:plain

最近「これからどんな仕事やっていきたいの?」と聞かれた時に、「まずwebに骨を埋める覚悟を決めるか考えてる」みたいなことを言っているですが、何いってんだコイツという顔をされるので、その辺をまとめていければと思います。

ここで言う「web」というのは、http://とアドレスを入力したり、iPhoneでアプリを立ち上げたりする、ディスプレイという画面の中にある世界の話だと捕らえてもらえれば良いでしょう。

これまでITやインターネットと呼ばれるテクノロジーは、多くの場合このwebの世界で使われてきました。

しかし、これから先の未来、新しく登場していくテクノロジーの多くはwebでなく、現実世界に対して大きなインパクトを与えていくのだろうな、という感覚があるのです。

それに伴い「インターネット」という言葉の捕らわれ方も変化してくると思います。もちろん重要度が下がるということではなく、2020年に実用化を目指す5Gの登場などに伴い、よりますます世界の中で重要なテクノロジーとなっていくのでしょう。

ただこれまでと違って、インターネット凄い!好き!みたいな扱いでなく、これからの新しいテクノロジーの基盤としての存在になっていくと思います。

それこそインターネットは現代で言う電気のような扱いになっていくのかもしれません。例えば、電気を使って仕事してます!とか、子供の頃から電気使っていてずっと電気に関わる仕事したいと思ってました!なんて言葉に僕達は違和感を感じますよね。

いや、どんな仕事でも大抵電気は使うし、電気を生活で使うのは当たり前でしょって。この「電気」という言葉を「インターネット」に置き換えたような世界になっていくのだろうなという感覚です。

ここまでの話をざっくりまとめると、インターネット=webでなく、インターネット>webの世界にもう移行しているんだなということです。

インターネットが現在世界に溶けていく

もう少しこの話を掘り進めていこうと思うのですが、まずこれまでインターネットを使った仕事というと、現実でやっていたことをwebで出来るよう変換していくことを指すことがほとんどでした。

例えばネットショッピングというのは、今まで現実で店舗を構えて販売していた商品をネットで販売することでしたし、音楽配信もCDで買っていた音楽をネットで聴けるようにすることでした。

SNSであれば、友達と現実で合わなくとも交流しよう、というものです。電子書籍はもちろんブログも、活字を紙を使わないで届けようとするものです。

現実社会で出来たことをどうやってディプレスの中で情報化して発信し、付加価値を付けたりコストを下げたり、という挑戦だったわけです。ざっくりまとめれば現実をインターネット化させてきたと言っても良いでしょう。

しかし、今新しい技術を見ていると、これまでとは逆にインターネットを現実化させているように感じられます。

例えば、お金がインターネットに置き換わるのが暗号通貨で、空間がインターネットに置き換わるのがVRやARで、人間がインターネットに置き換わるのがAIみたいな感覚です。(理論としてはガバガバなこと言ってるのでニュアンスだけ理解してもらえればと。)

別に今後新しい技術はもう今後webの世界を変えないと言っているわけではないのですが、新しい技術は画面の中でなく、画面の外である現実を豊かにしたがっていると思うのです。

もちろんwebの世界でもAIは活用されて、いままで出来なかったことができるようになっていくとは思います。しかし例えばamazonがおすすめしてくる商品の精度が上がるインパクトと、AI&ロボット技術で農業の生産性が上がること、どちらが世の中にインパクトを与えるのでしょうか、ということです。

正直新しい技術を、webで商品の購買率上げたり広告のクリック率上げることに使う暇があれば、農業・食・自動運転・医療・介護などなど、現実を便利にいくテクノロジーとして活用してくれよって単純に思うんですよね。

webで情報流通はとても変わり良い世の中になったと思っているけれど、もうそこに新しい技術を回すターンは終了していて、現実面に生かす次のターンがやってきているなと感じているのです。

変化するwebの立ち位置

まとめていくと今、「インターネット」というと二つの文脈が混雑しているように感じています。

  • インターネット = web時代の、情報発信・SNSみたいな文脈。
  • インターネット>web時代の、社会のシステム(医療だとか食とかお金だとか)を変革させる基盤となる文脈

正直前者の「インターネット=web」みたいな文脈の中でできることは2周も3周もしていて、その結果やることがなくなり大企業すらキュレーションメディアのようなただのデカいブログを作るようなことをしているわけです。

でもこれまで前者の文脈で生きてきたこれまでの「ネット業界」の人達がどこまで後者の社会に役立てるのかというと中々に疑問ですし、後者の領域はまだまだ発展途上でお金はたくさんかかるし、いつそれが回収できるかもわかりません。

ただ元々「ネットベンチャー」というのは、そういった領域に挑戦する会社を指すわけで、もうwebサービス作ってますとかアプリ作ってますみたいな会社はベンチャーでも何でもないなって思っています。

それは別にwebが悪ということでなく、もう一昔前のものになってきているというだけの話です。

そんな前提の中、「インターネットが好き。」という気持ちでネット業界に入ってきた僕らは、どちらの文脈の上で生きていくかを意識しようがしまいが選択している時代なのはないでしょうか。

インターネットは広大すぎるぜ。

若者はなぜSNSを乗り換えるのか。「ダサいから」は本当の理由ではない。

f:id:moba13:20170913160431p:plain

先ほどTL上にこんな記事が流れてきていて、「LINEも時代遅れなのか…」などと叫喚の声があがっていました。

lab.prcm.jp

若い子達はセンスがあるからダサいSNSはすぐ辞められちゃう、というのが前々からの定説ですね。

でもこれは部分的に正しいですが、完全な正解ではありません。ダサいから若者がSNSを乗り換えるというのは、表向きの理由であって根元にある理由は多分違います。

また、LINEはSNSというよりメッセンジャーツールだから、LINEの需要が減る意味がよくわからない…と感じる人も多いことでしょう。

でも僕はLINEも一つのSNSだと認識しています。

この2つの話を解説するのには、僕の脳内にいるJK一年生に、LINEを辞める時の考えを見せてもらうのが一番なので早速下記に書いてみましょう。

↓↓↓↓

(高校一年生・脳内女子高生)
もう高校の友達結構出来たし、その子達とLINEするだけで結構時間食うんだよね~。でも中学の時の○○ちゃんとかからまだLINEくるのちょっと面倒。スルーするのも悪いし、当然ブロックするのもめっちゃカンジ悪いしな…。

あと中学の時のクラスとか部活のLINEグループも、もう私あまり発言するつもりないし通知も切ってるんだけど、未読溜まるのなんか嫌だしグループから抜けたら抜けたで色々裏で言われそう。

・・あー、もう色々LINE面倒だし、今度機種変する時にLINE消えちゃったことにしよっかな。

アカウント作り直すと、電話帳の連携機能とかいうやつ?でまたいろんな人と繋がっちゃいそうだし、仲良い子とだけTwitterとか繋がってDMで話せばいいや。

↑↑↑↑

以上のようなことが若い子がSNSを乗り換える動機であって、インスタがオシャレだから~っていうのは、その後の選定基準に過ぎないんですよね。

mixiの時代からそうなんですが、SNSは中→高→大→社会人とリアルのコミュニティが変化することに対応出来ていません。

現実社会であれば、中学生から高校生に進学した後も仲良くする友達というのは、自然と選別されていきます。でもSNSだとその選別が行われないのです。マジこれ問題。

だから色々と人間関係の弊害が生まれてきて、その結果違うSNSを乗り換えるという選択をすることになってしまうのです。

ただSNSの運営各社もこの問題を認識していないわけでもありません。

例えば、懐かしさあふれるGoogle+はこの問題をサークル(グループ)機能で解決しようとしましたが、結果として理系目線の問題解決にありがちな完全悪手だったなと言わざるを得ません。

多くのユーザーにとって、フレンドになる・投稿する以外の機能を使うことはめっちゃ面倒なことだからです。

Facebookも以前に比べて自分の投稿の公開設定を柔軟に設定できるようになってきましたが、それもそこまでするぐらいだったら違うSNSに乗り換えた方が圧倒的に楽なんですよね。

ネットの性質である情報のアーカイブ性というのは基本的にとても便利なんですが、ネットコミュニティ運用ではこのアーカイブ性がかなりの弊害になっています。

人間はネットほど情報をアーカイブ出来ないが故の自浄作用を持っていて、それにより円滑なリアルコミュニティを築いているのです。

Snapchatやインスタのストーリーのような一定時間で投稿が消える機能というのは、この辺りの人間らしさを意識した設計をしていると思うので、後々はそれがフレンド管理の設計にも反映されてくるかもしれません。

個人的には、人工知能にSNSのフレンドを管理してもらって、繋がってるけど面倒な人を「あ、間違ってフレンド解除しちゃった!私が計算してブロックしたんじゃなくて、あくまで間違えだよ。私ったらAIなのにドジっ子さん(テヘペロ😛」って形で整理してくれる未来を所望しています。

ともあれ、まだまだSNSのフレンド管理の正解となる設計は生まれていません。なのでもう少しの間SNSの乗り換えるという現象は、若者を中心に3年4年スパンで繰り返し起きていくのでないかなーと思います、いうお話でした。

関係ないけど、JKといえば「古見さんは、コミュ症です。」の古見さん可愛いですよね。

Google Analytics APIを使って機能実装やコンテンツ改善に役立てる - PHP

GoogleAnalyticsではAPIが提供されており、それを利用することで普段管理画面で見ている様々なアクセス解析データを自由に取得することができます。

そのデータを活用すれば、アクセスランキング機能であったりの実装に役立ちます。

そこで今回は基本的なGoogleAnalyticsAPIの使い方や、その活用方法についてまとめていきます。

Google Analytics APIの使い方・参考記事

このページでもサンプルソースを記載しますが、下記記事を参考にしているだけなのでこちらも参考に。

APIの利用にあたり秘密キーファイルの取得など事前に設定が必要なのですが、当ページでは省略するので「事前準備編」の確認は必須です。

Google Analytics API(v3)を使ってPHPでリアルタイムユーザー数を取得する方法(事前準備編) | Lancork

Google Analytics API(v3)を使ってPHPでリアルタイムユーザー数を取得する方法(実践編) | Lancork

サンプルコード

今回はGooglaAnalyticsから各ページ過去30日分の、PV数・閲覧開始数・ページ閲覧時間・セッション時間を取得する内容にしておきます。

またGoogleAPIを利用するためのライブラリは「analyticsAPI」というディレクトリにアップしてあることとします。

そして取得した結果を加工して「analytics_data.json」というファイルに保存するようにしてあります。(事前にファイルを用意し書き込み権限を与えておく。)

<?php
$path = "パスを指定";

// ライブラリの読み込み
require_once $path . 'analyticsAPI/google-api-php-client/src/Google/autoload.php';
 
// サービスアカウントのメールアドレス
$service_account_email = 'サービスアカウントのメールアドレス';
 
// 秘密キーファイルの読み込み
$key = file_get_contents($path . '秘密キーファイル');
 
// プロファイル(ビュー)ID
$profile = 'プロファイルID';
 
// Googleクライアントのインスタンスを作成
$client = new Google_Client();
$analytics = new Google_Service_Analytics($client);
 
// クレデンシャルの作成
$cred = new Google_Auth_AssertionCredentials(
    $service_account_email,
    array(Google_Service_Analytics::ANALYTICS_READONLY),
    $key
);
$client->setAssertionCredentials($cred);
if($client->getAuth()->isAccessTokenExpired()) {
  $client->getAuth()->refreshTokenWithAssertion($cred);
}

$start_date = '30daysAgo';
$end_date = 'yesterday';
$metrics = 'ga:pageviews,ga:entrances,ga:avgTimeOnPage,ga:avgSessionDuration';
$dimensions = 'ga:pagePath';
$sort = '-ga:pageviews';
$filter = 'ga:pagepath!@/page/;ga:pagepath!@/sample/';
$max_results = 10000;
$optParams = array('dimensions' => $dimensions,'sort' => $sort, 'max-results' => $max_results,'filters' => $filter );

$result = $analytics->data_ga->get('ga:' . $profile, $start_date, $end_date, $metrics, $optParams);

$analyticsDataAr = array();
foreach($result["rows"] as $row){
    $i = 0;
    foreach($row as $r){
        $r = floor($r); //滞在時間などの数値の小数点カット
        if($i != 0){
            $analyticsDataAr[$row[0]][] = $r;
        }
        $i++;
    }
}

$analyticCount = count($analyticsDataAr);
$analyticsData = json_encode($analyticsDataAr);
file_put_contents($path . "analytics_data.json" , $analyticsData);

APIから取得したデータを$analyticsDataArの部分で加工し、配列の添え字に各ページのパスを入れるようにしています。

それによってページ上で取得したデータを扱う際、事前にanalytics_data.jsonのデータを読み込んだ上で、$pv = $analyticsData["現在のページpath"][0];とすればPV数を取得できる、といったデータ構成にしてあります。

他のデータ項目を取得したい場合

今回はPV数・閲覧開始数・ページ閲覧時間・セッション時間を取得するものにしてあるといいましたが、もちろん他にも普段管理画面上で見るすべての項目を取得可能です。

公式のドキュメントを確認すると共に、「Query Explorer」という公式が提供するツールを利用することで取得項目のテストができるので、こちらを利用した上でコードを改変していくと捗るでしょう。

Core Reporting API - 一般的なクエリ  |  アナリティクス Core Reporting API  |  Google Developers

Query Explorer — Google Analytics Demos & Tools 

フィルタの設定

また必須項目ではないですが今回サンプルということで、$filterという項目も設定してあります。この項目を設定することで特定のページパスを持つページを除外したり、ある程度以上アクセスがあるページだけを取得するといったことができます。

Analyticsの管理画面でいうアドバンスフィルタですね。よく使う項目だと思うので加えておきました。このサンプルでは、ページのパスに「/page/」「/sample/」を含むものを除外という設定にしてあります。

その他細かいフィルタ設定については下記をどうぞ。

Core Reporting API - リファレンス ガイド  |  アナリティクス Core Reporting API  |  Google Developers

データの定期取得

GoogleAnalyticsAPIは1 日 50,000 件のリクエスト制限があり、また特に今回の様にように全体データを取得するような場合は取得に時間がかかります。なので都度APIを叩くのでなく、cronなどを利用し定期的にデータを取得するのが一般的でしょう。

アクセス解析データの活用例

では取得したデータを利用し、どんな実装ができるのかいくつか考えてみましょう。

機能追加

  • 週間・月間などのアクセスランキング生成
  • 閲覧ページの合計閲覧者数表示

wordpressなどCMSの場合、こういった機能の実装はプラグインを使えば簡単にできますが、独自に製作している場合はそれがないので今回のように取得したデータを使い実装する必要がありますね。

またwordpressを利用している際もページのキャッシュ化をしていると、プラグインが正しくアクセスを取得できていないケースがあるので、そういった時はAnalyticsのデータに頼ることが出来て良いです。

コンテンツの見直し

個人的にはこちらの目的で利用することも多いです、例えばアクセスや閲覧時間が少ないページだけを取得するようにしておけば、コンテンツの見直しに役立ちます。

ただ、それだけであればカスタムレポートを定期的にメールで飛ばす設定にしたり、GoogleDocsのアドオン「Google Analytics」を利用すれば良かったりするんですけどね。

tech.pepabo.com

とはいえ、機能実装ついでに下記のようなSlackに通知を送るコードと組み合わせて、アクセスが少ないページをslackに投稿するといったなどの設定にしておくと、いちいちエクセルを開いたり、GoogleDriveのページを開いたりといった手間なく、簡単にデータが見られるので非常に助かります。

qiita.com

特にチームでやっている場合は、コンテンツ改善の担当者だけがレポートを見てるという状態よりも、slackで全員が改善の余地があるページを簡単に見られるようにしておくという環境構築は大事だったりしますのでぜひ。

CSVで管理できる検索フォーム作った。 - PHP

前回、jqueryを使ったYesNo診断をアップしましたが(YesNo診断のテンプレート作った。)、今回はCSVで情報を管理できるPHP検索フォームをアップしておきます。

作りたかったもの

  • ちょっとした検索フォームを実装するのに、MySQLとかデータベース使うと手間なのでcsvで管理したい。
  • csvで列増やすだけで検索項目増やせるようにしたい。(極力PHP側に触れずhtmlとcsvを編集するだけでokにしたい。

 

デモとソース

デモはこちらからどうぞ。

www.codelink.co.jp

ソースはGitHubにアップしてあります。

github.com

構成

  • index.php - トップページ
  • result.php - 検索結果ページ
  • form.php - 検索を処理するメインのPHPファイル
  • form.csv - 検索に利用するデータが保存されたcsv
  • html_form.php - 各ページで利用するformのhtml。各所でincludeして利用。
  • html_result.php - 各ページで利用する結果出力用のhtml。各所でincludeして利用。

利用の前提など

  • selectboxのために複数結果を持たせる項目は、csvの1つのセルにセミコロン区切りで記述。例)「apple;lemon;melon」
  • csvの文字コードはsjisで、htmlの文字コードはutf-8。(エクセルの保存形式がsjisなので。)
  • csvの一行目が項目名となり、htmlに記述する際の添字になる。
  • 検索結果ページにあるformのselected処理は、result.phpの下部にあるjQueryで処理してます。
  • デザインは一応レスポンシブっぽい仕上がり。

 

何言ってるかわからないという方が扱うのは難しいかと思うので、その辺はご了承ください。

参考

前回と同様CSSは下記ページのものを参考にしています。

saruwakakun.com

saruwakakun.com

また、結果の並び変えにはjQueryプラグイン「MixItUp」を利用しています。

www.kunkalabs.com

最後に

適当に作ると汎用性が低くなりがちなので、公開することにすればそこそこ真面目に作るであろうということで制作してみました。

もうこれに似通ったものを今まで何千人が作ってきたのだろうという、気持ちにもなりますが検索してもあまりそれっぽいものが出てこないのでwebの大海に放出しておきます。

とはいえだいぶ勢いでコード書いたので、バグ等あればご指摘いただければ幸いです。

また元々の予定としては、selectboxの検索項目として「3000円以下」など、数値の大なり小なり検索も行えるようにしたかったのですが、あまりエレガントな実装に出来なかったのでとりあえずその項目は消してアップしてあります。

その内改良してコミットするかもしれないですが、しないかもしれない。form.phpの40行目辺りにある判定項目を増やせば良いだけなので、適当に改造してもらえればです。

シンボルとは何か。

最近、シンボルとは何か、ということをよく考えています。以前にロゴに関する記事を書きましたが、ロゴというのもシンボルの一つの形でしょう。

blog.code-link.jp

またこの記事とは別に今、占星術に関する記事も書き途中なのですが、占星術の惑星記号もまたシンボルと呼ばれます。

f:id:moba13:20170726194626j:plain

 

ある著名な海外の占星術師のお話を聞いていた時、「良い占星術師はチャートを見た時に、シンボルが踊り出すように見える。」みたいなことを言っていました。

シンボルの組み合わせを見た時に、一つ一つの意味合いを左脳的に読み解くことを積み重ねていくと、ある時から全体を見るだけで直感的に理解できる、みたいな話ですね。マンガ家さんが「キャラクターが勝手に動き出して物語ができる」というのと似たようなことかと思います。

シンボルというのは、それだけ一見小さな固まりの中にも、多くの意味合いが込められているものです。 

考えの整頓

考えの整頓

 

言葉、というのもとてもシンボリックなものと感じられます。

ピタゴラスイッチなどの企画・監修で有名な佐藤雅彦さんの書籍の中で、脳科学者の岡野谷一夫さんの著作から「ことば」の定義について以下のように引用していました。

「象徴機能を持った単語をある順序を持った単語をある順序で組み合わせることによって、世の中の森羅万象との対応をつけるシステム、それがことばである。」

非常に、シンボルというものを的確に表現している言葉だなと感じられます。

人間 (岩波文庫)

人間 (岩波文庫)

 

またドイツの哲学者、カッシーラーの「人間 シンボルを操るもの」の中では、人間のことを"シンボルを操る動物"と呼んでいます。

この書籍の中のシンボルの例として、神話・宗教・言語・芸術・歴史・科学を取り上げています。概念が大きくこれらをシンボルである、と捕らえることは日頃あまりありませんが、たしかに一番完成されたシンボルというのはこれらのように感じられます。

そしてシンボルとは、抽象度の高い知と美をもって表すものであると言い、直感と思考の調和したもの、とも表現していました。また、美とは宇宙の富とその深さをを示すもの、といった表現をしていたようにざっくりとですが記憶しています。

急に宇宙などと言い出すとぶっ飛んでいるようにも感じますが、先ほどの岡野谷さんの言葉にあった、森羅万象だとか万物、みたいな表現にすると捕らえやすいかもしれません。人間は知性を持つことで日常を良く生きているわけですが、地球の重力や気圧といった環境がベースにあり、それを知で活用できているからこそ豊かな日常を送れているわけです。

地球という美しい星を活用させてもらうために、知を持ってシンボルを生み出し、操っているのが人間なのだと思います。

また一方で、そのような正しいシンボル的な理想を叶えていないものは、シンボルでなく呪術・迷信であるといった表現も書籍の中にありました。

確かに今の世の中、一見便利なシンボルのようでありながら、実際はただ僕らのことを迷信的に縛っていること事柄も多いように思います。

シンボル的なもの正しくあれそうでなかれ、それだけ力を持ちます。

僕らは自己を主と生きているように感じながらも、実際には多くのシンボルあるいはシンボル的な迷信に囲まれ、そこから学びを得て生活をしています。

だからこそ、改めてシンボルとは何かを理解した上で、正しいシンボルを選択し理解を重ねていくことが生きていく上で重要ではないかと思うしだいです。

 

YesNo診断のjQuery使ったテンプレート作った。ユーザー動向調査にも使えるかも。

知人からYesNo診断のページ作りたいのだけれど、何か良いの知らないと聞かれ、簡単に調べてみて見当たらなかったのでサクッと作ったものを公開しておきます。

デモとソース

codepenにデモを設置してみたのですが、スマホからだと動作していない予感です。ソースをサーバーにアップすれば、もちろんスマホでも正しく動作します。

一応レスポンシブっぽくなっています。

ソースはGitHubにアップしてあります。

github.com

参考

CSSによる装飾は下記の記事を参考にしました。最近はCSS3を使えば画像なしに結構綺麗に仕上げられて良いですよね。

saruwakakun.com

saruwakakun.com

使い方や注意等

ソースを見ていただければわかるかと思いますが、id先にhrefやonclickの数字を充ているだけです。設問数など自由に増やせます。設問数が多くなるとこんがらがるのでエクセルなどで整理した方が良いかもしれません。

また勢いで作ったのでhtmlやCSS等だいぶ雑になっているのはご了承を。

GoogleAnalyticsのイベント機能と連動させればユーザー動向調査にも

純粋にコンテンツとしてもこれは使えますが、合わせてユーザーがどの結果たどり着いたかを集計できるようにしておけば、管理者側としてはアンケート結果集計装置にもなります。

googleAnalyticsが導入されているなら、イベントトラッキング機能を使うと楽でしょう。

whitebear-seo.com

具体的には、結果画面に遷移する質問のaタグのonclickに以下のように記述を追加していく形です。('result01'となっている部分を、解答ごとにわかりやすい名称に個別に変更していく。)

<a href="#101" onclick="showLAYER(101);ga('send', 'event', 'yesno', 'result', 'result01',1,{'nonInteraction': 1});" class="qabtn">

ユーザーの需要がこれで集められるようになるので便利ですね。ただアンケートに答えてくださいだと面倒ですが、これならお互いにメリットがある形ですので。

古参的なあとがき

昔はCGI配布サイトの「夢幻」など、こういったものがたくさんフリーで配布されていたのに、気がつけばそんな文化も減ってしまいなんだか寂しいですね。

もちろんGitHubのような進化した形もありますが、一からwebページを作るというのが一般の人がやるもので無くなってきて自然と敷居が上がったように感じられます。

学生時代に自分のホームページに掲示板設置するの楽しかったのになーなんて思っちゃいますよね。