• お気軽にお電話下さいTEL:0116686551
  • メールでのお問い合わせはこちら、お問い合わせフォーム

社長

  • スタッフブログ

スタッフブログ

1  2  3  4

新技術には飛びつかない 

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にはフォーム項目として使ってはいけないものがあります。
それが原因でこの不可思議現象が起きたのでした。
この事例では yrear , day が該当します。
month は該当しないため、問題が起きなかったわけです。
解決策は簡単ですね。名前を変えればいいだけです。
その時は yrear は 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行だけのメールが来て、何処の誰が何を見て言っているのかすらわからないなんて事が珍しくないと、あるクライアントの人が愚痴をこぼしていました。
(業種にもよるのでしょうが、弊社にはそういう「難解」な問い合わせは来ていないようです)


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

SEOについては様々なテクニックがあるのですが、そのうちの一つに「ページのサイズを小さくする」というものがあります。

別にgoogle先生が表示時間を計測して評価をうんぬんという話ではなく(それもないとは言い切れませんが)、ページの直帰率・滞在時間など「人間の反応」が変わってきて、それがSEO効果の違いとなって現れるのです。

以前と違い、外にいてスマホでサイトを見る人も増えていますから、光回線や高速WiFiが当たり前と思っていてはいけません。

soto.jpg

では、どうするとページのサイズが小さくなるのか。

文章を減らす...では意味がありませんね。
そもそもページ容量の大半は画像が占めています。
ですので、画像を「軽く」する事がサイズの縮小に繋がります。

ここで「軽く」と書いたのは、小さくすると言っても「画像の面積を減らすという話ではない」という事を明確にするためです。

使う画像がどんな画像かに合わせて形式(jpg/png/gif)を使い分けるのは原則ですので、今回は省略します。

今回は、PNG画像に焦点を当ててみます。

PNGを使う場合、漫然と使うと32bitになってしまい、結構なサイズになりかねません。

24bitPNGが使えるツールをお使いであれば、透過が不要な画像は24bitPNGにするとよいでしょう。

逆にいえばアルファチャンネルの透過が必要なら32bitという話なのですが...この常識が変わるかもしれません。

実は、PNG画像を圧縮してくれるwebサービスがあったりします。

オンラインイメージ最適化ツールOptimizilla
http://optimizilla.com/ja/

早速試してみましょう。

以前waifu2xを試した時と異なり、今回は画像処理に関心のある方々が見ても残念な気分にならない画像があるので、そちらで試しましょう。

元画像 234KB
400.png

圧縮画像 68.2KB
400-min.png

実にー71%。大きく縮みました。
画質も違いがほとんど判りません。

...と、書くと、
「それ、単に8bit化してるだけじゃね?縮んで当然。無知乙」
とか言われそうですね。

では、某高額画像処理スイートにて出力させた画像と比べてみましょう。

アルファチャンネルありの8bitPNGで書き出してみました。

某出力画像 61.6KB
400_r1_c1.png

サイズはこちらのほうが小さいようですが、画質はOptimizillaと比べると...。

まぁ上に示したように某高額画像処理スイートの8bit出力結果が残念なため、上では「透過が必要なら32bit」と書いたのですが、Optimizillaではフリーでこの8bit化性能です。

この場で取り上げたくなったのも判っていただけるかと思います。

当然の事ながら、元々8bit256色の場合、あまり差は出ないようです。

waifu2xの時に使ったオッサン画像に再登場して頂きましょう。

元画像 14.5KB
moto256.png

この場合、圧縮画像のサイズは 12.6KB でした。
わざわざ処理するまでもない僅差ですね。

画質は元が8bitですから、違いは人間には分からないレベルなので、圧縮画像の表示は省略しました。


同様のサービスとしてTinyPNGというものもあります。

TinyPNG
https://tinypng.com/

こちらは英語のサイトなので細かいところは分かりませんが、同様の技術を使っているようです。

やはりこちらも無料。
ついでにアニメーションPNGにも対応しているようです。


昔はインデックスカラーを使った透過GIFをよく使ったものですが、境目がくっきりしずぎるので、最近は見なくなっていました。
でも、再び8bit画像の時代が来るのかもしれませんね。

ブラウザで非互換のお話 

ブラウザで非互換という話題になると、真っ先にというか、唯一叩かれるのがIEですが、今日のお話はChromeです。

スタイルシートの記述で
word-break:keep-all;
というものがあります。
これはスタイルシートリファレンス(http://www.htmq.com/style/word-break.shtml)によると
「言語に関係なく単語の途中では改行せず、単語の切れ目で改行されます。」
という機能の記述です。

では
「・一番目の項目 ・2番目 ・3番目である」
という文があった時、幅が狭くなるとどこで改行するでしょう。

主要ブラウザはこの場合以下の様な動作をします。

IE , firefox 空白で改行
Chrome ・で改行

この結果

IE , firefox では

・一番目の項目 ・2番目
・3番目である

と表示される幅の時、Chromeでは以下のような謎動作になりました。

Chrome(Safariも同じ)
・一番目の項目 ・2番目 ・
3番目である

13224368.jpg

レスポンシブデザインでなければ、好きな所に改行を入れればいい話なのですが...。
ですが、その時作成していたページはレスポンシブだし、ChromeとSafariはスマホファーストの世界では「スタンダード」。

結局pの文章にするという安直な方法はやめて、
ul li を使い inline-block を指定してブラウザに関係なく
・一番目の項目 ・2番目
・3番目である
という表示を実現。
(なお、inline-blockにするとリストのマーカーは出ないので、やっぱり頭の・は必要だったりします。)

安直な方法でも目的が達成されるなら「良い方法」なのですが、ブラウザによる挙動の違いは「複雑な方法」を強いる訳です。

以前は「IEさえなければ」という声をよく聞きましたが、今後は違う声を聞く事になるのですかね。
まぁ、アンチMSは良くいますが、アンチGoogleは聞かないので、「Chromeさえ...」という声は出ないのかもしれませんが。
ただ、近年のGoogleは、過去の「ナンバーワン企業」同様の悪い病気が進んでいるような気がするので、先の事は分からないですね。


■補足 ナンバーワン企業の悪い病気 「昔な、**という者がおったんじゃ...」
その昔ナンバーワン企業として知られたある会社がありました。(いや、今でも存在していますが。)
ジャイアンぽいので、ここでは仮にJ社としておきましょう。
J社のワープロソフトは日本中で使われ、日本一有名なソフトハウスでした。
みなJ社のフロッピーディスクをパソコンに入れて(「入れて」と言うのは比喩ではなく、実際に差し込むのです)使っていました。
当時はハードディスクが普及途上で、各社のソフトはパソコンにフロッピーディスクを入れて、パソコンの電源を入れるという起動方法が主体でした。

どのメーカーもインストーラを用意しておらず、ハードディスクでソフトを使うには、「腕に覚えのある」人がマニュアルを読みながら手作業でインストールしていたのです。
そんなとき、ある小さなソフトハウス(長いのでH社としましょう)が各社のソフトを自動でハードディスクに入れてメニューに登録し、簡単に起動できるソフトを作りました。
そしてH社は各社にインストールとプログラムの起動に関して自分らの解釈(インストール動作等)が正しいか問い合わせを送りました。
ハードディスクへのインストールの解説が無いソフトも普通に沢山あったためです。
問合わせを送った全てのメーカーから回答が返ってきました。
それにより、動作の正しさが確認されましたし、一部処理を修正したり、見落としていたツールも登録するようにしたケースなどがありました。
その中でただ一社だけ「回答しない」という回答を送ってきたメーカーがありました。
それがJ社です。
パソコンソフト界の巨人J社は弱小H社を見下し、ビジネスに非協力な姿勢を取ったのです。
まぁ、向こうからすれば、人のビジネスに寄生する「コバンザメ」のように見えたのかもしれません。
ですが、もしそうだとしたら、その見方はユーザー不在の尊大な物ではないでしょうか。
ほかの諸メーカーと異なり、当時はまだ小さかったパソコンソフト・ハードの市場を活性化して「みんなで幸せになろうよ(win-win)」という発想が出来なかったのでしょう。
3435187.jpg
それから約10年後。

ウインドウズの時代になり、巨人J社のワープロソフトも当然のようにウインドウズに対応しました。
しかし多くの人がJ社のワープロを捨て、MSワードを使い始めます。
アンチMSの人は大勢いるのに、J社のソフトを使おうとキャンペーンを張る人や雑誌等は見かけませんでした。
結果J社のソフトは全然売れなくなり、有象無象のメーカーの一つに成り下がりました。
ワープロソフトはそのままMSワードが標準の地位につきました。
でも、業界では「かわいそうだ」とか「なんとかしましょう」、「日本語ワープロを外資にやられて悔しい」なんて声は出てきません。

ナンバーワンが、いつまでも「わが世の春」を謳歌出来ないのは、世の常の様です。

藤原道長「この世をば わが世とぞ思ふ 望月の 欠けたることも なしと思へば」
平時忠「平家にあらずんば人にあらず」

藤原氏も平家も没落しました。

「Googleにあらずんばウェブサービスにあらず」
今はそんな時代ですかね。

Wordpressでサイトを構築する案件において、投稿に対するコメントを使用する要件がありました。

色々と調べて対応した内容を簡単にご紹介いたします。

今回の要件ではコメントにタイトルの項目を追加したいとのことでしたが、Wordpressのコメントにはタイトルの様な項目はありません。
ネットで検索すると、コメントにフィールドを追加する方法はいくつか見つけることができます。
themesフォルダにあるfunction.phpに、フィールドの追加と保存の処理など追加し、ダッシュボードのコメント編集でもフィールドを追加するところまで紹介されていました。

実際にはサイトの画面でコメントの返信、編集、削除まで可能にできましたが、今回はフィールドの追加のみのご紹介です。

フィールドの追加には「comment_form_field_comment」を使いましたが、記事を書きながら調べてみると「comment_form_defaults」を使った例もありました。

前者はコメント欄のテキストフィールドに、タイトルの入力欄を追加して返す方法。
後者はコメントで使用するフィールドの配列で、こちらにタイトル用の入力欄を追加する方法。
後者の方がスマートな感じがします。

入力情報の送信と保存は「comment_post」「edit_comment」を使い下記のタイミングで「add_comment_meta」「update_comment_meta」「delete_comment_meta」を実行。

・コメントがデータベースに保存される直前に実行する。
・データベース内でコメントが編集・更新された後に実行する。

code_20170713_01.jpg

記事のコメント欄には下の画像の様に、タイトルの入力欄が追加されます。
ソースコードが必要な方は検索すると見つかると思います。

r_comment_add01.jpg

ダッシュボードからのコメント編集でタイトル欄表示させます。
「add_meta_boxes_comment」で入力欄を追加します。

r_comment_add02.jpg

ここが本題ですが、コメントの編集方法はもうひとつあり、コメントの一覧表示からクイック編集でもコメントの編集が可能です。

r_comment_add03.jpg

こちらが通常のクイック編集の画面です。
追加したタイトルの入力欄がないので、更新するとタイトルが消えてしまいました。

r_comment_add04.jpg

ネットで検索してもコメントのクイック編集については、情報がなかなか見つけられませんでしたが海外のブログに情報がありました。

ただ、紹介されていたコードはwordpressのバージョンが古いのか、wordpress 4.8では名前のフィールドに値が入ってきませんでした。

ブログにも記載されていましたが、既存の入力欄が「wp-admin/includes/template.php」に記載されているので、そのコードを使って記述を変更すると問題なく表示されました。
名前フィールドのIDが変わっていたのようです。

code_20170713_02.jpg

参考のコードではコメント欄の上に「名前」や「メールアドレス」の入力欄がありましたが、テキストエリアの下にフィールドが配置されるように変更してみました。

r_comment_add05.jpg

情報がなかなか見つからないのは必要性があまり無いからなのかもしれません。
今回は情報が見つかって助かりました。

グーグルマップに図を描く 

ホームページを制作していると、グーグルマップを利用する機会が多くあります。
大抵は単に地図として埋め込んでいるだけですが、たまには違う使い方をする事もあります。
下図をご覧ください。
gmap.png
これはグーグルマップに4つの三角形を重ねたものです。
もちろん、マップをコピーしてフォトショで加工した...という話ではありません。
以前にも紹介しましたが、グーグルマップのAPIを使うと出来ます。

今回はソースも示しましょう。

[html]
<div id="map"></div>
ここにマップを表示します

[style]
#map	{
	width:600px;
	height:500px;
}
マップのサイズを縦500ピクセル横600ピクセルにします。

[script]
	var originLat = 43.0901767;	//中心位置 緯度
	var originLng = 141.2751628;	//中心位置 経度

	function initialize(){

		var center = new google.maps.LatLng(originLat, originLng);

		var myOptions = {
		  zoom: 11,	//拡大率
		  center: center,
		  panControl: false,
		  zoomControl: true,
		  mapTypeControl: false,
		  scaleControl: false,
		  streetViewControl: false,
		  overviewMapControl: false,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById("map"), myOptions);

		//三角形を描く
		//緯度±0.06度、経度±0.1度の範囲に4つの三角形で四角を描いてみます
		draw(map,"#ff0000",0.07,-0.1,0.07,0.1);
		draw(map,"#00ff00",0.07,0.1,-0.07,0.1);
		draw(map,"#ff00ff",-0.07,-0.1,-0.07,0.1);
		draw(map,"#ffff00",-0.07,-0.1,0.07,-0.1);
	}
	
	//三角形描画
	function draw(map,col,lat1,lng1,lat2,lng2)	{
		//三角形なので3点を指定
		var triangleCoords = [
			new google.maps.LatLng(originLat, originLng),
			new google.maps.LatLng(originLat + lat1, originLng + lng1),
			new google.maps.LatLng(originLat + lat2, originLng + lng2),
		];

		bermudaTriangle = new google.maps.Polygon({
			paths: triangleCoords,
			strokeColor: "#222",
			strokeOpacity: 0.8,
			strokeWeight: 1.25,
			fillColor: col,		//塗りつぶし色
			fillOpacity: 0.3	//塗りつぶし透明度
		});
		bermudaTriangle.setMap(map);

	}

	google.maps.event.addDomListener(window, "ready", initialize());	//実行
このくらいの簡単な内容で描画できます。
ちなみに中心位置は弊社のある場所辺りです。

なお、APIを使うにはAPIキーというものが必要です。
Google Maps APIのサイトで入手できます。

access.jpg

webサイトを制作すると、その効果を知りたくなるものです。
ただ、一口に効果と言っても色々な意味があります。
以前であれば「古くから営業している店が新しくサイトを作った」というケースのように「サイト作成前」「サイト作成後」の売上・来客の違いをざっくり体感で判断という感じでも良かったのでしょうが、既にサイトがあってそれをリニューアルした場合などは、そのような大雑把なものでは困るケースも少なくありません。

アクセスがどれくらい増えた
どこからアクセスが来た

お客様も「経験値」が増えていますから、色々な「値」を知りたくなるわけです。

そういったとき、昔から使われているのが「アクセス解析」というツールです。
最近ではGoogle アナリティクスを利用するケースが多いですね。

しかし、コレひとつあれば全て済むかというと、そうではないケースもあったりします。
Google アナリティクスは専用のスクリプトコードをhtmlに入れなければ動作しません。
リニューアルの場合、旧サイトには入っていないというケースもあります。
そうなると、「リニューアル後の様子は調べられるが、以前と比較できない」という問題が発生します。
それなのに、クライアントから「比較できるようにしてくれ」という要求も出たりします。

無いものとどうやって比較しろと?
(緑のペンで赤い線を引けという話は有名ですかね。)

そんなときに「無理です」と言っていたのではプロの名折れ。

そもそも昔のアクセス解析は、ページにスクリプトなど入れなくても、webサーバのログを使ってやっていたのです。
ただ、それを解析するツールが出すレポート表示が微妙なものだったのと、それを実行するにはサーバ運用の専門家並みのスキルが必要だったため、最近はあまり使われなくなっただけです。
(Google アナリティクスの解析結果はwebページ上での操作だけで見れますので、一般の方やデザイン会社や商社の方でも容易に解析結果を参照できます)

で、そのツールですが、高度な解析をしてその結果をわかりやすく表示できるものがあったりします。しかも、解析と表示を分離可能な形で。

weblogexpert.png

WebLog Expert Lite」というツールで、バージョンアップを重ねて今や9.3(2017年現在)。ちなみに10年前に窓の杜で紹介されたときは4.1だったようです。

昔のツールは解析ツール自身が解析結果を表示していたため、結果を見るには見る人が解析用の情報をサーバから取り出してツールに読み込ませ、ツールを操作する必要がありました。
(上で「サーバ運用の専門家並みのスキルが必要」と書いたのはこのため)

ところが、このツールは出力を自分の画面には出さずHTMLファイルを書きだすため、「結果だけ納品」が出来ます。
HTMLなら誰でもダブルクリックで見る事が出来ます。
そして解析内容も高度で「今時」の要請に十分応えてくれます。

ちなみにこのツール、公式サイトが英語表示で、ツール自身も英語表示しかありませんが、解析結果は日本語で出力できます。
(要Language Packs追加)
クライアントに英語を読ませるなどというクレームが来そうな事態も回避できます。

weblogexperthtml.png

とりあえず、リニューアル前後のひと月くらいは比較のためにこのツールで出力した結果を見てもらい、以後は新サイトに設置したGoogle アナリティクスで現状を自分で見ていただく。
こういった対応も出来ると思います。

ホームページ制作の仕事をしていると、他のホームページで使われている画像を見て、

これと似たようなイラストが欲しいな~と思うことがあります。

音楽などでも、テレビなどで音楽が流れてこの曲名なんだっけ?

ということがあり、曲名が分からなくて、イライラすることがあります。

この原稿を書いている時に、Webで検索してみたら、鼻歌で曲名を言い当ててくれるアプリがあるそうです。

soundhound.png

SoundHoundというアプリで、

・音楽を聴かせればその楽曲の情報を検索してくれる
・お店などで流れている音楽はもちろん鼻歌でもOK
・精度はほぼ百発百中、楽曲データベースも豊富

なんだそうです。

早速スマホに入れてみました。

あっ、今回話しをしたいのは音楽の話ではなく、画像の話です。

似たような画像、イラストが欲しい時に、似たような画像を検索してくれるサービスがあります。

それは、Google画像検索です。

<a href="https://images.google.com/?gws_rd=ssl">https://images.google.com/?gws_rd=ssl</a>

で似たような画像を検索してくれます。

gimage.jpg

そうすると似た画像を探したい元画像を添付します。

gimage2.jpg

そうすると似た画像をたくさん呼び出してくれます。

そこには、素材を販売しているサイトなどが出てきますので、そこから購入するなどすれば、

ウェブ制作の素材として、利用することが出来ます。

Googleは、人工知能を使って画像の解析を行っておりますので、

非常に優秀で、思った画像を見つけてくれることが多いです。

よろしければ、一度利用してみてはいかがでしょうか?

Bootstrapと印刷 

PCからスマホまで対応するレスポンシブなサイトの制作をする際、色々な方法があります。
大きく分けて
 全て自前で書いていくケース
 WordpressなどのCMSを導入し、デザインをテーマによって規定するケース
がありますが、その中間的な方法があります。

デザインを色々規定している「フレームワーク」というものを利用するケースです。
そのフレームワークの一つに「Bootstrap」というものがあります。
今回はそのBootstrapを利用した時のお話です。

クライアント様から依頼されたサイト制作が最終段階に入って色々チェックをする事になりました。
そこでクライアント様は各ページを印刷して、赤入れをしようとされたのです。

ところが、ブラウザで表示されているサイトを印刷しようと印刷プレビューを出してみると...

通常表示されているものとえらく違ったものがプレビューに出てきました。
「これでは修正指示が出せない」
という事で、印刷プレビューを修正する事になりました。

この印刷プレビュー、画面と印刷の解像度の解釈が異なるためか、広い領域があるのにスマホ用メニューが出ていたりします。
それだけならまぁ「困った表示だな」で済むのですが、どうも挙動がおかしい。

リンクの横にurlが書いてあってメニュー表示のレイアウトが崩れたり、背景を印刷する設定になっているにもかかわらず、背景が真っ白。
もちろん、ブラウザが動作不良を起こしているのではありません。

printsample.png
(↑はあるサイトで印刷プレビューを出した例です)

実はBootstrapの仕業。
印刷時のスタイルが指定してあり、その中で背景を「!important」を付けて透明に置き換えているのです。
スタイルシートは後から書かれたものが有効になりますが、さすがに「消されたもの」を復活せることはできません。
かといって背景指定に全て「!important」を付けてBootstrapのスタイルに「勝つ」ようにするのはあまり現実的ではありません。
そのため、Bootstrapのスタイルシートの中にある「@media print」の部分を全てカットして対応しました。
ちなみにリンクの横にurlが出ているのも同じくBootstrapが追加していたのが原因なので、こちらもそれで解消です。

なお、リンクの横のurだけでしたら
@media print {
  a[href]::after {
    display:none;
  }
}
とBootstrapのスタイルシートより後に読み込む自前のcssに入れておけば消せます。
(a[href]::after を印刷時に別の目的で使っていると、そっちまで巻き添えになるのでご注意)

19561416.jpg

世の中便利な物は色々ありますが、思わぬ副作用があるケースもあるというお話でした。

1  2  3  4