メールでのお問い合わせはこちら、お問い合わせフォーム
  • スタッフブログ

 スタッフブログ

1  2  3  4  5

クッキーの話 

20191106.jpg

皆さんは、ネットで買い物をしていますか?
している方の場合、買い物をした後、やたら「買った物」の広告を見ることはありませんか?
それは多くの場合、クッキーを利用して実現されています。

◆その1 ITPの話


アップル社のSafariが採用している事が知られているITP(Intelligent Tracking Prevention)てすが、聞いた事のある方は少ないかと思います。

気にしなければいけないのは、広告で稼いでいる人達(とその人たちが使っているサービス運営元)だけですので、一般の方々が気に病むことはありません。
ですが、この動きが進むと、「アフィリは儲からない」という事になり、中小の広告サービスが消えたり、広告を載せる人(サイト)が減ることになる可能性があります。
そうなると、煩わしい広告や中身がないアフィリサイトが減るので万々歳!

......とは限りません。

確かに減るとは思うのですが、真っ当な解説記事も一緒に減っていく可能性があります。
世の中、タダで情報を提供してくれる人ばかりではありませんから。

ですが、多くの人にとっては心配するような事態は起きないと思いますので、業界人以外はITPの動向についてチェックする必要はないと思います。

この件は悪い言い方をすれば、
 資金力に劣り、web広告に依存する中小企業を圧迫し、
 豊富な資金力を持ち、レガシーメディアに大量の広告を打てる大企業が喜ぶ施策

を推進していると言えます。

逆に良い言い方をすると、
 web広告で儲け、アクセス解析でユーザー囲い込みをしているライバルGoogleのビジネスモデルに戦いを挑んでいる
という事もできます。

本件について技術的ではない意見が出ている場合、
 さすがはGAFAの一角を成すアップルですネ(ほめ殺し)

 がんばれアップル(賞賛)
か。
どっちの立場で解説するかで、その記事のライターのスタンスが見えてくると思います。


◆その2 公正取引委員会のクッキー規制


メディア(朝日新聞)に出ている説明では
「ウェブ上で利用者がどんなページを見たかを記録する「クッキー」」
なんて書いてあったりしますが、通常クッキー自体に「どんなページを見たか」は記録しません。
そんなものを記録する容量は無いからです。
(1枚のメモ用紙に年鑑の中身を書き込むようなもの)

アクセスログ側にクッキー情報を保存することで、解析時に「指定の内容のクッキーを使ってアクセスしたページの一覧」などを取得できるようにするのが通常の使い方でしょう。

で、「リクナビ」で問題となった話は「就活生に無断で内定辞退率を算出・販売」という事ですから、クッキーは手段の一つでしかなく、ユーザー(就活生)のサイト内行動履歴を元データとして「内定辞退率を推計」したわけですから、サイト内行動履歴を取得する手段がある限り、クッキーを規制しても無意味でしょう。
もちろん、クッキーが一番使い勝手が良かったものと思いますが、話はリクナビサイト内の行動履歴という事ですから、リクナビはファーストパーティとなる以上代替手段はいくらでもあります。

本気で規制しようとしたら、クッキーどころか「ウェブサーバーはログを保存してはいけない」とかいう話になり、現在のネット社会自体に大きな障害を及ぼしかねません。
少なくとも、トラブルが起きたら即死です。
ログが無ければ、原因も分かりませんから、「復旧」も不可能。
そんな「いつ船底に穴が開くかわからない船」「穴が開いたら修理できない船」に乗っかった状態でビジネスなんてできません。

つまり、公正取引委員会が言っていることは

 包丁で強盗をした者がいるから、包丁の製造販売所持を禁止する

なんて主張をしているような話なのです。

もちろん、巷で包丁を持って歩けば職務質問を受けるでしょう。
でも、料理店や各家庭では普通に包丁を使っていますね。
突然警官が家に上がり込んで、夕食の準備をしているお母さんを「銃刀法違反の現行犯で逮捕する」なんて事は起きません。

そう、「正しい使い方をしている限り問題ない」というのが「リアル世界の常識」なのです。
個人情報収集に「利用できる」から「使用禁止」とか言い出せば、頭の中身を心配される事態となります。

ところで、公正取引委員会も「利用者の同意なく」と言っていますので、「同意がある」なら大丈夫なのでしょう。
(現状の報道記者の推測を信じればですが。実際の公正取引委員会の考えはまだ判りません。斜め上の事を言い出す可能性はまだ消えていません。)

でも、「同意しない場合サイトはご利用になれません」という場合がほとんどになるのではないですかね。
これではユーザーに1クッション余計な手間をかけさせ、web制作に余計な工数※を増やすだけの「lose-lose」なお話。
ネットだからと言ってリアルの常識を逸脱する「規制」を言い出せば反対の声が上がるのは当たり前です。

※余計な工数
これが結構大きい工数になります。詳細は後述。


また、この手の「規制」などでよくある事象としては

「目的の相手には効果が無く、中間層が打撃を受けて二極化や寡占化を進める」

なんてのがありますね。
二極化が進めば結果寡占化してしまう訳ですが。
そうなると、むしろ逆効果という話になってしまいます。

逆効果になる事は大きな問題ですが、本件ではこれとは別の問題も潜んでいます。

それは「よくわからない人の鶴の一声」です。

公正取引委員会でも、webに詳しい人は居るでしょう。
そういう人が、慎重に的確に規制案を作ればよいのですが、役所(に限らず)ピラミッド型の組織では、地位が上がって権限が増えるに従い、見識は減っていきます。
webの仕組みをよく知らない「偉い人」が、提出された案を「こんなんでは駄目だ」と差し戻し、斜め上の内容を採用するよう「業務命令」を出す。
決して荒唐無稽なおとぎ話ではありません。
実際に起きない事を保証できる人は居ません。

とりあえず、オカシイ方針にならなかったとしても、方針に従うには、一部のサイトに見られるような
 ページを開くとCookie利用目的のポップアップが出て承認を求められる
という面倒な話が、大多数のサイトで必要となります。

もし、ここで「Cookieの利用を認めない」とするとどうなるでしょう。
サイトはCookie利用を認めているかどうかの情報を、何らかの形で保存する必要があります。
もしこれをCookieに保存したら、大変なことになります。ユーザーの対応内容を覚える事が出来ません。

そう、「初めてサイトを訪れた時」ではなく、「ページを開くたび」に聞かれることになるのです。
うっとうしい事この上ありませんネ。

ですが、公正取引委員会が暴走して「許可を得られなければ、情報を保存する事は一切まかりならん」なんて事になれば、それが現実になります。
また、そこまで斜め上の決定をしなかったとしても、古い仕様のHTMLだけで構築されているサイトは少なくありません。
cgiやphp等のプログラムで生成したページならサーバー側でIPで識別して対応できますが、単なるHTMLなら、事実上Web Storageぐらいしか使えるものは残りません。
でもWeb Storageを「巨大なCookie」と理解された場合、こちらも規制されるかも知れません。

IPの場合、スマホでアクセスしていると普通にサイトを見ている最中にも変わる事があります。
webアクセスの過半数がスマホという現代、サイトを見ていると何度もポップアップが出て、
 「さっき拒否したやん!何回聞いてくるんや!うぜぇ!!!」
なんて事になりかねません。
それにIPが変わるという事は、「別人」が出した非承認に従う事になる可能性も出てきますので、
 「なんやこのサイト、動きおかしいやん!」
なんて事態も起こります。
はっきり言って、事故の元なので使えませんね。

セッション変数を持ち歩く方法ならIPが変わっても平気ですが、一度サイトを離れると忘れます。
次にサイトを訪れると、またポップアップが出ることになります。
まぁ、ログインして何かをするサイトの場合は、この方法で良いでしょう。
よくある「ログインしたままにする」は使えなくなりますが。


いろいろウザイ事になっていますが、クッキー許可すれば、それを覚えて二度と聞いてくることはありません。
「ログインしたままにする」も有効になるでしょう。
......この間まではね。(後述の「合わせ技」参照)


さて、いずれの対策を施すにしても、相当の作業工数が発生します。それらは当然費用に返ってきます。
サイトトップページだけならともかく、全ページに仕組みを埋め込まなければなりませんから。
そして影響は等しくwebを持つ企業・団体、あるいは解釈や規制内容次第では個人にまで及びます。
つまり、これは経団連のお偉方が所属する大企業だけでなく、資金繰りに苦しむ中小企業にも「新たな追加負担」を求める話なのです。
ネットではこの動きを「公正取引委員会の大企業叩き」と解釈して歓迎し、反対する経団連を非難する声が見られますが、本当に困るのは体力に劣る中小企業なのです。
(一般庶民は困るけど富裕層は平気な件では「一般庶民」のハズの「ネット上の大きな声」は賛成が多数派になる。よくある話ですね。一般庶民が意見を述べているという推測が間違っているのか、あるいは別の理由か。)

或いは、「ウチが言い出した事じゃないから、公取対応は追加費用ナシでやってくれ」なんてことをモンスター顧客に言い出されるweb制作会社でしょうか。
とりあえず弊社の場合、ウチの顧客にはそんな事を言うモンスターは居ないものと信じております。


◆合わせ技


ITPにはバージョンがあり、バージョンアップの度に規制が強化されて来ています。
そしてITP2.1ではファーストパーティCookieの保存期間は7日間とされています。
(規制強化される前は年単位だったようです)

そう、公正取引委員会の方針に対応した場合でもSafariの場合、翌週久しぶりにアクセスすると、またポップアップを見たり、ログアウトさせられたりする事になるのです。
 「この間OKって言ったやん!忘れたんかい!うぜぇ!!!」
 「『ログインしたままにする』って動いてないやん!バグかよ!」
となるのです。


◆解説


・ファーストパーティCookie
ファーストパーティが発行するクッキー。
サイトを利用する場合、そのサイト自身が発行するクッキーです。

・サードパーティCookie
サイトとは別のドメインのクッキー。
広告やアクセス解析が使っていることが多い。


◆余談


ITPは現時点では広告の精度が下がったり、商品情報を説明してくれているサイトやブログを検索しても「なんとなくサイト数が減った気がする」という別段無害な事になるだけですが、
公正取引委員会の事例を組み合わせると、将来は「ちょっと前に言われていた未来」の姿が変わるかもしれません。

「ちょっと前に言われていた未来」の姿としては、
 ラーメン好きの人が外を歩いていて「おなかすいたなぁ」と思ったら、近場でおいしいと話題のラーメン店を紹介する情報が通知される。
なんてのがありますが、今の流れが更に進めば、
 ラーメン好きである
 今「近くに」ラーメン屋がある
 今「おなかがすいている」(スマートウォッチからの血糖値情報や普段の食事時間帯からの推測)
という情報が取れなくなり、スマホが店を紹介する事は無くなるでしょう。
自分から「ヘイ」と呼び掛けても、1キロも離れた食べたくもない料理の店を、単に人気店だからと「オススメ」されるかも知れません。
ちょっと前に言われていた「未来」を描いている小説やコミックスがあったら、早くも「レトロフューチャー」になってしまうかも。

ところで、通販でハードディスクを買ったら、広告がハードディスクばかりになる。
「あのー、もう買ったから要らないんですが」
現時点では、「過去の需要」は判っても、「未来の需要」は判らない。ちょっと間抜けですね。
でも、既にアマゾンでは過去の履歴から「そろそろ注文が来そうだ」と、あらかじめ近場の倉庫に商品を送って、受注から到着までの時間を短縮しているなんて話があります。

サードパーティは規制できても、受注当事者による情報蓄積は規制できない。
最近の動き、意図とは逆にますますGAFAを強化する事になりそうな気がしますが......。

190919.jpg

10月から消費税の税率が変わります。 巷ではその準備が進められていますが、弊社でもご多分に漏れず、税率変更対応の作業を行っています。

今回はその一つについてのお話です。

キラリネット(弊社が運営する北海道の有名ショップのポータル)のシステムで以下のような作業を行いました。

ショップにより内税・外税の違いがあったため、税率を0(内税扱い)と0以外(値を税率%とする。現状8)に指定できるシステムでしたが、これを変更しました。

 商品情報に税率項目を追加。
 ショップでの税率は税率項目に指定がない商品用のデフォルト税率の指定に意味を変更。

これにより、軽減税率の存在に対応できるシステムになりました。
また、軽減税率対象品が無いショップで、元々8%を指定しているショップなら、個々の商品に税率設定をせずとも、ショップでの税率を10%にすることで、簡単に税率変更に対応できます。
ちなみに全商品が軽減税率対象品の場合は8%のままなので、何もしなくて良いことになります。

一つ大変なのは、内税で処理していたショップでしょうか。
商品価格自体を変更する必要があるため、商品数が多いと大変です。


さて、消費税に限らず、コンピューターの世界では時々「準備」が必要になる「イベント」が起きます。

最近の事例では改元がありましたね。
あの時は新元号対応に追われたという話もいろいろ出ていましたね。


税や元号は政府から始まる事例ですが、出所がコンピューターの世界自身というケースもあります。

例えば、2000年問題。
20年前にはよく話題になったものです。
昔は年の数値を下2桁(1980年なら80)で処理していたため、2000年になると00となって、1900年と2000年の区別がつかず、コンピューターが誤動作するというものです。
多くの人々の努力により、深刻な問題は起きず無事に過ぎたので、若くない人でも忘れている人は多いと思います。

実はこの手の問題は今後も時々発生すると予想されています。

2025年に起きるのが「昭和100年問題」。
一部古いプログラムが年を昭和の年2桁で管理しているために、発生すると懸念されています。
平成・令和と2度も改元があったのだから、そんなシステムは絶滅していると思ったら、大間違いらしいです。
改元対応作業を安く短時間で終わらせるため、内部処理をそのままに表示だけ平成対応・令和対応したものもあるとか。

その後来るのが「2038年問題」。
これは桁数の問題ではなく、コンピューターが使う時計が、1970年1月1日0時0分0秒からの連続した秒数である事が原因です。
32ビットで表せる数(符号付整数)の限界を超えるため、符号が逆転し時計が1901年になってコンピューターが誤動作すると考えられています。
似たものに「2036年問題」というものもあり、こちらは1900年1月1日からの秒数を32ビットで表せる符号なし整数で使っているシステムで、値が0に戻ってしまうために発生します。
「2038年問題」より2年早く発生しますが、使っているシステムはネット関係の比較的更新の早いシステムなので、一般の方には無関係だと思います。

他にもありますので、興味のある方は検索してみると良いでしょう。
多くの方は実際に遭遇しそうにない問題もありますが、読み物としては楽しめるかもしれません。


このように様々な理由で「壊れていないものを修理する※」事態が発生するのですが、この手の事態に対応するには大方針として2つの方向があります。

一つは「とにかく、固定的に新事態に対応する」で、
もう一つは「可変化し、汎用的に対応する」です。


※コンピューターの世界ではこんな「ことわざ」があります。
「壊れていないものを修理してはいけない」
今うまく動いているものをシステム全体を知らない人間が、適当にいじると、動かなくなる。
特殊な状況下に対応しているプログラムコードを「なんか無駄なコードがある」とか思ってバッサリカットすると、後でトラブルに見舞われる。
コンピュータープログラムは複雑で大きいものなので、一部しか見ないで変更すると痛い目を見るというお話です。
英語では普通の「ことわざ」としてあるようです。
"If it ain't broke, don't fix it."
英語のことわざ【壊れてないものは直すな】
https://kakuyasu-eigo.com/ifitisnotbroken/

「とにかく、固定的に新事態に対応する」というのは、新事態に最適化したシステムに改修するというものです。
税率や軽減税率の対象などを固定的に決め打ちしたプログラムにします。

・利点
利便性が良い事がある。
工数(つまり費用)が少ない。

・欠点
状況が変わると、再改修が必要。
新事態とは別の「爆弾」があっても、そのまま残る。(上記昭和100年問題がその典型)


「可変化し、汎用的に対応する」というのは、設定を変えることで、将来の変更に対応できるようにする方法です。

・利点
税率や軽減税率の対象が変わっても、設定を変更するだけでプログラムの再改修は不要になったり、最小限にできる。

・欠点
設定項目が以前より増えるため、利用難易度が上がるかもしれない。
工数(つまり費用)が決め打ちするより増える。


前者は商社的思考の対応です。
何かある度、仕事が舞い込む。一度捕まえたお客は逃がさん。
忙しいことは正義。馬車馬のように働くべし。

後者はプログラマー的思考の対応です。
手離れをよくしたい。同じような事に何度も煩わされたくない。
新しいことに挑戦するのが至高。お客を増やしてロングテール商法だ。

薬で例えれば
前者は、効きすぎる薬は継続して売れない。程々の効果にすべし。患者の数は有限だ。
後者は、一発で治ればそれで良いじゃん。次の患者が待っている。
といった感じですかね。


現実には2つの方針の一方に極振りする事は稀で、どちらかに寄った形で落ち着くのが一般的です。

弊社のメイン業務であるホームページ制作でも、この2大方針の間でいろいろ調整があります。
例えば、しょっちゅうニュース(お知らせ)があるサイトになるなら、ワードプレスを使って、お客様が自分でお知らせを掲載できるようなホームページをおつくりします。
逆に、一度作ったらほぼ更新がないサイトなら、費用を抑えた造りにします。

事業多角化、その時... 

190710.jpg
今回は前回の続きです。
最適化に反する事を抑制すべきでしょうか。
それともうまい逃げ道があるのでしょうか。

■多角化の話

昔からよくある話として、
 経営の多角化を図って始めた新規事業に失敗して借金を抱えて本業まで怪しくなった。
なんてものがあります。

バブル崩壊後によくあった「投資失敗からの会社消滅」もある意味多角化の失敗でしょう。

ネット小説のタイトル風に言えば「新しい収益の柱が欲しくて事業多角化したら倒産してしまった件」といった感じでしょうか。
(あ、「~った件」はもう古いですかね)

ではなぜそんなリスクを負ってまで多角化するのか。
基本的には本業の成長が見込めない。或いは衰退する未来が読めるからですね。
ですが、社内に誰もプロフェッショナルが居ない分野への新規参入がうまくいくはずがありません。
多くのビジネスは素人がいきなり成功を収められるほど甘くはありません。
「素人は失敗する」のです。

では、詳しい人材が居たり、業界に精通した人の助けなどで人材を採用できる場合はどうでしょう。
また、一見すると全く違う業種に見えて、根底に流れる技術に共通性がある(=実は社内にプロフェッショナルが居る)というケースもあるでしょう。

その場合は成功する「可能性」が生じます。
過去の成功体験に囚われたり、新規事業に疎い管理職が部下である専門家に見当違いの命令などを出して足を引っ張ったりしなければ、その可能性は高まります。

富士フィルムなんかは成功例に挙げてよいかと思います。

そこまで大きな変化で無くても、本業と似た感じの横展開の事例としては吉野家がありますね。
外的要因(アメリカ牛輸入禁止)から牛丼以外のメニューを充実させる必要に迫られ、それを成功させて輸入再開までの危機を脱しました。

袋麺とカップ麺を「別分野の商品」と考えれば、この間の朝ドラで行われていた内容も「多角化」の成功例なのかもしれません。


■リスクを下げる

多角化をする理由の一つに「リスクヘッジ」という考え方があります。
一つの事業だけが収益を上げているビジネススタイルは、国家でいえば発展途上国のモノカルチャー経済と同じです。
そのたった1本の柱が傾けば、会社自体が傾いてしまう。
それを避けるため、新たな柱を打ち立てる。

しかし、多角化は大きなリスクを伴います。
失敗事例も多く、大抵の経営陣はやりたがらないでしょう。

ですが、近年はそのリスクを下げる方法もあります。

たとえば、いきなり大きな投資をして大事業をぶち上げるのではなく、最低限の費用で「観測気球」をたくさん上げて、その中で評判がいいものに投資をする。
といった方法です。

20世紀ではこの「観測気球」と評判の確認でさえも多額の費用と時間を必要としていましたが、現代ではウェブを使えば以前よりはるかに少ない費用で実現できます。


■なんと逆効果?

では、自社サイトにそういった「観測気球」目的で実験的コンテンツを掲載して評判を確認しようとすると、どうなるでしょう。
評判を知りたいわけですから、アクセス数が見込める自社ドメインのサイトに掲載したいですよね。
正式な事業でもないのに独自ドメインを取ってサーバーを借りるとかしていたら、費用もかさみますし、アイデアが浮かんでも実現までの手順(稟議書に押すハンコの数)が増えてレスポンスも悪くなります。
成長が見込める有望事業なら、当然ライバルもいるはずです。スピードの遅さは失敗要因の一つになります。

ですが、ここで前回ご紹介した弊社社長ブログに書かれていた事を思い出しましょう。
読んでない方もいると思いますのでここに引用しましょう。

>あがってきてほしいキーワードと関係のない記事を書きまくっていると順位が下げられるということになります。

そうです。
観測気球のページを作ると、サイト全体でgoogle先生からの評価が下がってしまうかもしれないのです。
これでは「守旧派※」から「余計な事をするな」と怒られてしまいます。

※この間の朝ドラで言えば、「どこの家にも『どんぶり』があるんだからカップ麺なんて誰も買わん」と主張した人が居ましたね。


■対策は?

実験的コンテンツ集と呼べるほど複数のコンテンツがあるのであれば、それらをひとまとめにして別ドメインで独立させてはどうでしょうか。
利用しているレンタルサーバによっては、同じサーバ内に別のドメインを設けることができることもあり、うまくいけば、追加費用を抑えることもできるでしょう。

実験的コンテンツ集のサイト自体は雑多な内容なので、google先生の覚えはめでたくならないと思われます。
それでも、本業のサイトからリンクすれば、ある程度はアクセスもあるでしょうし、本業のサイトへの悪影響も少なくなります。
(ゼロではないかもしれませんが、そこはgoogle先生にしかわからない事です)

ですが、こういった「対策」が必要とされる事自体が「新規事業へのブレーキ」ではないでしょうか。
それにコンテンツがとりあえず1~2種類なら、経費と手間もばかになりません。

もちろん、メリットもあります。
本業サイトのデザインにこだわらず、コンテンツに合わせたデザインや技術を使っても、別サイトなのですからサイトの統一感を損ねません。
もっとも、同じサイトの中でもインパクトのために敢えて違うデザインにするという手法がありますから、「別ドメインのメリット」と呼ぶには少し弱い気もします。

なお、未検証なので積極的に勧める事はありませんが、サブドメインを使う方法も考えられます。
サブドメインにあるコンテンツは、本ドメインのインデックス数に含まれないと考えられています。
という事は、サブドメインにあるコンテンツの内容が本ドメインのコンテンツとジャンル的に相違していても、影響は少ないかもしれません。
サブドメインであれば、ドメインの取得も新たなサーバー契約も大抵必要ありません。

これまでサブドメインの利用をSEO的視点から行う事はありませんでした。
過去(3年前)の情報ではgoogle先生は「サブドメインとサブディレクトリのどちらを使っても、SEO的な影響は無い」とされていました。
ですが、検索エンジンの世界で3年前は「遠い過去」です。
現在でも同じかどうかは判りません。


■余談 この先どうなる?

アメリカでは選挙でこんな公約を掲げる人も現れています。

米大統領選出馬のウォーレン議員、GAFA解体を公約に
https://www.itmedia.co.jp/news/articles/1903/11/news059.html

この中でGAFAは
 「中小企業の成長を妨げ、イノベーションを阻害した」
という指摘をしています。
それが妥当な主張かどうかはともかく、こういう意見が大統領を目指す人からも出ている現実があります。
上に書いた「新規事業へのブレーキ」の話はまさしく、この主張と合致していますね。
もちろん、もっと重大で多様な話を含むのでしょうが。

インターネットでビジネスをする方々は、今後もGAFA関連の情報からは目が離せませんね。

早まってはいけません 

なぜだろう
最近のSEOで言われていることについて弊社社長がブログでまとめた記事があります。

最近のSEOで重要視される検索意図について
https://www.dao.jp/blog/search-intent/

まずは上記記事をご覧いただくと、この後の話が分かりやすくなります。


■少年ジャンプの衰退

その昔600万部とか売っていた少年ジャンプ。
その後その部数を大きく減らしてしまいました。
理由は多岐にわたりますし、特定もされていません。
ま、そうですね。特定されていたら対策されているはずですから。
(それが雑誌社に可能な対策であればですが...)

そのいくつかある理由の一つが「アンケート至上主義」だったという意見があります。
(現在ではもっと大きな要因があると考えられますが、マガジンに逆転された当時はよく言われた話です。)

読者アンケートで人気のあるものを残し、無いものを切る。
そうすれば、人気作ばかりになって売れるはず

...ところが、そうはならなかった。

これは
 アンケートを出す読者≠雑誌を買う読者
だったためです。
誰もが読者アンケートを出す訳ではない。
それでも「サンプル」としての信頼性があればよかったのですが、残念ながら色々な属性の集団から満遍なく同じ比率でアンケートが届くわけでもない。
・雑誌は買うけど、アンケートは出さない層に人気だった作品が切られて、読者が離れた。
・雑誌は買うけど、アンケートは出さない層に不人気の作品ばかりになって、読者が離れた。
などが考えられます。
一時期などは
 「みんな天下一化しちゃって飽きた。面白くない。」
そんな声を聞いたこともあります。

結果、アンケート結果から得られた「人気度」に最適化したら、かえって売り上げが落ちたという話になってしまったわけです。


■サイトの最適化

ジャンプの逸話はホームページのSEOでも参考になります。

ここで最初にご紹介した弊社社長ブログに書かれていた事を思い出しましょう。
読んでない方もいると思いますのでここに1行引用しましょう。

>あがってきてほしいキーワードと関係のない記事を書きまくっていると順位が下げられるということになります。

つまり、サイトを狙っているキーワードに最適化しましょう。という話です。
関係ない記事を書かない・既にあるなら削除する。
これは雑誌で人気作を残し、不人気作を切るのと同じ操作です。

ここで、安易に「これで検索されていると思うキーワード」や「これで検索してほしいキーワード」に最適化するとどうなるでしょう。

うまくいくこともあるのですが、場合によっては
 狙い通り順位が上がったのにアクセスが減った
なんて事態が起きるかもしれません。
それでも、
 アクセスは減ったけど成約率が上がって売り上げは増えた
となればよいのですが、大抵はそうはなりません。

これは「想定していないキーワード」での検索と、その結果の成約が無視できない数あった場合に発生します。
で、業種によってはそれはレアケースとは限りません。

リアル店舗でも、客引き用の(利益率の低い)イチオシ商品の売り上げは増えたけど、他の商品を買う人が減って全体の利益も減ったりしたら、本末転倒というものです。

最適化するなら、根拠のない「想像」や「願望」ではなく、ちゃんと分析する事が必要です。
やるならアクセス解析を活用して、「副作用」が起きないようにキーワードの選定や分析をしてから最適化をすすめるべきでしょう。

■余談

ところで、今回の記事、SEOの話は書いていますが、ホームページ作成という文言とは関連が薄く、本文に「ホームページ作成」という言葉は出てきません。
という事は、この記事、わが社のサイトにとって有害なのでしょうか?

同じはずが違う結果になる 

blog190228.jpg

widthとmax-widthはどちらを100%にしても同じ...


今回はスタイルシートのお話です。
.sbox1 {
 width:1000px;
 max-width:100%;
}

.sbox2 {
 max-width:1000px;
 width:100%;
}
は同じ結果になるでしょうか。
それとも違う結果になるでしょうか。

これには既に考察された方がいらっしゃるので、記事を紹介します。

[CSS]要素の幅指定widthとmax-width、どちらに100%と固定幅を指定すべきか
https://coliss.com/articles/build-websites/operation/css/width-and-max-width.html

つまり、「同じ結果になる」が回答となります。

では、以下のサンプルをご覧ください。
サンプルを見る

ブラウザの幅を変えてみると、どう見えるでしょう。
 「特に変わった所は無いよ?」
という方も多くいらっしゃるでしょうが、中には
 「下はブラウザの幅に合わせて横幅が縮むが、上は固定されている。」
 「上は固定デザインで、下側はレスポンシブデザインの例ですね。」
となる方もいらっしゃるかと思います。
では、そのサンプルのソースをご覧ください。

実は最初に提示した2つのCSSに違いがあるのかどうかというお話だったのです。

Google Chrome で見たとき、その「変わった現象」は発生します。
(確認したときのバージョンは 71と72 です。他のバージョンでは判りません)
確認した範囲では Edge , IE11 , Firefox ,ios Safari では発生しません。

実は、table を使わず、div でやった場合はこの現象は発生しません。
サンプルを見る

サンプルを見てピンとくる方もいらっしゃるかもしれませんが、これは問い合わせフォームなどでよく使われる「表」です。
この現象を発見したのも、問い合わせフォームを作って見栄えをチェックしていたときでした。

今回は@mediaによるブレークポイントを使わない指定方法で起きた現象でしたが、スタイルの指定方法は多種多様なので、どんな所でどんな現象が出るかは判りません。
動作チェックは念入りに行うようにしましょう。
「(事実上)IEがなくなったから、モダンブラウザは皆同じで、MSと違ってヘンな動きはしないから、もうチェックなんてしなくて良い」
などど思ったら、大間違いというお話でした。


おまけ1 google検索


「同じはずが違う結果になる」はgoogle検索でも発生します。
複数のキーワードで検索する事もよくあると思いますが、キーワードの順番を変えると、結果も変わります。
例として「札幌 ホームページ作成」と「ホームページ作成 札幌」を検索してみると結果が異なるようです。
なぜそんなことになるのか。
ネットでは語順の違いから意味づけを推測しているのではないかという意見も見かけます。


おまけ2 ゲーム


似たような話に「同じだと思ったら全く違う」というものがあります。

A.○○を題材にしたゲームを作ろうと準備を進めていたら、**という技術を使うと効果的だと判った
B.**という技術が話題なので、コレを使ったら○○を題材にしたゲームが作れると考えた

どちらも出来上がるのは一見すると「○○を題材にして**という技術を使った」ゲームですが、そのデキは著しく違うことになります。
前者(A)は傑作になる可能性がありますが、後者(B)は100%駄作です。
この場合、順番の違いは重視している要素の違いや、準備にかけた時間の違いとなって現れます。
Aはゲームデザイナー主導で内容を重視し、長期間にわたって準備をした内容に対し、Bは営業やプロデューサー、またはプログラマー主導で話題性や技術的挑戦を重視し、内容は思い付きレベルなわけです。
内容を軽視したゲームは、当然残念な内容の面白くないゲームになります。

フルスクラッチで、ウェブサイトを効率よく作成する方法

今、クライアントから受注をして、会員サイトの構築をしていこうという構想を社長と一緒に考えておりますが、
フルスクラッチで、作ることを要望されておりまして、どのようにするのが一番効率が良いかと考えております。

cloud-service-platform.png

Amazon EC2や、Heroku、Google Compute Engineなど、クラウドサービスの仮想マシン上であれば、
Railsとか、Laravelなどのフレームワークを入れて、地道に作っていてけば良いのですが、
恐らく、共有のレンタルサーバーですと、上記のようなフレームワークを動かすことができないため、
それに代わる、フレームワークもしくは改造可能なCMSを探しておりました。

そこで見つかったのが、簡易フレームワークである、levis: PHP Frameworkと、
作品公開サイト向けコンテンツ管理システム(CMS)freo。

どちらもPHP-LABOというフリーPHPスクリプト配布&改造&入門サイトを運営してた「ないと」さんが、
作り上げたシステムです。

levis: PHP Frameworkについて

levis: PHP Frameworkは、こちらで使わせていただく立場で、えらそうに聞こえると申し訳ないのですが、
PHPで作られたフレームワークもどきです。

実際にフレームワークもどきで検索して出てきました。

しかしながら、その構築の思想は、Cake PHPというとても有名なフレームワークに影響を受けていて、
かなりしっかりしたMVC(Model、View、Controller)モデルになっています。

これなら、無駄を少なくして、とても効率的にシステムを構築することができそうです。

levis: PHP Frameworkのサイトはこちら
http://refirio.org/levis/

これでしっかりとした情報管理のシステムを有するホームページが制作できそうです。

freo: CMSについて

そして、上記を調べているうちにリンクを辿ってたどりついたのが、コンテンツ管理システム(CMS) freoです。

freo自体は、PHP5と、テンプレートエンジンSmarty2で作られていて、この仕様を見たとき、
PHP5はもうライフサイクルを終えそうだし、Smartyもバージョン2だと将来性が無いな~と考えておりました。

しかしながら調べていく中で、Smartyもバージョン2.6.3あたりから、PHP7に対応していて、
freo自体も公式的にうたってはいませんが、最新バージョンでPHP7に対応しているというので、
もしかしたら、これ使えるかも?ということで、パソコンのXAMMPにシステムを入れてみました。

サポートサイトに書いてあるのですが、
php.iniに"error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED"を入れれば
実際にPHP7で動作することを確認しました。

Apache 2.4.37 + MariaDB 10.1.37 + PHP 7.3.1という環境です。

創作サイト向けコンテンツ管理システム freo(フレオ)
http://freo.jp/

16.jpg

更に、いろいろと見ていくと、マルチユーザー対応になっていたり、
更新のためのフォーム項目も自身で追加できたりと、かなり優秀です。
またコミュニティーもできていて、サイトなどで、ノウハウもかなり公開されていて、
悩んだときにも、解決方法を見つけられそうです。

ということで、現在、システムのベースとして
levis: PHP Frameworkとコンテンツ管理システム(CMS) freo
が候補にあがっています。

そこではっと考えたのですが、PHP-LABOのないとさんのシステムは、GPLで公開されています。

GPLとは、General Public Licenseの略で、
「自己責任で使ってください」
「著作権の表示は消さないでください」
「複製・改変・再配布・販売等は自由にやってOK」
「再配布する物もGPLライセンスにしなさい」
ということが謳われています。

つまり自由に使うことができて、それでお金をとっても結構なんですが、
引っかかるのは、再配布する物もGPLライセンスにしなさいというところです。

自分たちがこのGPLのライセンスに乗っかってシステムを構築した時に、
それを他の人達にも、GPLで公開しないといけないのか? というところが
気になって、GPLについて少し調べました。

結構長くなってきたので、GPLライセンスについては、次回紹介させていただきます。

GAFAとかFANGって何? 

gafa2.jpg

最近、話題のGAFA、とかFANGって?

最近、テレビや新聞で超巨大IT企業というのが、話題になっています。

その中で、よく使われるキーワードとして、GAFA(ガーファ)というものがありますが、
Google、Apple、Facebook、Amazonの頭文字を集めた呼称のことですね。

今や、上記の4つの企業が、世界を牛耳っていると言っても過言ではありません。

最近は、日本政府もこのまま行くと、日本国民のデータがGAFAによって、
どんどんと収集されていって、食い物にされるのではないかと危機感を持っているようです。


そういえば、私もGAFAのサービスを思いっきり使っていて、彼らの収益にかなり貢献しています。

Googleに広告費用を払い、Apple Musicに毎月お金を払い、Facebookを毎日見て、
毎日のようにAmazonに注文をしています。


このまま行くと日本のお金が、アメリカの企業にどんどんと持っていかれてしまうわけです。

FANG(ファング)という言葉もあります。

FANGは、Facebook、Amazon、Netflix、Googleの頭文字を集めた呼称です。

アメリカの株式投資家ジム・クレイマーが、今後注目したい成長企業群としてあげ、話題を集めたそうです。

最近、私(佐藤)の娘が、テイラー・スイフトのライブを、Netflixでやるから、
それを観たいとねだられまして、お試し入会しました。

しかし、Netflixはヤバイですね。すごい動画の量です。

しかも人気のある番組ばかりです。

これは、流行るわ~という感じです。

このまま行くと、日本のコンテンツ産業も危ないな~という気がします。

しかし、脅威なのは、アメリカばかりではありません。

5G時代のIT覇権は中国に?

先日、NHKを見ていたら、アメリカと中国の経済覇権の話をしてましたが、ファーウェイ問題は、
ITの覇権を中国に奪われるかも知れないというアメリカの危機感が生じさせたものらしいです。

GAFA(ガーファ)や、FANG(ファング)を超える、巨大中国のIT企業が世界を制することになるのかも知れません。

話が大きくなってきて、それが自分たちと何の関係があるかということですが、
自分たちも未来を見据えながら、自分たちのビジネスドメインがどこにあるかを考えていかないといけないな~と
思います。

ホームページ制作業をするにしても、時代に遅れないような先進性をきちんと持って取り組んでいかなければならないと
感じるわけです。

私も、東京の企業のサポートなどをたくさんしていますが、札幌に比べてスピードがすごく速いということを感じます。

その中でも、ブレずに自分自身の目指す方向に向かって、進んでいきたいと感じている最近です。

それでは本年もよろしくお願いします。

新技術には飛びつかない 

ryori

料理を簡単にする商品というのがあります。
普通の食材はそれなりに料理が出来る人でないと扱えません。
一方、レトルトや缶詰、インスタント食品は料理が出来なくても食べる事が出来ます。
この2者の中間にあるのが「料理を簡単にする商品」です。
たとえば、豆腐と混ぜて炒めるだけで麻婆豆腐ができる物などですね。
様々な食材や調味料を用意する手間と時間を省いてくれます。
共働き家庭などの強い味方ですね。

ところが、お店の周りの環境によっては「売れない」商品になってしまいます。

理工系大学近くの学生街なんかだと、その程度の「調理」すらできない人ばかりが周りに住んでいます。
また、古くからの住宅地ですと、手間よりお金を省きたい主婦層が多く住んでいたりします。
お年寄りが多い地域だと、「新らしい使い方」の商品に見向きもしない事もあるでしょう。
そういった立地条件の店では、中途半端な商品となって、売れ残ってしまう訳です。

仕入担当は「東京でヒットした商品がついに入荷できる様になった」といきなり飛びついたりせずに、自分の店舗の周辺にどんな人が住んでいるのかリサーチしておく必要があるでしょう。

ちなみに近所のスーパーでは「料理を簡単にする商品」はよく売れ残ってワゴンセールに入っていました。

ところで、ホームページ制作の世界で中途半端というと何があるでしょう。


少し知識がある方だと「CMSの事では?」と思われるでしょうか。
WordPressに代表されるCMSは多くの場合、ホームページ制作の作業を軽減してくれます。
(時には余計に増やしてくれますが)

ですが、CMSは作るより使う時の利便性に着目するのが妥当な気がします。
料理なら、調理より食べる時の話ですね。
お客様自身である程度の更新をされたいケースなどに向いています。

制作側としては中途半端というケースとして「最新技術」を挙げたいと思います。
最新技術バリバリのホームページを作成すると、意図したとおりの表示が出来る環境は限られてしまいます。
最近は減りましたが、数年前まではCSS3を使うだけで、ちゃんと表示できないケースが多くありました。
現在でもブラウザのバージョンアップで「新たにCSS3の**に対応」なんて事があります。
そんな最新技術を使うと、中途半端な完成度のホームページになってしまう訳です。

これが自分で作っている個人サイトなら「MSブラウザお断り」とか書いておけば済む話でしょうけど、お客様に納品するサイトでそんなまねはできません。
主要ブラウザ(スマートフォン向けサイトならタブレットやスマートフォンを含む)できちんと見えるように「最大公約数」的に技術を採用する形になります。
もちろん、最新技術を使ったのと同じ効果がデザイン上必要なら、他の手段で実装します。
そのため、弊社では「クロームでないと動作しない」というようなサイトは作らないようにしています。


■おまけ1
新技術と似たものに「新機能」というものがあります。
これも考えなしに飛びつくとえらい目に遭う事があります。

windows10のセキュリティセンターの「デバイスセキュリティ」に「コア分離」という項目があり、詳細を見るとそこに「メモリ整合性」という設定があります。
当初は無かったのですが、後から追加された機能のようです。
「攻撃によって悪意のあるコードが高セキュリティプロセスに挿入されるのを防ぎます。」
と説明があり、デフォルトは「オフ」になっています。

では、これを「オン」にするとどうなるでしょう。

実はこの機能(当たり前ですが)「攻撃」かどうかの判定はしませんし、「悪意がある」かどうかも判りません。
なので、正確には「とにかくコードが高セキュリティプロセスに挿入されるのを防ぎます。」という機能です。

その結果、システムの深い部分に影響するソフトの動作を阻害します。
例えば、「アンチウイルスソフト」や「ファイアーウォール」。総称してセキュリティソフトですね。
使っているセキュリティソフトによっては平気かもしれませんが、機能が「動作しなくなる」ソフトもあるようです。
ネットで調べるとグラフィックドライバーが影響を受けた人も居るようですね。

□余談
なぜか「あくい」を変換すると「悪意」ではなく「鮎喰」になる。
MSの辞書のデフォルトは謎変換をしますねぇ。


■おまけ2
新技術と似た概念に「最新版」というものがあります。
ところが、その最新版にとんでもない問題が潜んでいる事があります。

Windowsの更新はアップデートに任せる人が大多数だと思いますが、最新の更新の中には手動で一足先に導入出来るものがあります。
それを利用した人がファイルが消えるトラブルに見舞われたそうです。

「Windows 10 October 2018 Update」提供が一時停止に(ファイル消失報告受け)
http://www.itmedia.co.jp/news/articles/1810/07/news012.html

昔は
 MSのソフトはバージョン3になるまで使い物にならない
とか
 PC98買うなら、発売後3か月過ぎて初期ロットがなくなってから買え
とか言われたものです。
今でも新しい物好きは「人柱」と呼ばれますね。

doya.jpg

GDPRと歴史と権力の話 

180622a.jpg
昔よくあった(今でもあるかもしれませんが)B級SF映画には
 国家が力を失い、企業が人々を支配する近未来世界
を描いたものがいくつもありました。

選挙で選ばれた政治家が統治するのではなく、
投資家(富裕株主)が選んだ巨大多国籍企業の役員が統治する。
そして警察や軍隊も企業がスポンサーとなり、企業の命令で動く。

その支配が「誰を向いて」行われるかを考えれば、それらの映画が何を警告しているのかは明らかですね。

さて、これらの映画などを作ったクリエイター達が危惧する世界ですが、21世紀も始まってしばらく経つ現在、まだまだ空想の産物...ですかね。
某超大国の大統領は商人ですし、某極東の島国の選挙は「報道機関」と呼ばれる「私企業」の思惑に左右されています。

ですが、そういった「考えようによっては...」という話ではなく、本当に企業が人々を支配する流れがあると危惧している人も居るのかもしれません。

欧州連合(EU)が導入した「GDPR」。

ネットで仕事をしている人々であれば、一度は耳にした単語ですね。
日本語では「一般データ保護規則」とか言うようですが、話題になったのはその制裁金の大きさですね。
大企業でも大損害ですが、中小企業であれば会社の消滅は避けられず、その役員は皆自己破産確実な金額です。

そして速攻でグーグルやアマゾンなどネットの世界で支配的立ち位置の数社が告訴されたようです。

このGDPRについては未来への希望ととらえる人も居るようです。

グーグルの支配が終わる GDPRで変わる世界
http://ascii.jp/elem/000/001/692/1692742/

一部の「自称コンピュータ通」の人々がアンチMSの闘士として正義の味方気取りでマイクロソフトを叩いていたら、気が付いたら世界はグーグルの支配下に落ちていた。
...かどうかは判りませんが、多くの企業はグーグルに睨まれれば、消滅の憂き目を見ると言うのも決して誇張ではありません。
検索結果から排除されれば、ネット世界では「存在しない」事になり、21世紀の現代において、「ネット世界に存在しない企業」は人々からは「リアルにも存在しない」と思われる訳ですから。
そういう意味では「グーグルは世界を支配している/しようとしている」と言っても、「その通りだ」と思う人は少なくないのかもしれません。

そしてその支配力は個人にも伸びてきているのかもしれません。

そう考えると、GDPRの登場はその流れに「待ったをかける」きっかけになると期待する人が現れるのも無理のない事でしょう。

ですが
 「普通選挙制度があれば、素晴らしい政治家だけが当選するから政治は良くなる」
とはならないのは皆さんもご承知の通り。
皆が「ダメだろコイツ」と思う人でも、「地元の支持」や「選挙制度のワザ(比例名簿順位1位)」なんかで、普通に当選するのです。

GDPRから始まるであろう流れによって
 「企業ではなく個人がデータを公開する範囲を決める権利を持つ」
と言っても、一部の「IT通」の人を除けば、
 「すべての項目はデフォルト設定のまま」
になるのがオチ。

様々な業界で「読めないような小さな字がびっしり書かれた『規約』をちゃんと読んでる人はいない」は常識となっています。
皆さんも色々なサービスの申し込みで
 「規約に同意して申し込む」ボタンを押すときに、規約を全文読んで、発生し得る様々なケースについて考察し、ボタンを押す前に何時間もかけて大丈夫かどうか検証する。
なんて事はしないでしょう。

結局は「サービス提供側」の思惑通りに事が運ぶでしょう。
その現実の前には、たとえ法規制があっても「ちゃんと了解を取りました」の一言でおしまいです。

GDPRを参考に各国も似たような法律を作るのかもしれません。
それらが「主権国家の最後のあがき」になるのか、「暗黒時代を阻止した光」になるのか。
徳川家でいえば「慶喜(幕府滅亡・徳川家の権力維持も失敗)」なのか「吉宗(中興の祖)」なのか。
同じ「よし」でも結果は随分違ったりしますね。

その昔、
 中国では「鄧小平の背は低い」と言うと、その人は翌日には巷から姿を消す
なんてジョークがありましたが、
 ネット上でグーグル先生を悪く言ったら、その人は翌日には巷から姿を消す
なんてジョークが言われるようになる日も遠くないのかもしれません。
それが単なるジョークで現実に起きる現象でなければ良いのですがね。

■余談
GDPRにはもうひとつの側面があります。
それは、その規定する条件をきちんと満たすことができるのは多大なコスト負担に耐えられる大企業だけ。という点です。
GDPRの施行に合わせて、アメリカ(当然EUから見れば「域外」)のいくつもの企業が「EU圏内の人はサービスを利用できません」という対策を取りました。
IPアドレスを調べて、サイトへのEUからのアクセスを遮断した所もあるようです。
こうなると、本文で紹介したリンク先の執筆者の方の予想とは逆に、サービスの寡占化を進める=グーグルやアマゾン、フェイスブックによる支配を助ける。
という効果をもたらす可能性があります。

そもそも、本当に「グーグルやアマゾン、フェイスブック」といった「アメリカ企業」にとって問題となるような代物であったなら、「アメリカファースト!」のあの方が黙っているとは思えませんよね。
他の事に気を取られて放置しているだけかもしれませんが。

180622b.jpg

古代ローマ、王制を打倒して共和制を続けていましたが、国が大きく複雑化するにつれ、元老院(議会)はその責を全うできなくなります。
やがて遠征で成果を上げた軍人が民衆の支持を集めます。
軍人の政治権力が強まる流れの中、カエサルの暗殺事件が起きました。
GDPRは流れを止めようとしたブルータスでしょうか。それとも流れを決定づけたルキウスでしょうか。
結局ローマは帝政に移行し、共和制は終わりを告げます。

中世ヨーロッパ、ローマ教皇は最高権力者として君臨していました。
ですが、各国の中央集権化が進むにつれ、世俗君主である王の権力がローマ教皇の権力を脅かします。
さらにペスト(黒死病)の流行など、人々を救ってくれない神の権威が低下すると共にローマ教皇の権力も低下していきます。
そしてある日人々が気が付いた時、最高権力者の地位は各国の王に移動していたのです。

江戸幕府、後半には武士の力は減る一方、商人はどんどん力をつけていきました。
歳入が減り、財政難にあえぐ幕府や諸藩、儲けを増やし、力を増す商人。
しきたりや規制で動きの鈍い武家、効率重視で実力主義の商売人達。
黒船が来なくても、数十年後には徳川将軍家は大商人の傀儡になっていたかもしれません。
実際はその前に明治維新が起きて、権力が商人の手に渡る事は無かったわけですが。

いつの時代も、現在の権力者が力を失う中、次世代の権力者が民衆の支持を集めています。
そして権力の交代は革命のような劇的な事例よりも、「いつのまにか」交代している事のほうが多いのです。
それは以前の権力者は名目上の権力を維持し、新しい権力者はその枠の中で実質的な権力を手にするためです。
やがて、状況に慣れ、誰も不思議に思わなくなったころ、名目上の権力も新しい権力者に移るわけです。

そして現代。
各国は財政難にあえぎ、多国籍企業は儲けを拡大する一方です。
民主主義は衆愚制と化して身動きが取れず、巨大企業のリーダーは成功者として尊敬を集める。
彼らは変化の速いITビジネスの世界でAIの助けを借り、ライバルとの競争を制してそのまま世界の支配者への道を歩むことに...。
今度は「黒船」は現れません。(多分)
実際に権力を持つのは経営者なのか株主なのか、それともAIなのか。
B級SF映画の描く未来は、案外現実になるのかもしれません。
180622c.jpg

ホームページを運営している方はアクセス解析を利用していることも多いと思います。
その代表として弊社でもよく利用しているのが「Google Analytics」。
この「Google Analytics」ですが、これまではいくらでも過去にさかのぼる事が出来ました。
(もちろん、Google Analytics設置時点よりさかのぼることは出来ませんが)

ところが、2018年5月25日より、このさかのぼれる期間が制限される事になります。
そのまま何もしないでいると、26か月になります。

そのまま...というのは、この「保存期間」はユーザーが指定可能なためです。

Google Analyticsにログインすると、親切なことに上に青色のバーが出て、your settings から簡単に指定する画面に飛べます。
(バーが出ない場合は、自力で設定画面を探してください。「設定」-「トラッキング情報」-「データ保持」で見つかると思います。)

analytics.png

設定の選択肢の中には「自動的に期限切れにならない」という、これまでと同じ動作になるものがあります。
これを選んでおけば良いでしょう。

5月25日を過ぎると、26か月より古いデータは消えてしまう事になります。
今のうちに設定をしておきましょう。

Googleがこのような制限を導入するというのは、ストレージ容量は無限ではないという事を改めて人々に知らしめる効果...は無いでしょうけど、無限を含むサービスというのはいろいろ厳しい事の表れなのでしょう。


■余談
それにしても、
 以前と同一になる設定が選択肢にあるのに、あえて違う(ユーザーが不利益を被る)指定をデフォルトにする
とは、さすがはIT界の皇帝陛下。
同じことをマイクロソフトがやったら、世界中のアンチMSな方々がMS非難の大合唱を始めることでしょう。
(MSはオフィスの操作系が毎度変わる事でいつも批判されていますが、アレは当人は改良しているつもりで、明確にユーザーに不利益を与えているわけではありません。「使いずらくなった」人は文句を言うけど、「使いやすくなった」人は何も言わない。そこに真理があります。)

もちろん、「以前と同一になる設定」をデフォルトにしたら期限を導入する意味がない訳ですが(^-^;
(既存はそのままで、新規のデフォルトを変える。というのが「ユーザーエネミーではない」企業の普通のやり方ですが。)

ログイン後の画面に目立つ青色のバーを出すあたり、さすがの皇帝も下々から不満の声が出ることを懸念しているのかもしれません。
(Chrome では出ましたが、FireFox ではバーは出ませんでした。それが使ったアカウントの違いなのか、ブラウザの違いなのかは判りませんが...)

ちなみに上の文、以下のように書くと印象がまるで違います。
 新たに制限をかける事にしたけど、ちゃーんと救済のために以前と同一になる設定も用意する
とは、さすがはGoogle様ですネ。

モノは言いようです。

4602741.jpg

検索エンジンの世界で最近大きな動きがありました。
それが表題の「モバイル ファースト インデックス」。

Google検索の結果が変わる大事件です。

...と言っても、ほとんどの人にとっては、そんなに大騒ぎする話ではありません。

では「モバイル ファースト インデックス」とは何なのでしょう。

これを理解するためには、まず、Google先生がどうやって検索結果に表示するウェブサイトの一覧を作っているかを知る必要があります。
とはいえ、そんなに難しい話ではありません。
Googleが用意したロボットと呼ばれるソフトが様々なウェブサイトを読み、それを評価してデータベースに記録する。
そのデータを元に検索結果が作られるわけです。

で、この「評価」の部分が肝なのですが、
これまでは「パソコン用のページ」を読んで評価していました。
別に「スマホ用のページ」があれば、スマホからの検索時には、それによる補正もしていましたが。

それが「モバイル ファースト インデックス」の導入により
「スマホ用のページ」を評価のベースにしたのです。

この結果、どうなるのでしょうか。

それは皆さん、普段やっている検索の結果を見ると良いでしょう。
一部のキーワードを除き
 大して変わらない
のではないでしょうか。

多くの人が検索して上位に来るサイトの多くは「既に」スマホにも対応しています。
そのため、変化に気づく人はあまりいないでしょう。

ただ、企業の方や、個人でも自前のホームページを持っている方は、事情が違いますね。
「自社(自分)のサイトの順位」や「ライバルサイトの順位」が大きく変動しているケースも少なくないでしょう。
他所の変化には気づかなくても、自分(や注目しているライバル)のことだと気づくものです。

では、どういうサイトが「大きな影響」を受けるのでしょう。

実はスマホ対応に着目すると、ウェブサイトには3種類ある事がわかります。

1.スマホに完全対応しているサイト
2.スマホに限定的に対応しているサイト
3.全く対応していないサイト

このうち、1と3には影響はありません。
厳密には3には多少影響が出ますが、それは「モバイル ファースト インデックス」が入る前から微妙に影響していたものが、より大きくなるだけで本質的な影響はありません。

なぜ2が「大きな影響」を受けるのか。

2のタイプには
 パソコン用のサイトはフルコンテンツ
 スマホ用のサイトは簡単な概要だけ
という形式のサイトがよくあります。
アクセスした相手によって、表示するコンテンツのトップページurlを切り替えるタイプです。
スマホ用の部分は大昔のi-mode用のサイトをスマホ用に手直ししただけといったケースもありますね。

この場合、どうなるか。

・ロボットが最初にサイトトップにアクセスします。
・そこで、スマホのサイトに飛びます。⇐[ここがこれまでと違うところです]
・そこから評価を開始。
・リンクをたどって各ページを評価。
・終了。

ここで、サイトトップに戻ってパソコン用のサイトの評価に進むことはありません(と言われています)。
つまり、Googleはスマホ用の簡単な概要だけでサイトを評価してしまいます。
コンテンツ不足で低評価となり、順位が下がるわけです。

ちなみにこのロボットによるアクセスは「あらかじめ」行われるものです。
誰かがGoogleの検索入力欄にキーワードを入れたときにロボットが出動する訳ではありません。
つまり、「パソコンで検索してもスマホ用のサイト評価に従って結果が表示される」のです。

1や3のタイプではリンクされているすべてのページが評価されるので、これまでコンテンツ不足でなかったのなら、これからもコンテンツ不足にはなりません。
SEOをウリ(というか商品)にしているサイトなどでは、3のタイプも「大きく下がる」と脅していたりしますが、それは所謂営業トークと思って、話半分に聞いておけばよいと思います。
もちろん、間違いなく下がるのですが、2のタイプのように劇的な変化は起きないでしょう。
(むしろそういうサイトは古臭いデザインや操作性なので、そちらを気にすべきでしょう。検索結果の前後にいる他のサイトはスマホ対応していることが増えるため、古さが際立ちます。それが直帰率や滞在時間に影響し、結果として「さらに順位が下がる」のです。)

ちなみに1のタイプのサイトとはどんな造りかと言いますと、コレ2つのタイプに分かれます。
1a.レスポンシブデザインでパソコンもスマホも同一コンテンツ
1b.パソコン用とスマホ用で別コンテンツで、スマホ用もフルにコンテンツを用意

昔は1bのタイプが多かったようですが、更新コストが大きいので最近は1aのタイプが主流です。
そういう意味では3のタイプは「1aの出来損ない」と言えるのかもしれません。

ここ数年制作・リニューアルした弊社のお客様のサイトですと、その多くが1aのタイプでのスマホ対応になっています。
Googleが「モバイル ファースト インデックス」を実施することにした背景には
 「スマホからのアクセスが過半数を超えた」
という説明がよく聞かれますが、
 「スマホ対応のサイトが多数派になりつつある」
という事もあるのではないかと思います。

ではどんな対策をすればよいでしょうか。
それぞれ見ていきましょう。

■1a.レスポンシブデザインでパソコンもスマホも同一コンテンツ
■1b.パソコン用とスマホ用で別コンテンツで、スマホ用もフルにコンテンツを用意
「モバイル ファースト インデックス」になったからと言って、新たに何かする必要はありません。
これまで通りのSEOを続けましょう。

■2.スマホに限定的に対応しているサイト
速やかに対策が必要です。
あなたのサイトが検索結果から消え去るのはスマホで検索した時だけではありません。
「パソコンで検索したとき」も同じなのです。
最初に1aか1bのどちらで行くか決めましょう。
お勧めは1aですが、サイトデザインによっては違うかもしれません。

■3.全く対応していないサイト
そのままでも(現時点では)検索結果から消え去る事はありませんが、Google先生は許してもお客さんが許してくれるかどうかは別の話です。

スマホ非対応のサイトをスマホで見ると、目立つものだけでも
 字が小さくて読みにくい
 ボタンやリンクが小さいうえに近すぎて指で正しくタップするのが難しい
 内容が画面からはみ出して見づらい
といった問題があります。

これらはGoogle先生も認識し、あなたのサイトの評価をゼロにはしないまでも、少しずつ悪化させています。
あなたのサイトが
 「全世界で唯一の独自コンテンツでライバルなど居ない」
とか言うのでなければ、近いうちにリニューアルをするべきだと思います。
たとえ
 「ウチのサイトはPC専用のツールやゲームを配布しているだけだから、スマホで見るやつはいない」
場合でも、スマホ対応しないと検索結果の順位が今後徐々に下がっていくのですから。
2と比べれば緊急性は低いのですが、逆にその分時間をかけてリニューアル計画を立てて実行すると良いでしょう。

◎余談
エルシャダイというゲームの素材がフリーで使えるようになったそうです。
エルシャダイ 無料倉庫

daijyobu.jpg

「大丈夫だ。問題ない。」
2のタイプのサイトの場合、その先のシーンは...。
(気になる方はゲーム自身のCMを見ると良いでしょう。)

Python&Try 

python-logo-master-v3-TM.png 最近話題の人工知能ですが、その人工知能関連のプログラムで使う言語としてよく名前が挙がるのが「Python」です。
そんな事もあり、弊社でもPythonについて色々調べ始めました。

■環境を作ろう

Pythonはプログラム言語ですが、同時に動作環境でもあります。
昔あったDISK-BASICや、webではよく使われるPHP同様、コンパイルして実行ファイルを作るのではなく、テキストファイルのソースをそのまま1行づつ解釈して動くもの(インタプリタ)だからです。
そのため、動作する環境を作らないといけません。

人工知能用言語のように言われているからと言って、特別な機器は必要ありません。
普通にwindowsパソコンで環境を作れます。
https://www.python.org/ からインストーラをダウンロードして、インストールすると環境が出来上がります。

ちなみに、これでインストールするPythonはwindows用といっても、ウインドウの開く普通のアプリではありません。
コマンドプロンプトで動作するので、まぁ、DOS用ソフトのような感覚で居ればいいでしょう。

なお、私の環境ではパスが長すぎるとか表示が出て、環境変数の追加ができませんでした。
環境変数PATHの指定がないと、コマンドプロンプト上で起動するときに不便なので、インストール後にpythonと打ってみて
「'python'は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。」
なんて言われたら、PATHにインストール先を追加しましょう。

私がインストールした時は、デフォルトに任せたら
C:\Users\********\AppData\Local\Programs\Python\Python36-32
(******** はユーザー名)
などという、とんでもない所に入りましたが。
(普通は C:\Program Files (x86) とかに入るものですが...)


■サンプルを動かそう

ネット上には検索すれば色々なサンプルが見つかると思います。
また、Python関係の書籍が手元にあれば、それにも掲載されているでしょう。
と言う訳で、とりあず簡単なサンプルが動けば、正常に環境ができたと言えるでしょう。


■ライプラリを追加しよう

Pythonがなぜ人工知能に向いているのか。
色々理由はあるようですが、一番大きなメリットが「人工知能用のライブラリが豊富にある」でしょう。
別にライブラリさえあれば、どんな言語でも(どんなと言っても限度はありますが)問題ないのですが、C#やphp、Javaなどより充実しているので、向いているとされているのでしょう。
で、そのライブラリですが、付属している pip というツールで簡単に追加できます。

コレも私の環境ではpathが通ってないので、パス指定して起動しました。
Python本体はpathを通していましたが、pipはさらにその下のディレクトリに入っているので、通っていなかったのです。
人工知能とは無関係ですが、plotly というライブラリを追加したときは、こんな感じになりました。
C:\Users\********\AppData\Local\Programs\Python\Python36-32\Scripts\pip install plotly
本来なら
pip install plotly
で済みます。


■webで動かそう

Pythonですが、phpと同様にweb用に使うことも出来ます。
ただ、そんなに向いてはいないと思いました。

・phpのようにhtmlとプログラムコードを「混ぜて」記述することはできません。
 これは個人的には問題なしです。混在しているのは見難くて好きではないので。

・環境によってはperlよろしく最初に#!でpythonのパスを指定しないといけない。
 これはローカルで開発して本番サーバーにアップというやり方をする際に不便極まりないし、ローカルでは動いていたのに本番では動かないという事故の元なので、パスの指定が要らないようなやり方があれば、採用すると良いでしょう。
 ちなみに弊社のサイトが使っているサーバーでは不要ですが、ローカル環境では必要でした。


■ライブラリを使ってみよう

さて、環境も出来て、動作確認もできました。ライブラリのインストールも出来たようです。
少なくともインストールではエラーは起きていません。
本当にライブラリが正しく入っているのか確認するためにも、ライプラリを使ったプログラムを動かしてみることにしましょう。

使ったライブラリは「ライプラリを追加しよう」で入れたグラフ用のライブラリである「plotly」です。
人工知能用のライブラリはすぐに使うにはハードルが高いので、今回はグラフ用のを使うことにしました。

今回やってみたのは、最終的に plotly.offline.plot を使ってグラフを表示するhtmlファイルを生成するというものです。

グラフのサンプルをダウンロードする
zipを解凍して、ブラウザで開いてみてください。

コレ、マウスで動かすとぐりぐり動くグラフですが、htmlファイルと言っても、実際に出力されている内容はほとんどjavascriptコードです。

以下のようなPythonのプログラムで生成させました。
ちなみにmathは標準で入っているので、別途ライブラリを入れる必要はありません。
import plotly
import math
import plotly.graph_objs as go
from plotly.graph_objs import *

t1 = 1
p1 = 1.6
r1 = 20
r2 = 6
xx = []
yy = []
zz = []
for t1 in range(1,100):
	xx.append( r1 * math.cos(t1) + r2 * math.cos(p1) * math.cos(t1) )
	yy.append( r1 * math.sin(t1) + r2 * math.cos(p1) * math.sin(t1) )
	zz.append( r2 * math.sin(p1) )

trace1 = go.Scatter3d(
    x=xx,
    y=yy,
    z=xx,
    mode='markers',
    marker=dict(
        sizemode='diameter',
        color = 'rgb(255, 0, 0)',
        colorscale = 'Portland',
        line=dict(color='rgb(200, 200, 255)'),
        opacity=0.9,
        size=2
    )
)

data=[trace1]
layout=dict(height=700, width=600, title='3d グラフサンプル')
fig=dict(data=data, layout=layout)
plotly.offline.plot(fig, filename='g3d.html')
与えているデータは適当で手抜きです。
というかプログラム自体も手抜きですが、動作確認だけなら問題ないでしょう。
ちゃんとやればもう少しマシなグラフになると思います。


という訳で、今回はPythonの話題をお送りしました。
なお、どうでもいい話ですが、タイトルと見出しの命名基準は騎士と魔法の世界に行ってしまったプログラマーのコミックス風になっております。

怪現象 

kai1.jpg

日々サイト制作をしていると、色々な「怪現象」に遭遇します。今回はそんな「怪現象」をいくつか集めてみました。

■fireworksステートが独立していない怪

fireworksという画像を扱うソフトがあります。
web制作では非常に便利なソフトですが、現在開発元では提供が終了している残念な状態だったりします。
で、このfireworksの機能として「ステート」と「レイヤー」があります。

レイヤーは多くのお絵かきソフトで採用されているので、なじみのある方も多いと思います。
昔のアニメのセルのように複数のレイヤーを重ねて1枚の画像を作ります。

ではステートとは?
これは多くのレイヤーから作られた一つの画像を「ひとまとめにしたもの」と思っていただければ良いかと。
どんな時に使うのかといいますと、例えば見出しを画像で作るときに使ったりします。
背景として画像を置き、装飾の画像をいくつか重ね、最後に文字を入れる。
そして文字だけ違う見出しが何個もあるので、その分ステートを作る。
といった感じになります。
レイヤーだけでも文字部分の表示/非表示の切り替えで実現可能ですが、よりスマートに行えます。
なお、他にもアニメGIFを作るのにもこの機能が使えます。

あるとき、見出し画像を作るため、ステートを複製して、出来たステート2の文字を書き換えると、なんと、ステート1の文字まで変わっているではありませんか。
ステート2の文字を書き換えただけなのに、触ってもいないステート1の文字まで変わるとは、是如何に。


すべてのステートには同じレイヤーが存在します。
「ステート1」に「レイヤー1」「レイヤー2」があれば、
「ステート2」にも「レイヤー1」「レイヤー2」があります。

通常は各々のレイヤーは独立しているので、
 「ステート1」にある「レイヤー1」を変更
しても
 「ステート2」にある「レイヤー1」
は変わりません。
ですので、文字だけとか、色味だけを書き換えたステートを作ることで、同じデザインの同じ大きさの画像を作ることができます。

さて、以下はあるfireworksの設定のメニューです。
レイヤーを選択して出る設定メニューになります。
kai_stat.png
「レイヤーを複数ステートで共有」という項目があります。
これが今回のお題。
曲者な機能です。
この機能がonになっていると、そのレイヤーは他のステートにあるそのレイヤーと「同一」のものになります。
例として「ステート1」は「レイヤー1」に文字、「レイヤー2」に背景というつくりだとします。

kai1a.png
ここで、ステートを複製して同じ内容の「ステート2」を作ります。
そして「ステート2」の「レイヤー1」の文字を書き換えます。
通常はこれで文字だけ違う2つの画像が作られます。
kai2a.png
もし、ここで「レイヤー1」が「レイヤーを複数ステートで共有」になっていると、どうなるでしょう。
「ステート2」の「レイヤー1」の文字を書き換えると、「ステート1」の「レイヤー1」の文字まで同じ内容になってしまい、ステートを分けた意味はありません。

通常はこの「レイヤーを複数ステートで共有」は指定されていないものですが、複数の人で共同で作業している場合など、知らないうちに指定されていることがあります。
そうするとソフトが予想外の動きをする事態に遭遇して「ぎゃあ、元データが消えた!」と慌てる事になるわけです。

■空の子テーマを作っただけで動作が変わる怪

wordpressでサイトを制作する場合、デザインやそのほかの機能の実装のために、市販されていたりフリーで提供されているテーマを利用することが一般的です。

その場合、通常は子テーマを使って行います。
テーマは時々アップデートされたりしますので、テーマ自体を書き換えると、アップデートができないorアップデートすると変更した部分が消える。という事態になりますから。

さて、あるテーマ(activelloと言います)で作成していた時のこと。
まずは単に何も変更しない空の子テーマを作成しました。
そして制作中のサイトを表示してみると、スマホ用メニューがおかしな挙動をするではありませんか。
元々おかしかったのかというと、そうではありません。
子テーマを指定せず、直接元のテーマを指定すると、正常に動作しています。

何も変更していないのに、動作がおかしくなるとは、是如何に。


実はそのテーマ、bootstrapを利用しているのですが、bootstrap のスタイルより先に親テーマのstyle.cssが読み込まれるため動作が変わってしまったのです。
元のテーマで動かしたときは、bootstrapのスタイルの後にテーマのstyle.cssが読み込まれるため、順番が逆となり、上書きされるスタイルの部分で問題が発生したのです。

子テーマなし
 bootstrapのスタイル
 テーマのstyle.css

子テーマあり
 親テーマのstyle.css
 bootstrapのスタイル
 子テーマのstyle.css

この問題は子テーマの function.php の theme_enqueue_styles() に
wp_enqueue_style( 'activello-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
のような内容を追加して、先に bootstrap のスタイルが読まれるようにすると解決します。
つまり

子テーマあり(対策後)
 bootstrapのスタイル
 親テーマのstyle.css
 子テーマのstyle.css

とするわけです。


■ウインドウの幅を縮めただけで画像が離れる怪

縦に3枚の画像を置いている時のお話。
普段は3枚の画像の上下に隙間はありません。
sukima1.png
そこではスタイルで画像の最大幅を100%にしているので、ブラウザ幅を狭くしていくと、画像は縮小されていくのですが、ある程度以上狭くすると2枚の画像の間に隙間が現れるという怪現象が。
sukima2.png
隙間を開けていないのに、勝手に隙間が開くとは、是如何に。


実はよく見ると3枚全てではなく、狭い画像の上にだけ隙間が現れます。
(vertical-align:bottom;が入っているため、下には現れません。なお、もっと幅を縮めると、「一番下の画像の『上』」にも隙間が出るので、一見上下に隙間があるように見えます。)

実は解決策の一つは画像を囲む要素(この時はdiv)にline-height:0;を指定する。というものです。
どうやらこの現象、縮小された結果、画像の高さがline-heightの指定を下回ると発生する様です。
(他にも解決策はあります。ポピュラーなものとしては、画像をblock要素にするというものがありますね。)


■コピー先にフォルダが存在しないのに「上書き確認」が出る怪

windows7(の標準機能)でCDの書き込みをしようとしたところ、フォルダの上書き確認が出ました。
uwagaki.png
しかし、コピー先は空のCD。

何も無い所にコピーするのに上書き確認とは、是如何に。


実はそのフォルダの中身は空でした。
空のフォルダをCDにコピーしようとすると、この画面が出るのです。
そのため、中に何かファイルを入れると、出なくなります。


■一度httpsでアクセスすると、httpでアクセスしてもhttpsに勝手に変わる怪

httpsをサポートするサイトが増えてきましたが、httpで開いたにもかかわらず、httpsに変わってしまうことがあります。

httpでアクセスしているのに勝手にhttpsになるとは、是如何に。


これには「最初から」そうなるケースと「過去にhttpsでアクセスしたサイトの場合」そうなるケースがあるようです。
前者はサイト側でそういう設定をしているのですが、後者はそうではありません。

この現象、単純なサイトなら問題にはなりませんが、外部スクリプト等を使っている場合、httpのアクセスが止められて動作障害の原因になったりします。

これは別のスタッフが遭遇した事案の為、詳しくはかけませんが、対処法は、
・別のブラウザでアクセス
・プライベートブラウズの機能を使ってアクセス
などがあります。
あと、ブラウザが持っているそのサイトに関する情報を消すと元に戻るようです。
(キャッシュの削除では戻らないようです。キャッシュとは他の情報の模様)


■フォームに値を入れて送信すると、入れた項目により正常だったり404エラーになったりする怪

wordpressを使っているサイトを作成しているときのことです。
日付を入れるフォームを作成しました。
年・月・日を別々の数値入力にしているフォームです。
月に値を入れたときは正常なのですが、年や日に値を入れると、
なんと
 「お探しのページが見つかりません。」
に。

urlが勝手に書き変わっている訳ではないので、アドレスバーを選択してEnterを押すとちゃんとフォームの送信先ページが表示されます。
(もちろん、フォームからの送信では無くなるため、受け取る値は何もない状態ですが)

ページがあるのに無いなどというとは、是如何に。


実はwordpressにはフォーム項目として使ってはいけないものがあります。
それが原因でこの不可思議現象が起きたのでした。
この事例では year, day が該当します。
month は該当しないため、問題が起きなかったわけです。
解決策は簡単ですね。名前を変えればいいだけです。
その時は yearは byear 、day は bday にしました。

来年(平成30年)、札幌市産業振興センター主催の
「第2回 ソーシャルビジネス起業塾」で
弊社社長、佐藤がゲストスピーカーを務めることになりました。
詳しくは、札幌市産業振興センターへお問い合わせください。
お問い合わせ先電話番号:011-820-3122

以下チラシより

第2回 ソーシャルビジネス起業塾

"いかに活発な産業活動を喚起していくか?"をコンセプトに、様々なノウハウを
多角的に学び、ソーシャルビジネスという視点で起業能力の向上を図る。
また、参加者同士の交流や講師との意見交換を通し、ソーシャルビジネスの起業を促す。

●講義内容
開催日:1/11(木)第1講「今、なぜソーシャルビジネスなのか!」
時 間:13:30から16:00
講師:朝岡経営事務所所長 朝岡 敏春

開催日:1/18(木)第2講「ソーシャルメディアの効果的活用法」
時 間:13:30から16:00
講師:朝岡経営事務所所長 朝岡 敏春
ゲストスピーカー:株式会社ディーエーオー 代表取締役 佐藤 拓也

開催日:1/25(木)「ビジネスを変えるマーケティング発送」
時 間:13:30から16:00
講師:朝岡経営事務所所長 朝岡 敏春
ゲストスピーカー:北星学園大学経済学部 経済情報学科長 西脇 隆二

●会場:札幌市産業振興センター
●場所:札幌市白石区東札幌5条1丁目1-1

【お申し込み・お問い合わせ先】
札幌市産業振興センター
電話:011-820-3122(平日9:00~17:00)

●主催:札幌市産業振興センター 後援:札幌市

img02.jpgimg01.jpg

スタイルシートの小ネタ 

pc.jpg
今回は色んなサイトを制作しているときに使用したり、使用を検討したスタイルの指定から、変わったものを取り上げてみます。

●丸付き数字
一般の文書では良く見る丸付き数字ですが、webの世界ではあまり使えませんでした。
以下の文は一文字目が丸付き数字です。
----------------------------------
① 写真はjpgが向いている。
② イラストはpngが向いている。
③ 悩んだら両方保存する。小さい方を使えばいい。
----------------------------------
上の様に書いた場合、日本では比較的シェアの高い環境(WindowsとiOS)では問題なく表示されています。
ですが、他の環境(他のOSで使用するブラウザ次第)では文字化けになっている事があります。
これ、直接「①」と書かずに「&#」から始まる文字列を使って「①」(①)と書くと、表示出来る環境が大きく広がります。
実用上は問題ないでしょう。

ですが、文字としての丸付き数字は20までしかありません。
そこで、cssで丸を付けるようにすると、30でも40でも100でも1000でも行けるわけです。
実例は下記サンプルをご覧ください。
どんなスタイルを使っているかは、下記サンプルのソースをご覧ください。

サンプルを見る

実際にはうまく丸にするには、文字サイズや桁数に応じた調整が必要です。
しかもブラウザによって挙動が違うという。
サンプルではChrome用に違うcssを記述しています。(Chromeだけはそのままだと縦長になるため)
で、Chrome用のcssハックを入れたら、iPhoneのSafariで副作用が出たので、Retina用のスタイルを入れて、Safariは元と同じ指定になるようにしています。
cssの指定は、後の指定で前にある指定を上書きできるので、「想定外の物まで影響を受けた」ら、それだけを戻す事が出来るわけです。

サンプルには「一文字目を丸付きにする」という事例がありますが、これはHTMLを触らずにcssだけで解決を図ったというレアなケースが元です。

なお、誰もやらないと思いますが、数字ではなく■のような一部の記号を相手にした場合、Firefoxではうまく動作しません。
(一部の記号に対してFirefoxでは一文字目の判定が誤動作するため。丸を実現するcssとは関係ない。■から始まる行が並んでいるとき、行頭の■だけ色を変えるといったケースでも、Firefoxだけ色が変わらないという事に。)


●回して目立たせる
文章や見出しで注目してほしい所があるとします。
普通は色を付けるとか、マーカーのように背景に色を付けるといった事を行います。
しかし、様々な事情で異なる対応をする事もあります。

あるときは最後に☆を付加しました。
もちろん、これだけでは別に目立ちません。
そこで、これに動きを付ける事に。

サンプルを見る
(ページ自体は先のサンプルと同じです)

これも、実際には回す文字の種類やサイズによって微調整が必要です。
適当にやると文字の中心と回転の中心が異なってしまいます。

まぁ、これを利用する機会というのはほとんど無いような気がしますね。


●色んな時代のバナー
ホームページのデザインは時代によって変化しています。
その変化をバナー広告で表してみました。

サンプルを見る
(これもページ自体は先のサンプルと同じです)

と言っても、本当にその当時のバナーを出している訳ではありません。
(1995年は弊社の創業前というのは置いといて)
その当時風のバナーを現代のcssで作っています。
どうでもいい事ですが、html自体は全てのバナーで同一です。
(テキストリンクまでバナー用htmlで再現という技術の無駄遣い)

この小ネタはhtmlが同一でも、cssだけでまるで違うものが作れるという事例です。


●実は縦でも良い
最近のcssではレスポンシブの為にメディアクエリを使うのが一般的です。

@media only screen and (max-width: 480px){
}

のような感じで、横幅に応じてスタイルを切り替えるのに使われています。

でも、これ、別に横幅専用の機能ではありません。
縦でも機能します。

@media screen and (max-height: 800px) { /* 高さが足りない時 */
}

みたいな指定をした事があります。
これは下にあるサムネイルをクリックすると上にある大きな画像が切り替わるというページで、高さが足りないとサムネイルが隠れるという事態に対し、操作性を確保するため、高さが足りない時はサムネイルを小さくするという処理を入れたときのものです。
media.png

要は()の中には判定基準になるものなら、何を入れても良いわけです。
上の丸付きで使った「-webkit-min-device-pixel-ratio」なんかも判定基準の一つです。

「判定基準になるもの」自体はそんなに色々ありませんが、面白いものとして表示領域が縦長か、横長かを判定するものがあります。
例によってサンプルをご覧ください。

サンプルを見る
(例によってこれもページ自体は先のサンプルと同じです)

どんな時に使うのかは微妙ですね。あまり実用例を見た事はありません。


●非互換とバグ
プログラムにはバグと呼ばれる不具合が付きものです。
ゲームの場合、「裏技」と呼ばれるものの中には、このバグを利用したものがあったりします。
で、ブラウザもプログラムである以上バグと無縁という訳にはいきません。
これもサンプルをご覧ください。

サンプルを見る
(毎度のことながらページ自体は先のサンプルと同じです)

IEが特定の条件で不思議な動作をしています。

常に起きるバグというのは、簡単に見つかるので修正も早いのですが、発生条件が限られる場合は、なかなか見つからないため、長らくそのままになる傾向があります。
おせっかい親切にバグ報告をする場合、細かい条件も添えて報告すると良いでしょう。
119に電話して「すぐ来て下さい」で電話を切ったら、何らかの手段で場所は何とか判っても余計な時間がかかりますし、誰かが倒れて救急車が必要なのか、火事で消防車が必要なのかすら判りません。
ですので、そんな電話は珍しいのでしょうが、ネットの世界の問い合わせなんかだと普通に「見れません」の1行だけのメールが来て、何処の誰が何を見て言っているのかすらわからないなんて事が珍しくないと、あるクライアントの人が愚痴をこぼしていました。
(業種にもよるのでしょうが、弊社にはそういう「難解」な問い合わせは来ていないようです)


というわけで、今回はスタイルシートについて取り上げてみました。

1  2  3  4  5