カテゴリー別アーカイブ: WEBページ

今週の1枚──さあ、SVGの出番だ!

svg

これは今のところ、Retinaディスプレイを備えたMacにしか当てはまらないことなのかもしれないのだけれど、実はAndroidのスマホなんかでもRetinaディスプレイを超える解像度のものがあったりします。WindowsのノートPCなどでも、高解像度のものがどんどん出ていますよね。
だから、今後はもっともっと気にしておかなければいけないことなんだろうなと思い、ちょっと記事にしてみました。

冒頭の画像は、ご存知この淡波ログのヘッダに使っているもの。
「PNG」と書いてあるほうが先週までのヘッダで、「SVG」と書いてあるのが現在のもの。
明らかに、シャープさが違いますよね。

普通のWEBページだと、大きめの画像を用意しておけばそれなりにきれいに表示されるのですが、Wordpressだとそうはいかないんですよね。Wordpress上の画像管理システムである《メディアライブラリ》に画像を登録する際、自動的に何種類もの画像サイズが生成されて、その画像を表示する端末に最適なサイズのものを自動的に選択してくれるようになっているのですよね。
これ、便利なようでいて、実はとてもおせっかいなくせ者。
(もちろん、僕がWordpressの扱いを熟知していないから、という前提もありますが、ね)

Retinaディスプレイは非常に解像度が高いため、画像表示の仕組みが通常とは違います。普通は1ピクセルを画面の1画素として表示しますが、Retinaでは縦横2ピクセル分(=4ピクセル)を1画素として表示します。画面上の1画素のサイズが細かいため、そうしないと表示する画像が小さくなりすぎてしまうのですよね。そうならないようにcss上で指定してあれば問題なく、つまり画像を用意した人が思った通りの大きさに表示してくれるのですが、Wordpressのシステムでは前述のように扱うため、ページの作者が特別なcssを書かない限りそのまんまで表示しようとします。
まあ、僕も難しいことは全然わからないのですが、なにしろ、Wordpress側が小さめの画像を用意し、それをMacが拡大して表示するという訳のわからない状態になるのです。
だから、自動的に変換、リサイズされた画像は、RetinaMacで見るといつもボケボケのものになってしまうのですよね。

これは寂しい!

そこで、ない頭を絞って考えました。
冒頭に書いたSVGというのは、Scalable Vector Graphicsという言葉の略。つまり、解像度に縛られないベクター形式の画像フォーマットなのです。これが線画などだったら分かりやすいのですが、普通の画像でもその利点が生きるかどうか、試してみたのです。
ベクターグラフィックを扱えるフリーのソフトといえば、Inkscapeです。
これにヘッダの画像を読み込み、単純にSVGで保存してみました。

すると、ちゃんとSVGとして解像度フリーになっていました。
これまではボケボケだったヘッダ画像が、ついにきれいな画像になりました!

やり方は簡単ですが、一つだけ、大事なコツがあります。

ベクター画像を扱うソフトには《アートボード》という考え方があります。
ビットマップ画像を扱うソフトで新たな画像を読み込むと、ドキュメントのサイズは《その画像のサイズ》になりますよね。
でも、ベクターのソフトでは、ドキュメントサイズはあくまでも起動した時に出る初期設定サイズのままです。
例えば、A4サイズなどですね。

Inkscape起動時のアートボード
Inkscape起動時のアートボード

そこに画像を読み込んでSVGで書き出せば出せるのですが、アートボードごとの画像になってしまいます。これでは、白い画像の中に浮いている形になり、どうにもこうにも使えません。画像のサイズもきちんと調整しないと、アートボードの外にはみ出た部分は切り落とされてしまいます。

解決方法はこちら。簡単です。

1.ファイルメニューのドキュメント・プロパティーを開きます。

スクリーンショット 2016-07-24 16.20.18

 

 

 

2.《カスタムサイズ》という項目の中に、《Resize page to drawing or selection》というボタンがあります。これを、押すだけです。

スクリーンショット 2016-07-24 16.18.33
画像を読み込んだだけではアートボードをはみ出していますが……

 

瞬時に、ドキュメントサイズが画像サイズと同じになりました。

そして、上のメニュー画像にもある《Export PNG image…》で書き出すだけです。
(Inkscapeの画像書き出しには少しクセがあります。まず《Export as..》で書き出し場所を指定してファイル名を入れ、次に《Export》ボタンを押すと書き出されます。不思議な仕様ですね……)

もし、きれいなはずの画像がボケボケに表示されてしまう現象に遭遇したら、是非、SVG画像を使ってみてくださいね!

では、また明日!

この記事が、いつか誰かの役に立ちますように!


《天使は、実在した──!》これがウワサのリアルマジックSF最新作。映画的な展開を意識した、ノンストップアクションSF中編小説です。


最近、かなりカオスになってないか?

最近、かなりカオスになってないか?
この淡波ログって……
統一性やスマートさより《情報量の多そうなゴッチャリ感》を優先しているというわけでもないのに、どうもごった煮的になって久しい。

そこで淡波は考える。

ブログには、何だって書いていいんじゃないか?

ブログ指南の記事にはこんなことが書いてあった。
「全てのブログはレビュー。あなたの一番興味のあることにフォーカスして書くべきだ。一番詳しくて、一番書いていて楽しいことを書くべきだ。よく分からないことがあれば調べ、勉強し、更に詳しくなるのだ。それが、読者を惹きつけるコツだし、そうでないことを書けば読者は離れていく。ブログ記事を10本書くなら、8本までは同じカテゴリーのことを書くべきだ」

それはもちろん、基本的に正しいと思うんだけれど、じゃあ自分たちのような《自称作家》は、何を書けばいい?
文学論? 書評?
どうもしっくり来ないし、もしそういうものばかりを書き続けられたとしても、そこに自分の小説の読者となり得る人が来てくれるかどうかなんて分からない。
少なくとも小説が嫌いな人は対象じゃないかもしれないけれど、ガチガチの小説好きだけが対象の小説を書いているわけでもない。
どちらかと言えば、《映画やコミックが好きで、小説もマア読むよ》。というタイプの人に、僕の書いている作品は向いているんじゃないのかな、と思ったりもするし。

僕は素人作家に過ぎないけれど、ブログにはどんな内容の記事だって書いていいんじゃないかと思う。それこそ、いろんなことを知らないと、考えないと小説なんて書けないし、狭い世界に固める必要なんてない。
書く小説のジャンル・内容が決まっている作家もいるだろうけど、僕はあまりジャンルを固定していないし、とにかくいろんな人に読んで欲しいのだ。絶対楽しめるんだから!
だから、自分のジャンルから外れてしまう恐れなんて、抱く必要はない。
だから、入り口は広いほどいいんじゃないかって、ね。

最近ちょっとCG関連の記事が多いかもしれない? なんて思いながらも、週に一本程度だから、CGに興味がない人を邪険にしてるってこともないよね。
そもそも自分自身が仕事でCGを作っているのにも関わらずそれとは関係のない小説を書いているわけで。
SFやファンタジーを好きな感性と、CGを好きな感性とは通じるところがあると思うし、絵や写真やCGの表現のこと、詩や小説、いろんなこと……

誰だって、たった一つのことだけに興味があるわけじゃないし、いろいろなことに興味を持つ中で面白そうな小説を見つけてくれたら、それでいいんじゃないだろうか。

なんてね。
何が言いたいんだかよく分からなくなってきたけど……。

──カオスもまた良し。ってことかな。
(最近、カオスマガジンっての、発刊されましたよね、『雑誌なんか』だったっけ? 全部は読んでないけど、なんだか相当カオスだったし、それがまた面白いんじゃないかと──ね)

じゃ、また明晩!

ねえ、『えあ草紙』は凄いぞっ!

『えあ草紙ブックマークレット』がカクヨムに対応したということで、遅ればせながら僕もインストールしてみた。
インストールといっても、ブラウザのブックマークバーにリンクをドラッグするだけ。拍子抜けするくらい、とっても簡単なのだ。
(インストールはこちらから

カクヨムに昨日から掲載を始めた『ルルルとリリリ』の第一話を表示してみたところが、これ。

1.まず普通にカクヨムのサイト上で表示

普通のWEB表示。明朝体だし左右に余白があり、ちゃんとウィンドウサイズに伴ってリフローされるので、極端に読み辛くはない。
普通のWEB表示。明朝体だし左右に余白があり、ちゃんとウィンドウサイズに伴ってリフローされるので、極端に読み辛くはない。

2.「えあ草紙リーダー」のブックマークをクリック

最初に出るのがこの画面。慌てず、「えあ草紙で読む」をクリックする
最初に出るのがこの画面。慌てず、「えあ草紙で読む」をクリックする。

3.これがえあ草紙の表示。美しい。読みやすい、気が利いてる!

どうですか、この表示の素晴らしさ!
どうですか、この表示の素晴らしさ!

紙の薄さを感じさせるインクの裏写り。ちゃんと実際の裏ページにある文章の裏返しになっている!

こちらの設定画面で細かな表示設定ができるのも気が利いてる!

本文をヒラギノ明朝、見出しを小塚ゴシックにしてみたところ。
本文をヒラギノ明朝、見出しを小塚ゴシックにしてみたところ。

インクの裏写り量まで設定できる、この細かな気配りはもう、マニアの域!
(だって、「前後の枚数の違いを影で表現」って、やり過ぎでしょ。言い意味でw)

基本的にはMacで読書することはないので、今までは使ったことがなかったんだ。でも、実際使ってみて、その良さに驚いた。これは、Kindleアプリなどの専用ビューアと肩を並べるかそれ以上じゃないか!
(「!」ばっかり!)

これ、Flashを用いているので、PCだけじゃなくAndroidにも対応してるそうですよ。つまり、iOS以外なら大抵何でもオッケーということ。

どうですか、皆様ぜひ!

じゃあまた、明晩!!

(この記事が、いつか誰かの役に立ちますように!)

ブログのログ

あれは、10代の頃だったかと思う。海洋漂流サバイバル系の小説を読んでいて、船室で漂流日誌を付けている主人公がいた。漂流が長引き、日誌が失われてしまったのか、ペンが使えなくなってしまったのかは覚えていないけど、あるところで記録の手段が失われた。そこで、せめて主人公は日付だけでも記録しようと、船体の丸太にナイフで傷を付けた。来る日も来る日も、主人公は丸太に傷を付け続けた。
『ありがとうチモシー』だったかもしれないし、『十五少年漂流記』だったかもしれない。もっと大人向けの小説だったかもしれない。いや、そもそも本ですらなかったかもしれない。『未来少年コナン』にそんなシーンがあったかもしれない。ん? いずれにもそんなシーンはないかもしれない。曖昧な、とても曖昧な記憶。
でも、その記憶は心の片隅にずっと残っていた。
(近年、何かの映画でも似たようなシーンがあった気がする)

そして20代後半、WEBの仕事を片手間で担当するようになった頃、ログという言葉が引っ掛かっていた。なんで丸太なんだ?
いわゆるdos窓に処理記録が延々と流れるようなやつだ。そっち系の専門の人がサーバーの設定をしているとき、ぱらぱらと流れるそれをぼんやりと眺めていたりした。なんのこっちゃか分からないし、専門家ではない僕は興味もなかったのだけれど、
“ログを取ってるんだよ、後で何かあったときに解析できるようにね”
と言った彼の、ログという言葉がどうも気になっていた。

WEBの仕事というとITっぽい響きもあるけれど、ちょっとデザインが出来るからというだけの理由で、当時勤めていた会社でホームページの制作を任されたのだ。まだWEBサイトなんていうカッコいい言葉はなくて、何でもかんでもホームページと言っていた。AdobeのPage millが最先端だったHTML1.0の頃で、WEBデザイナーなんて職業も言葉もなかった時代……。

僕はインターネットの解説書を買ってきて貪り読み、アーパネットの歴史とかWWWの成り立ちなどを読んで、少しずつネット関係の知識を溜めた。そして、HTMLベタ打ちと16色くらいに減色した小さなGIF画像をテーブルで並べた程度のホームページを作るようになった。デザインなんて言えるもんじゃなかったけど。
確か、あの本の中にもログの話がちらりと載っていたと思う。

そして時は流れ、30代後半あたりか、ブログという言葉が使われはじめた。最初は略さないでWEBLOGと言っていたと思う。WEBに書き残す記録だからWEBLOG。
あ、これ、丸太に傷つけるあれじゃないか! とピンと来たのだ。

だからね、僕にとってブログは生存の記録だとも言える。つまらない日記だけど、くだらん自己宣伝に過ぎないかもしれないけど、淡波亮作が日々なにをどう考えて、それをどうやって創作に転生させていくのか、そんなことも残して行けたらと思っている。
今日、この頃。

「役に立たないもののほうが、面白かったりする」
────淡波亮作

なあんてね。

SEOについて少し書いてみる

これを読んでくださっている方の多くは、すでによくご存知なのだろうとは思いつつ、改めて少しだけ書いてみようと思う。ちょうど、前回の記事に登場した言葉だし。SEOのこと。
初めに断っておきたいのだけど、これはあくまでもド素人の所見。詳しい方から見たら「何じゃこりゃ?」と思われる記述もあるだろうし、「これを参考にしたのにブログのアクセスが増えなかったよ」と言われても責任は持てないので、そこはご承知の上でお読み頂きたい。

SEOとは、Search Engine Optimizeの略、つまり検索サイトでいかにページがヒットするように最適化するか、というテクニックだ。

今から数年前、それは高度にビジネス化していて、SEOは即ち《コスト投下による即時性のあるビュー数獲得法》だった。SEOこそがウェブサイト成功の鍵だとも言われていた。アメリカではこれが進みすぎて、検索結果でトップになるためのありとあらゆる裏技が開発され、専門業者が乱立していた。SEO対策コストの切れ目がビジネスの終焉を意味するところまで来ていたという話まであった。

そのお陰で、検索結果トップに表示されるのはエンドユーザーが求めた結果ではなく、検索されたい側の経済力を示すものに成り下がっていたというわけだ。検索エンジン側もその状況を良しとしていたわけではないし、騙す騙される、裏をかく、対策するのイタチごっこが延々と続いていたらしい。

僕はこのブログを始めるとき(そう、このブログはまだ始めてから1年も経っていないヒヨッコなんだ)、アクセスを増やすにはどうしたら良いのかと人並みに考えた。本格的なSEO対策まではいかなくとも、検索エンジンに少しでもヒットしやすい《仕込み》が必要だと思っていた。二十年前なら、それはメタデータに被検索語を連ねることだったけど、それは全く効果を伴わなくなって久しい。
では、今どきの基本は何だろうと調べていたら、いくつかの重要であろう要素が浮かび上がってきた。

それが、ここに上げるポイントだ。

・ページの本文中に含まれる《脈絡・意味のある》言葉が検索される
・生きているページである
・広がりを持つページである

つまり、こういうことだ。

検索されるキーワードは、そのWEBページの内容と密接な関係を持っていなければならない。記述された本文の内容こそがキーワードになりうるのだ。そして、ページは頻繁に更新されていなければならない。放置された固定ページは、検索の対象から外されていく。もう一つが、外部へと開かれているということ。つまり、本文中に記述された生きた言葉が、外部サイトへのリンクを持っているということだ。これは広告のバナーなどではなく記事の内容こそが外部へと開かれていることを意味している。

僕が使っているこのCMS、つまりWordPressのプラグインに、SEOを司るものが数々あるらしい。そのうちのいくつかは、自動的に本文中のキーワードとおぼしき言葉を拾って、勝手にリンクを貼ってくれる。これは便利、と導入したいところだったが、どうもこれはNGらしい。SEOについて調べる中で、このような自動リンク機能は今どきの検索エンジンには嫌われるというのだ。検索エンジンは記事内に貼られたリンクが自動的に貼られたものか、人手によって丁寧に一つずつ貼られたものかを判断してヒット順位に反映するという。
それって本当なのか? とも思ったが、まあ難しいことではない。これはSEOなどというものではなく、読者のために行なうべきものなのだ。
自分が調べものをしながらサーフィンしているとき、自動でリンクをバンバン貼られたページを訪れることがある。ちょっと気になる言葉があって、そこにリンクが埋まっていたらそれをクリックしてみる。そうすると、大抵はその言葉の《辞書的な意味》を解説するページに飛ばされるのだ。その記事のコンテクストとは全く関係ない解説に。
それはあんまりだろうと思う。ブログの運営者として、読者に追加の情報を与えるために貼るのがリンクじゃないか。それをCMSの機能に頼ってクソみたいな情報を読ませるなんて、そんなサイトは願い下げだ。

(この記事からはSEOの解説には飛ばしませんよ。だって専門家が書いた記事と比べられたくないですもんね)

と、いうことで、今日もチクチクと記事を書き、飛んで欲しい先へのリンクを貼る淡波です。

《7/15追記:
早速、WEB解析士の資格を持つというヘリベマルヲ氏からご指摘を受けた。僕の理解はかなり古いという。まあ、テクニック的なことはさておき、考え方としてはヘリベ氏のいう「どんな些細な部分にも全体の意図にもとづく必然性があるべきだ」と変わらないのではないかと思う。読んでくださった方、どう思ったかな? 僕も言いたかったのはそこなんだけど、ちょっと言葉が足りなかったかも。そこは、淡波の考えはこんな感じだ、という程度の読みにして欲しい。ヘリベさんの記事にはちょっとよく分からない技術的な? 記載があったけど、そこも調べて知識にしなきゃとも思う。でも、そこまで学んでもどうか、とも思う。でも、これじゃダメだよ、って言われているようなので、やっぱり調べなきゃ?
(ちなみに、僕はヘリベ氏との距離を取ったつもりはないし、すり寄ったこともない。ただ、僕は少なくともヘリベ氏の味方になりたいと思ってきたし、彼は愛すべき人柄だと思う。でも、それを受け入れては貰えないことも理解している。このブログにはセルフ出版と無関係な人も結構来てくださるので、全く意味の分からないような内容もまた、避けたいな、とは思っているから、距離を置くような感じにも見えるかもしれない。それから、日本独立作家同盟のことは、これからゆっくり自分の目で確かめたいと思っている)》

さて、この記事がいつか誰かの役に立ちますように!

ケプラーズ5213のランディングページを公開

でんでんランディングページを利用して、ケプラーズ5213のランディングページを作らせていただきました。といっても公開したのは1月25日。短編集第六話の執筆に追われ、ブログでのお知らせがすっかり遅くなっていました。

構造としてはTumblerのブログテンプレートになっていて、これがとても凝っているんです。まさに、小説のプロモーションのために作られた専用のテンプレートで、盛り込みたい情報をどんどん書けます。
つい、登場人物の紹介も入れましたが、画像はヒロインのケイト・シルバーバーグのものしか、しかも眠っている姿しかないことに気がつきました。
主人公の画像がないんだから、誰も入れなければいいんですが…。つい、女性の絵があったほうが少しはアピールするかなあ、なんていう下心が出ました。

こちらがそのイメージ。カッコいいでしょ?

ケプラーズ5213 ランディングページ
ケプラーズ5213 ランディングページ

作品ページはこのサイト内にもあるんですが、せっかくあるものは使ってみたいですもん。
そうそう、どちらのページにも、そこにしか載せていない情報がありますよ。是非、両方いらしてくださいね!
これからも両方とも少しずつ情報を増やすつもりですし!!

このでんでんランディングページといい、doncha.netさんのeasy epubといい、いろんな方にお世話になって、淡波亮作は作られています。

ちなみに、でんでんランディングページの使い方は、このダウンロードページの下の方に詳しく載っています。実は僕、この「下の方の説明」に最初気が付かなくて、どうやって使うのか全く分からずにもんもんとしていました。ちょこっと下にスクロールすれば説明がありますので、githubのプログラマーぽいページに面喰らってしまわず、ページの下をどんどん見てみてくださいね。

これからKindle作家になりたいという方は、きっとお世話になるページだと思います。是非、覗いてみてくださいね。

さて、この記事がいつか誰かの役に立ちますように!

作品ページを更新

新作小説『ケプラーズ5213』の発売に合わせ、作品のWEBに新ページを作成しました。書籍情報についてはAmazon Kindle Storeに掲載のものとほぼ同じですが、こちらには〈読書の友〉コーナーと〈関連作品〉コーナーがあります。読書時に役立つ(かもしれない)ちょっとした情報と、動画などへのリンクです。

ベースにしたデータは予告編などのものですが、今日新しく作ったCG画像もありますので、是非見て下さいね。

ちょうど小説の冒頭部分のシーンがありますので、読み始めてからすぐに画像を見ると、イメージが浮かびやすくなりますよ!

サイトマップを作成?

自動的にサイトマップを作ってくれるサイトを見つけたので、作ってみました。URLを入力するだけで簡単に「sitemap.xml」が書き出され、それをGoogle Webmaster Toolsのサイトマップページで送信。出来ました。

直後にはStyle情報がないのでPending。と表示されていましたが、どうやら上手くいったようで、Sitemap testというのを行うと、「36ページが送信されました」とのテスト結果。多分これで、ページ上に書いた様々なキーワードをググると、検索されるようになったのでしょう。

偶然、見つけて貰える確率も、ちょっぴり上がったという訳です。た・ぶ・ん。