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

社長

  • スタッフブログ

スタッフブログ

1  2  3

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

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

ウェブマスター向け公式ブログで、

日本語検索の品質向上にむけてと題して

Google は、世界中のユーザーにとって検索をより便利なものにするため、検索ランキングのアルゴリズムを日々改良しています。もちろん日本語検索もその例外ではありません。 その一環として、今週、ウェブサイトの品質の評価方法に改善を加えました。

と発表しました。

具体的には、一般におまとめサイトと言われる、キュレーションサイトに対して、評価を下げるという対策を打ち出したということです。

明らかに、DeNAが運営し、問題となったことも影響していると考えられますが、多くの人たちが検索をするとキュレーションサイトが上位に出てきて、どれもこれも似たようなコンテンツで同じようなことを書いていて、どこかのライターさんがコピーだとバレないようにリライトしているため、日本語のつながりがおかしくなっていたり、信憑性の無い情報になっていることに不満を持ったためと考えられます。

その不満の矛先が、Googleに向かい、Googleも対応せざるを得なかったということでしょうか。

話は、少しずれますが、YouTubeも検索すると、YouTuberと思わしき、静止画に文字が流れるようなコンテンツが幅を効かせ、見ている人たちの不満がたまってきているので今後対策されそうな気がします。

ということで、内容云々ではなく、誰が言っているのか、そしてサイトそのものに好感度が持たれるかどうかが重要になっているんでしょうね。

と書いているときにも、クライアントから電話が来ました。

その方が言うには、お客さんから

「ネットで検索したら、営業しているのに、本日休業と書いてあった。そしてお客さんが書き直せるので書き直しておいたよ。」

と言われたそうです。

それでびっくりして、

「うちのホームページは誰でも書き直せるのかい?」

と質問してきたのです。

通常のホームページが誰でも簡単に書き直せることはないので、私の方で

「恐らく、口コミサイトかなにかでしょう。最近、そういうキュレーションサイトが上位に上がってきてるんですよ...」

と説明をしました。

メインサイトよりもそういうサイトが上に上がってくるというのは、ちょっと問題だと思います。

Googleにも真剣に対策をして欲しいところです。

しかし、最近の人工知能は、すごいことになっているので、日本語の解析もどんどん進化して、
それがオリジナルなのか、コピーなのか理解できるようになっていくのではないかと思います。

Fotolia_121518785_XS.jpg

最近、キュレーションサイトに絡んで、オウンドメディアを運用しようという提案が多くなってきています。

価値あるホームページを作るのは大変ですね。

wp-loadの利用 

弊社がお客様のサイトを制作する場合、ワードプレスを利用してサイトを構築するケースもよくあります。
その中には、それまでのサイトをリニューアルする際に、ワードプレスに移行するというパターンもあります。
ところが、元のサイトにPHPで制作された独自仕様のシステムが組み込まれたページがある場合、ワードプレスでそのページを再現するのが難しい事があります。

そんな時の対応策はいくつかありますが、メジャーな物は3つあります。

1.固定ページでphpを動かすプラグインを利用する
比較的小規模なものなら、この方法が使えます。
セキュリティ的には勧められないので最近はあまり見かけなくなりました。

2.テーマを編集し、専用のテンプレートを作成する
独自システムのパターンが少ない場合はこの方法で組み込んでしまうと、作成・更新が管理画面から行えるので便利です。
大抵はこの方法が選ばれます。

ですが、システムが複雑だったり、工数を抑える必要がある場合、またはお客様が間違って編集される事を防ぎたい場合は、もう一つの方法を取ります。

3.wp-loadでデザインを反映させる
元のコードを極力そのまま使いつつ、デザイン部分をワードプレスに依存させる事が出来ます。
ページ自体は普通のphpのページですが、require_onceを使って wp-load.php を取りこむことでワードプレスの機能を利用できるようになります。

もっとも、そうすると
 「システム自体の修正などのとき、本番でしか動かなくなってデバッグが大変ではないか?」
なんて疑問を持つ方も出るかもしれませんが、そこは対応策もあります。

デザインのみであれば、環境によって切り替えてしまえば問題ありません。

wp-load.png

ローカル環境で開発することで、効率確保もOKです。

オウンドメディアとは? 

最近、オウンドメディアという言葉がよく使われます。

アメブロを運営している、サイバーエージェントも、Ameba Ownd(アメーバ・オウンド)というサービスを開始しました。

しかし、オウンドメディアって何なのか? よく分からない方も多いと思います。

ブログみたいに新しいサービスなのか?と 考える人もいるかも知れません。

広義のオウンドメディアとは、自社所有の媒体という意味になります。

例えば、ホームページ、ブログ、ツイッターアカウントなどのことを指します。

狭義では、企業が運営するウェブマガジンやブログをオウンドメディアと呼ぶらしいです。

日本では、企業が運営するウェブマガジンを指していることが多いようです。

確かに、ネットで検索して見ていると、そんな感じのサイトが多いですね。



オウンドメディアとは、別にPPC広告、バナー広告等、支払を伴い費用対効果を重視するペイドメディアや、
ソーシャルネットワークのように、信用や評判の獲得を目的とするメディア、アーンドメディアも存在します。

ペイドとは、お金を支払うこと、アーンドとは、信用、評判のことを指しています。

なぜ、最近、オウンドメディアが取り上げられてきたかと言えば、サーチエンジンが

SEOのリンク主義から、コンテンツ主義への変化しているということが挙げられます。


サーチエンジンが、リンクよりもコンテンツを重視しはじめているということなのです。

今後、インターネット上での存在感を維持していくには、内容のあるコンテンツ、面白いコンテンツ、

価値のあるコンテンツを豊富に作り続けるということが大切になります。

私たちも、以前の考え方にしばられることなく、新しい価値を提供できるように変わっていかなければ
ならないことを実感させられます。



日本語変換のATOKやワープロソフトの一太郎で知られるジャストシステムが、最近人工知能(AI)についての調査結果を発表しました。

「職業別の仕事と人工知能に関する実態調査」(調査期間は2016年8月5~8日、有効回答は20歳~69歳の会社員、経営者、公務員の1106人)

それによれば、「将来的に全てが人工知能やAIに置き換わると思う」と答えた人が最も多かった職種は、
1位が「販売・接客」で14.6%
2位は「企画・マーケティング(14.3%)」

「将来的に一部のみ人工知能やAIに置き換わると思う」と答えた人が最も多かった職種は、
1位「医師・看護師」の45.8%
2位「金融関連業務(41.2%)」
だったそうです。

へえ~という感じですが、最近ソフトバンクのPepperにもIBMのAI Watsonが搭載されたそうです。
こういうのを見ていると、「販売・接客」が人工知能に取って代わられそうなのは、想像出来ますね。

pepper_section3.png

企画やマーケティングなんかもビッグデータを活用して、AIが機能すれば、人間が考えるよりもかなり大胆でユニークなアイデアが出てきそうな気がします。

我々みたいなホームページ制作業なんていうのは、自動化できるところは多いですが、
デザインなどクリエイティブで、ひらめきやセンスが必要とされるものについては、
まだAIが追いつかないのではないかと思います。

AIがデザインしている様子は思いつかないですからね...

しかし、今度のAIの普及は、第4次産業革命とも言われていますから、今後どのように発展していくか目が離せないところです。

先日ウェブの仕事でお付き合いのあった方の本(自費出版)を、電子書籍として出版するお手伝いをしました。
電子書籍としては、AmazonのKindle用の本として作成しました。

作業内容としては...
 書籍の原稿データから、テキストデータを取り出し、別途作成した表紙画像と共にepub形式に変換。
 これをzipに書き換えて※解凍し、html他のファイルを編集して微調整を加えます。
 再びepubに戻し、Kindle Previewerで内容を確認。
 調整・確認を何度か行った後、AmazonのKindle ダイレクト・パブリッシングに登録。
といった流れになります。

denshisyiseki.jpg

epub形式はファイルとしてはzip形式で圧縮されたファイルです。
そのため、拡張子を変えれば、特にツール等を用意しなくても、普通に解凍できます。

個人での自費出版には多額の費用がかかるうえ、販売チャンネルも無く(書店・問屋は基本的に自費出版を扱ってくれません)実現は非常にハードルの高い物で、そのお付き合いのあった方も苦労されていましたが、電子書籍としての出版であれば、費用も掛からず販売チャンネルも一般の書籍と同じようにアマゾンで販売されるため、ぐっと身近なものになったのではないでしょうか。

電子書籍の作成では、上記作業内容のように、まだ一般の方には難解な部分はありますが、弊社ではその部分を代行する業務を今後展開していきたいと思っています。

なお、Kindle用の本というと、Kindleを買わないと読めないと思われる方もおられると思うのですが、スマホやPCでも読むことが出来ます。
つまり、アマゾンが使える人なら、だれでも読むことが出来るのです。
電子書籍化あるいは電子書籍のみでの出版にご興味のある方は、ぜひお問い合わせください。

Googleのウェブフォントが便利 

最近は、海外のサイトなんかでは、ウェブフォントを使ってデザインするのが
主流になってきているのですが、日本でもGoogleがウェブフォントを
フリーで提供したことで、その利用が促進しそうです。

私の会社でも先日、ウェブフォントを使って、デザインをしてみましたが、
GoogleのNoto Sans Japaneseというウェブフォンは、太さも、100~900までと
細い文字から、太い文字まで指定できて非常に良い感じです。

ライセンスは、Apache License, version 2.0ということで、
自由に使って良いし、料金も取られません。

notosans.jpg

使い方は簡単です。

<style>
  @import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
</style>

とスタイルに記述して、

あとは、それぞれのCSSのclassもしくは、idに下記を指定するだけです。
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
手順は簡単で、しかもとても便利です。

今後のウェブサイトは、スマートフォンから、パソコン、
あるいはテレビまでのあらゆるデバイスに対応しないといけないので、
ウェブフォントを使って、折り返しが臨機応変に対応できるというのは
非常に有難いことです。

欲を言えば、ゴシック体のNoto Sans Japanese以外にも、
明朝体のフォントが増えてくれると非常に有り難いですね。

Googleさんに期待しております。

waifu2xを試してみました。 

最近スタッフの間では人工知能に関する事が話題になっています。
とはいえ、具体的な事例というと、ビッグデータ処理等といった漠然としたものが多くて、一般の方に説明してもメリット等がうまく伝わりづらいわけですが、中には今回紹介するような判りやすい物があります。

それが waifu2x。( http://waifu2x.udp.jp/

画像を拡大する処理に人工知能が活用されています。

それでは、実際に画像を処理してみます。

...そういえば、このwaifu2xは聞くところによると「『俺の嫁』画像を大きくしたい」という事で作られたそうなので、その真価を確認するためには「俺の嫁」画像が最適なのですが、残念な事に現在弊社が権利を持つ画像にはイマイチ「俺の嫁」には不相応な気がする画像しかないので、「誰かの親父」画像でご了承ください。

元の画像
2倍拡大画像(大きいので一部を表示しています)
普段業務で使用しているソフトで拡大した画像とwaifu2xで拡大した画像を並べてみます。 下がwaifu2xで拡大した画像です。



いかがでしょうか。
違いがはっきり出ていますね。
このシステムの場合、アニメ調の画像にフォーカスした拡大処理となっていますので、システムが得意そうな画像を用意してみました。

人工知能というと、大規模システムでの話とか、映画の中の出来事というイメージがあるかもしれませんが、最近では将棋でプロ棋士を破ったり、この事例のように画像処理をしたりなど、身近なものになりつつあります。

Googleの新しいロゴについて 

数日前ですが、Googleのロゴが新しくなりましたね。

最近、エンブレムやロゴなどでデザインの盗作が騒がれておりますが、デザインというのは、時代に伴って、その時のトレンドというものを取り入れながら、変わっていきます。

Googleは、今回これまでのエンボスや、影を使ったデザインから、丸みを帯びてシンプルなフラットデザインに変わりました。

iOS7で取りれられたフラットデザインが、マイクロソフトのWindows10やGoogleの新しいロゴにも波及してきて、Appleのデザインに対する先進性が窺い知れます。

スティーブジョブズがデザインに対して、並々ならぬパッションを抱いていたことは知られています。

ブランディングで尊敬する阪本啓一氏は、今AppleのDNAはGoogleに引き継がれ始めているということを言っていましたが、本当にそのとおりなのかも知れません。

GoogleLogox2-Animated.gif

もうすぐAppleの発表会ですが、今後も私たちをビックリさせるデザインを見せてくれるのか気になるところです。

Googleのロゴの話から、Appleのデザインの話になってしまいました。

スマートフォンを使っていると、時々通知が送られてきます。
この通知、何も操作をしていないのに、勝手に届きます。
これが「プッシュ通知」と呼ばれているもので、ユーザーが何か操作をすることを「プル(引く)」と表すのに対し、サーバー側から行うものなので「プッシュ(押す)」と呼ぶようです。
もちろん、誰彼構わず所構わず送られてくるのではなく、「プッシュ通知」に対応したアプリがスマホに入っている時のみ送られてきます。

さて、このプッシュ通知ですが、例によってスマホの種類によって異なります。
AndroidとiOSでは異なる内容になるわけです。
それでも、この両者の違いを少しでも減らす取り組みというものが、世の中にはいくつかあります。
プッシュ通知を受け取った後の処理はOSが違えば全く異なるため、こちらはどうにもなりませんが、通知を送る側の処理は一本化が可能なのです。

今回とりあげる「Kii Cloud」もそういったものの一つです。

kii.png
Androidでプッシュ通知を行うために「Kii Cloud」を利用しました。
「Kii Cloud」では通知を送る側の処理のみならず、受ける側用のライブラリも提供し、開発負担の軽減につながるようになっています。
なお、通知を送る側(サーバー)には通知を送る機能の他に対象となる端末の情報を保存しておく機能も必要です。
「Kii Cloud」では保存機能もあるので、別途情報保管用のサーバーは必要ありません。

で、そのプッシュ通知を送るという行為は簡単に出来たのかと言うと、世の中そんなに甘くは無いのでした。
サンプルには10分で出来ると書いてあったんですがねぇ。

 「ナナハンに乗りたくば、まずは自転車に乗れるようになれ」

なんて格言があったかどうかは知りませんが、通知以前にAndroidのネイティブアプリの世界の用語や様式、しきたりや方言といったものを知るのが先でした。
(さすがにここはハイブリッドアプリの出番ではありません)
java自体は大したことは無い※1のですが、Androidというシステム自体が持つ不安定さ※2や他と異なる独特の文化※3と合わさった事が結構な壁として立ちはだかり、10分で出来る(とされている)サンプルを動作させるのに10時間以上かかったりしました。

※1
Javaは隣の事は一切関知しないと言うお役所のような少々融通の利かない言語ですが、別に大きな問題ではありません。
むしろ変数の有効範囲において人類皆兄弟とでも言いそうなBASICのほうが「扱いずらい」です。

※2
頻繁に仕様が変わるから本やweb上の情報の多くが「古くて使えない」うえ、開発環境まで動作が不安定になりやすい。
AndroidはGoogleが提供しているものですが、オープンソースなモノたち同様の不安定さを持っています。

※3
ここで言う「他」とは「MS-DOS」「Windows」「web」のこと。
あくまで文化の話なので、マルチタスクやイベント駆動型、非同期処理といった技術の話ではありません。
(webから入ったヒトではないので、その辺は問題ない)
まぁ一言で言うなら「日本語でOK」。
(ドキュメントが英語しかないと言う意味ではなく、dos、win32や.NET、PHPなどの世界の言葉・習慣とAndroidの世界の言葉・習慣はいろいろ違うという事)

とりあえず、一つの壁は突破したので、一歩前進です。
異文化交流に苦しむのもいつまでも続く事ではないでしょうから。

それはともかく、本を書く人は教員免許を取るか、塾で講師をするか、家庭教師の経験を持った方が良い。
せめて起承転結や5W1Hが存在する理由を考えてから書こうよ。
 「build.gradleに追加します」・・・build.gradleって2つあるよ、どっちだ?※4
 「作って入れます」・・・どこに?なんという名前で?
 「で、出来上がりです」・・・出来上がるとどうなるのだ?動かすと何が起きる?
といった肝心なところが欠如している解説が多くて困る。
blogにまでそういったクオリティは求めないけどさ。あるに越したことは無いが。

※4
実は build.gradle のソースに入っている英語のコメントを読めば判るが、それを読めと言う説明すらない。
Kii Cloud のドキュメントでは場所によっては「どこにあるbuild.gradleか」を説明しているものもあります。
(全部ではありませんが)


■余談
某所にあった通知が来ると言うサンプル。
通知が来た時に何が起きるか書いてない。
何も起きないから通知が来ていない=動作していないと思ったら大間違い。
実は「何も起きない」が正解。
他の通知を受け取ったとき通知のリストを出したら、そのリストに入っていたと言う。
「何も起きない」なら「何も起きない」と書きなさい。

(ノティフィケーションの場合)プッシュ通知は「通知が来た」事を知らせる動作と、通知リストに内容を入れる動作の2つからなる。
そのサンプルは「通知リストに内容を入れる動作」だけが実装されていたという訳。
でも、そのことはどこにも書いてない。
書いた本人は「通知リストに内容を入れる方法を書いた」ので、他の動作の事は全く触れていないということなのでしょう。

断片的情報は使えないという一例です。

個人情報保護法が、施行されてから10年近くがたちますが、10年ぶりに法律が改正されて、

今まで以上に個人情報の取り扱いが厳しくなりそうです。


私(佐藤)の会社も電気通信事業者なので、下記の案内が来ておりました。

privacy.jpg

平成27年6月4日(木) 14:00~16:00

(1)「個人情報の保護に関する法律の改正について」
   講師:新保 史生 氏(慶應義塾大学総合政策学部 教授)

(2)「電気通信事業者の個人情報保護取組み状況」
   講師:小堤 康史
  (一般財団法人日本データ通信協会電気通信個人情報保護推進センター 所長)

せっかくなので、今後個人情報保護法がどのように変わるか、話を聞いてきます。

円山動物園で平成26年12月21日に生まれたホッキョクグマの赤ちゃんが、4月1日に一般公開されたので週末に見に行ってみました。

お客さんがたくさん見に来ているので、姿を見るのは大変ですが、母親のララと戯れる姿は微笑ましいです。

photo01.jpg

寝ていることもありますが、タイミングが良ければ可愛い姿を見る事ができます。

photo02.jpg

春の空 

天気が良いのでお昼に近くの石屋製菓「白い恋人パーク」へ行ってみました。
春の花を期待していってみたのですが、思ったほど花はありません。
それでも観光客の人たちがたくさん来てにぎわっているようです。

白い恋人パーク

札幌の雪は融けてしまっていますが、まだ春と言うには早いようで、パーク内の装飾は冬のものになっています。
青い空が綺麗ですが、これはこれでチョットさびしい感じがします。

白い恋人パーク

先日「サザエ食品」が事業の不振で清算され、石屋製菓の子会社が事業を継承するという記事を見ました。
近くの西友にも「サザエ食品」が入っていてお昼に利用する事があり、サザエが無くならないで良かったと感じていたところでした。

また花のある頃に行ってみようとおもいます。

Firefox 36がHTTP/2に対応 

会社でもよく使われている、Firefoxが2月24日、最新のバージョン36に更新されました。

FF36.jpg

http://www.itmedia.co.jp/news/articles/1502/25/news051.html

今回の目玉の機能は、今月17日に正式な仕様として承認されたばかりのネットワーキングプロトコル「HTTP/2」をフルサポートするということです。

HTTP/2については、下記のスライドシェアでいろいろと説明されていますが、HTTP/1.1の非効率な部分を解消して、またいろいろと新しい機能がついているようです。

ブラウザでのプッシュ通知もできるようになりそうです。

HTTP/2は現在広く使用されているHTTP/1.1との互換性を維持しながらも、新たな機能や特徴が複数盛り込まれていて、多くのリクエストを同時に転送可能にし、通信時の負荷も少なくすることが可能になるのだそうです。

米GoogleのChromeブラウザも次期アップデートから段階的にHTTP/2をサポートすると発表しているので、今後HTTP/2への流れが加速しそうですね。

みんながよく使っているWeb ServerのApacheなどで使えるようになるか気になるところです。

HTTP/2が普及すると、ホームページでさらにリッチなコンテンツが可能になりそうです。

今後もHTTP/2についての情報を収集したいと思います。

第66回さっぽろ雪まつり 

今日から「さっぽろ雪まつり」が始まり、期間は2月5日(木)~2月11日(水・祝)となっています。
昨日は会社からの帰りに大通公園へ行って写真を撮ってみました。

地下鉄を西11丁目で降りて向かったのは『雪ミク』です。
まだ作業中でしたが、丁度完成する直前だったようで、公式写真の撮影するタイミングを見る事ができました。
去年と似たような雰囲気ですね。

yukimatsuri_001.jpg

5丁目では人形劇とオペラの融合『雪の国のアリス』が
上演されるようでリハーサルが行われていました。

yukimatsuri_002.jpg

雪の雪像も良いですが、氷の氷像も綺麗です。
夜はライトアップされるので、より綺麗に見えますね。
昨日は満月だったので、雲から顔を出す月が幻想的でした。

yukimatsuri_003.jpg

道庁前の『アカプラ』では『ユキテラス2015』が行われています。
地上から上がるライトの光が雲を照らします。
雪が降ったらどんな感じに見えるのでしょう。

yukimatsuri_004.jpg

また時間があれば見に行ってみたいです。

1  2  3