[ ゆめにっき ] 血液が緑色な少女

季節風邪でしょうか。Youtubeの動画で面白おかしく笑っていたら喉を痛めて寝込んでいました。気をつけていても急に体調を崩しがちなので気をつけていたいです。

最近見た夢

血液が緑色な少女

生まれつき血液が緑色な少女。実は博士からつくられたアンドロイド。血液が緑葉体で出来ている。知識も未熟で人間的なことを覚えてくるや否や、博士に迷惑をかけてしまう。

口癖は「なんでワタシのここはミンナとは違うの?」

ゆめにっき

夢の中の日記。空想的な日記だけどもいつもの自分とは違う想いを綴る事のできる幸せなこと。怖かったり幸せだったり主人公目線だったり第三者視点だったり。自分とは違う異性で会話が進んだりもする面白い内容。

大体は忘れてしまうことが多いけども、しっかりしたストーリーは最初から最後まで覚えてたりもする。変わったヒラメキというのは夢の中で綴るということが多いのではないかな。

面白いこと

冬はなかなか小さな旅(小旅)にいけないので外出はご無沙汰気味でもあります。同じものをダラダラと続けるのが苦手なタイプの人間なので、趣向を変えたり違うものをチョイスしたりして幸せを得ることが多いです。最近で言えば横浜中華街で入ったこともない中華屋が美味しかったことでしょうか。四川麻婆豆腐がオススメみたいでしたが、お昼のランチタイムだったので今回は断念して普通の麻婆豆腐を選んでみましたが美味しかったです。

景徳鎮 http://www.keitokuchin.co.jp (動画が流れるので注意)

断捨離と完成させるものに対する意識

必要な要素と必要じゃない要素を並べて断捨離してるところです。

過去の記事

過去の記事を見てると、その時は思ったことを述べていたけども内容としては面白くないし今の自分にとっては必要のないものだったりします。誰かに響いているのであれば投稿を消すことを諦めることもありますが、大体呟いていることは自己意識だけなので、ぽいっとゴミ箱に捨ててしまうものです。

捨てること

前の記事もアカウントを捨てたような内容を呟いてました。こちらは気持ち的な問題でしたが20日間くらい経ってスッキリしました。捨てることに躊躇するのは「無くなってしまう」損失感からうまれるものであり、一回離れてしまうと続けたくなくなるというもの。昔に書いた記事も評価がなければ捨ててしまいます。

悪いところ

色々断捨離していると「文章も書きたくない」「イラストも描くのもいいや」と「怠慢」になっているような気がします。コレは悪いサイクルです。「見せなきゃいけないもの」という意識がなくなったので時間を獲た代わりに「描かなくてもいいや」という意識になってしまっているのかと…。

考えられる対処

「時間」はあるので「ラフ(下書き)」でアップロード(見せる)のではなく、色を塗ってしっかりと「完成」して、そこから見せるような意識に変えれば充分変わってくると考えております。

長年、下書きの時点で評価してほしいからSNSなどに描いたよ!とアップロードしては撃沈していたので完成したものを見てほしいという気持ちを高めるためにもしっかりと頑張っていきたいものですね…。

新しい記事

新しい記事に対することとすれば「堅苦しい表現」は使わないということでしょうかね。割と伝えたいことを真面目に書いちゃうと表現が堅くなったり、教授みたいな言い回しをしちゃうので、なるべく読み手にも読みやすい。子供でも読めるような文章を心がけて行きたいと思っております。いわゆる今回の記事のような言い回しでしょうか?

日常的なこと

結構書こうか悩んでます。せっかくのブログ(日記)ですのでライフログ的なことも呟いてもいいと思っておりますがどうなんでしょうか?自己評論的なことをつぶやいてると。日常的な記事というのは必要なのかなと思って書くのをためらうこともあるのですが…。コレを気に気になったものは書くというのもいいかもしれませんね。

楽しくやってます。

ブログも変わりのSNS(Google+)もそれ程投稿してないので鬱になってるんじゃないか?と心配してくれる方もいらっしゃいますが、それとは真逆で元気にやっております・ω・

韓国料理 韓美膳

今までしなかったオシャレな料理を写真を撮ってメモを残すようなこともしてますし、その点では「今まで見えなかった新しいもの」に挑戦できてる気がしますね。まだまだ意識からは拭えてないですが自分の求めるものがゲットできればいいですね。

ことばの積み木

文豪のエッセイのように1日400文字くらいで綴れれば良いとは思うのですが、なかなかそういうわけにはいかず、ものを書かずに一日を過ぎてしまうということに哀愁を感じます。

普段の生活をおもしろおかしく書いたり、描写的に書くというのは理解ってても難しいことです。大体の人は自分にあったことをそのまま表現してしまうので実際での読み手からしたらモヤモヤした状態で話が進んで、どの言葉が強調されているのか判らずに新たな言葉が登場してゆく自分だけの文章になってゆくのです。

言ってしまえば「積み木」のようなもの。四角のような角ばった表現があれば三角のように尖った表現もある。丸のような柔らかい表現は優しいイメージはあるかもしれないけど三角や四角などを使うときにはどうしても隙間が出来てしまう。その隙間がモヤモヤした表現があるということ

もやもやした表現をどうしたら解消できるのかというと、角っこが丸くなっているような積み木。変わった表現をしてみるのが文章に味を持たせることができるポイントだと思います。

例えば「積み木でお城」を作ろうとするとき「とある某国、1800年続いた歴史のあるこの由緒あるこのお城に存続の危機が生まれた…」と角ばった表現もあれば「死闘の末、守ってきたが防衛は崩れ痛々しい傷が増えてく一方…」のような心にのこるような尖った表現。「BABY、それは赤ちゃん。今まで築いてきた文明を壊す無邪気な存在、何でもかんでも壊しちゃう」のような柔らかい表現にアクセントを加えた言葉などを組み合わせることによって面白みを伝えることができます。

とは言っても文章をうまく構築していくのは難しいので積み木のように「機関車作りたい」「お城をつくりたい」「動物園にしたい」などと伝えたいことを最初に決めておくのが上手になる言葉のエッセンスだと思います。

webのシステムとユーザビリティを考えるのは大変難しい。

12年HTMLとCSSそしてjavascriptを弄ってwebサイトを制作しているが、最近のHTML5やCSSそして新たな記述方法が増えて頭を悩ませている。

最近では、javascriptやcssを圧縮したり排除、軽量化してモバイルユーザーや通信回線が貧弱なユーザーにもメインコンテンツの内容を読めるようにするというシステム変化は産まれているが、それを考えながらweb(PC)でもモバイルでも双方向見られるようなコンテンツをつくるのは、長年やってきた製作者でも頭を抱える仕組みである。

これから推奨されるWebシステム

大まかに言えば、styleのような装飾よりも文字コンテンツをどれよりも早く描写させなさい。阻害している読み込みは非同期(ラスト)に読み込ませるか、もしくは削除しなさいという言葉である。もちろん色々と対処法はあるが旧世代で作ったWebはデザイン優先でつくられてるため、なかなか書きなおすには辛い。旧世代でも推奨されるオススメの方法を書きたいと思う。

圧縮と最適化

Page SpeedInsight でよく言われるのが、CSSやJavascriptを圧縮しなさいという言葉。別にZIPにして保存しろというわけではない。サーバー側が圧縮してくれるシステムがあるので紹介しよう。

.htaccess に AddOutputFilterByType DEFLATE を記入する

もちろんこの圧縮を許可してないサーバーでは使用は出来ないが、自身で圧縮するよりも簡単で自動的にサイズを圧縮してくれる。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf

キャッシュをするように .htaccess に書き込む

これは昔からある技術だが、ブラウザにキャッシュをするように命令を送ることによってその期間の間はサーバーから情報を毎回もらうのではなくブラウザに保存された情報で処理をするようになりより速く読み込めるようになる。

ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"

CSSファイルやJavascriptの最適化

機械で読む構文は、構文になってれば変わらないので、ぺちゃんこに圧縮して読ませてくださいということ。

ぺちゃんこCSS ( 圧縮CSS )

CSSファイルでも500Byteの差しかないので圧縮するような方法を持ってない方とかデザインを著しく修正する製作者は後回しでもよいかもしれません。

画像の圧縮化と最適化

Webのサイズの90%を占めていると言われている画像ですが、適したサイズと圧縮率を使えば100〜500KByteも節約することができるということ。対処法は簡単で、Webに表示されている「縦横のサイズ」と同じファイルを製作するとよいらしいです。

例えば、圧縮率(Jpeg)は画像の劣化がさほどない85%を使用し通過ファイルであるGIFはなるべく使わずPNGにファイルにし、ユーザーにもサーバーにも優しい通信を心がけることと言っております。

デザイナーサイトや写真を使うようなサイトでは表示を劣化させたもの。本物のファイルは別に用意してクリックした時に読み込ませるような方法を取ると良いらしいですね。

javascriptの非同期化とjQueryの非推奨

コンテンツの読み込みを阻害するjavascriptはなるべく非同期化をしasyncなどを使ってなるべくコンテンツを読み終わったあとに読み込ませる。

そしてhtmlと共存をして読み込んでスタイルを形成するjQueryは「なるべく使わない」ということです。

async

javascriptの外部呼び出しファイル(js)の記述文の中に async 設定を行うというもの。

<script type="text/javascript" src="hoghog.js" async></script>

これを記述することによりhtmlが読み込まれてからjavascriptの構文が走ります。その代わり最後に読み込まれるため、動的コンテンツが反映されないなど問題点もあります。

ユーザービリティ

パソコンでもスマートフォンでも見られるようにするというもの。昔はjavascriptで端末の判断を行っていましたが、最近ではCSS3になりCSS内で表示しているサイズの判断(media Query)を行えるようになりました。

CSS サイズ判断に必要なもの。

サイズの判断に伴い書く構文がファイルごとにあります。
htmlに「meta viewport」とCSSに「media screen and (size)」を書く方法です

htmlファイルに書き込む内容

<meta name="viewport" content="width=device-width">

CSSファイルに書き込む内容

@media screen and (max-width: 700px) {
    body {
    --  処理文 --
    }
}

ほかにも様々な処理方法

ここにご紹介しきれない程の処理方法を紹介されているサイトもあります。
https://dev.classmethod.jp/smartphone/device-media-queries/

HTML5

HTML4まではdivで成形したりh1などの見出しタグで読みやすく解りやすい記述を心かげたであろう。HTML5ではdivはスタイルを形作るものではなく文をまとめる箱的なもの。そのかわり<header><nav><article><section><footer>などの新しいタグを使ってメカニカルな内容を読ませようということ。

主にSEOに効果があり、どれがメインのコンテンツなのかサブコンテンツそれともメニューなのか判断させる事ができます。

詳しいサイトはたくさん有るので、どのタグがどのような効果を生み出すのか説明します。

<header>

<head>タグとは違う存在。主にタイトルやヘッダーとして書く内容を記入します。

<nav>

navigation (ナビゲーション)の略。メニューを表記する時に囲います。

<article>

日本語名で「章」ブログで言えば1記事のこと。

<section>

日本語名で「節」この記事で言うと「これから推奨されるWebシステム」「ユーザビリティ」「HTML5」の項目がsection 主に<h2>と共存して使われることが多いです。<article>タグの中に入れ子になります。

<footer>

頭があれば足もある。最後に記入する項目です。主に「Copyright」が書かれます。

他にもあるけども

補足の<aside>などもありますが上の5つを上手に使えば綺麗にまとまる気がします。今まで<div>の中にidやclassで設定してたと考えると専用のタグがあるので利便性も向上することでしょう。

まとめ

Google Page SpeedInsightで直した方がいいよと言われているものだけ紹介してみました。.htaccess に関しては対応していたら記入させてあげると良いかもしれません。

綺麗な読みやすいコードとWebでのユーザビリティを考えるのはなかなか長年やっていても難しいことだと改めて実感しました。少しでもユーザーに対して考えてみると顧客も増えるのかもしれません。

言霊と自分の伝えたいこと。

記事を多く書いたり惹かれるようなタイトルを書かないのでこのブログの流入数は1記事で20人程度(ほぼソーシャルメディア)です。コンテンツを絞っていない日記なので、この程度でしょう。

だいたい1記事を書くのに1時間はかかってしまいます。
自分の話したい言葉を考えながら感覚で書いて入力していき、同じような言い回しを使わないようにしたり、語尾が著しく変わっていないか確認したりと添削するのでソーシャルメディアの投稿のように直ぐに内容を書けるというのは難しいです。

ブログで何を伝えるべきか

ブログを書こうとしてやっぱり書かずに置いておこう。書いたけども単なる面白みのないことを綴っている内容が沢山ある。大体は近々で起こったこととか愚痴のような好評や批評などと語ってはいるが、書いてて楽しくない嫌悪感を抱いてしまってだるくなってしまうことが多々あります。

好評や批評・レビューというのはユーザーを引き寄せるには良いものですが、好転的な意見・悪化するような内容一個一個に敏感になってしまい精神的にも影響を受けてしまうということが最近わかりました。

言葉は言霊になりやすいというのはこういうことなんでしょうね。

自分の追い求めるもの

自分が追い求めるものとしては、自分の世界観を言葉やイラストで共有したい、小さなことだけども誰かの手助けになれば良いという意識を続けています。楽しいことは楽しい。辛いことはつらい。と言いたくなるような子どものような世界です。

ただ、ファンタジーな世界観を隅から隅まで綴るというのは難しいものでしょうし曖昧な設定だと前半良くても後半がふわふわして足がついてない状態で完結と後味の悪いストーリになってしまいます。だから自分の世界を語れる人というのは誇らしいと思ってます。

そんな人間になりたいかと言うとなりたいですし一総として制作したい気持ちはあります。ですが自分に足りないものとして、「終始をつくるのは上手いものの、中身がスッカスカ」な肉付きのない骨の基礎建築ということが問題です。話は面白いのに結果を早々と伝えたくなってしまい内容としては意味のわからないストーリになっている。途中で話の論点が変わりやすいことが欠点でしょうか。

次につなげたいこと

だれが閲覧するかわからないけども自分の妄想を言葉にしてストーリにしてみるのもよい試みかもしれませんね。この記事を書くまではなにか書いてよいものだろうかと突っかかった気持ちがありましたがスッキリしました。

自分が思ってる言霊。言えないことを言ってみるといいかもしれません。