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

社長

  • スタッフブログ

スタッフブログ

1  2  3  4

スタイルシートの小ネタ 

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

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

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

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

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で拡大した画像です。



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

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

1  2  3  4