SELF-SERVICE

だいぶん前に読んだのに紹介してなかったので。


HTML解体新書-仕様から紐解く本格入門

htmlの見た目ではなく、文書構造を正しく作るための「仕様書」的な本です。
htmlのタグの意味や構造上の仕様などを詳しく紹介されています。
htmlの仕様は普遍的ではなく、常に見直され、解釈が変わっていくものではありますが、ベースとしての仕様を知るにはすごくいいものでした。

すべてのhtmlコーダーに読んでほしいけど、あんまり気にしてない人は読まなくてもいいのかな。
個人的には大満足な一冊でした。  

デザインシステム｜デジタル庁

前々から思っていたことですが。
地方自治体って、地域や規模が違えど、基本的にやっていることは同じはずなんですよね。
もちろん都道府県と市町では違いますが、佐賀県と新潟県を比べたとしても大きな差はないはず。
佐賀市と那覇市を比べても大差はないはず。
なのにどうしてWEBサイトは全然違うんだろうと。

まあもちろん地域性もあるし、住民規模も違うし、違うところはあるけれど、例えば「住民票を取る」となった場合、ほぼ同じこと手続きが必要で。
そういうのをもっとスマートにできるんじゃないかと考えていました。
そんなところで、冒頭のデザインシステムです。
地域の色は出しつつも、共通のデザインシステムを使うことで、似通ったUIにできて、みんなが「使ったことがないけど使える」ようになるんじゃないかと。
上記サイトからのリンクでFigmaもみてみましたが、「なんとなくやっていたこと」がきちんと数値化されていて関心しました。大事ですね、数値化。

さらに今後「どなたでも利用できる、イラストレーション・アイコン素材集を配布します 」という動きもあるようで、さらに使いやすい地方自治体サイトができるんじゃないかと思っています。

まあ、さらに進んでいくと、地方自治体のWEBサイトは、同じWEBサーバに乗ってて、同じCMSで動いたらもっとユーザビリティ、アクセシビリティも高く、職員さんも管理しやすくなるんだろうけど、そうなると我々の仕事がなくなってしまうので、まあぼちぼちでお願いしたいところです。  

どうでもいい駄文。

ここ数年、メタバースが流行ると言われてますが、全然流行っている感じはしませんね。
という文章を1年前くらいに書こうと思ってたのですが、もうすでに下火感がありますね。
テレビ番組等でもメタバースのことを取り上げてたと思うのですが。

前のSecond Lifeのフィーバーを知ってる身としては、なんとなく冷めた感じがするのです。
（Second Lifeは流行る！と言われてみたものの、特にできることもなく、なんとなくアーリーアダプタたちが騒いで終わった感じ）

今回のメタバースもそんな感じで、ビジネス臭を嗅ぎつけたアーリーアダプタがわんさか駆け寄り、金を目当てに「なにかやろう！」と錯綜した感じで。
まあまだ、メタバースもまだ序盤なのかもしれないけど。

じゃあ、そんなメタバースをどう使うか？何に使えるか？
参考にしたいのは映画「レディ・プレイヤー1」。
ちょっと退廃したスラム街みたいなところが舞台だけど、そこから仮想現実の世界にアクセスして、そこで宝探しをする……というようなお話。
VRゴーグルとグローブなどをつけて仮想世界に入ると、自分の動きにあわせてアバターも動く……という、まあメタバース＋VRが合体したような世界。
この世界だと、アバターは好きに変更できるし、銃を撃ったりレースをしたり、まあなんでもできる。
リアルな金稼ぎもできる。恋だって、ゲーム内で結婚だってできちゃう。
共通のプラットフォーム内でみんな活動するので交流もしやすい。

一方、現在のメタバースの世界。
メタバースと言っても、企業等がそれぞれのメタバース空間を作っているため、互換性はないみたい。
できることも限られている。
「特別なコンサートが見られますよ」というようなイベントが開催されているようですが、それもメタバースである理由は特になく、「普通に映像で見れればよくない？」という感じ。
リアルでできることをわざわざ仮想空間でやる必要はないよね？
逆に「仮想空間じゃないとできないこと」ってなんだろう。
モンスターを倒すとか、戦争をするとか……まあゲームでもできるか。
先述のレディ・プレイヤー1では、「退廃した現実世界からの逃避」の意味合いが強いのと、「一攫千金当ててやる」という感じが強かったのですが、今の現実世界ではそこまでのモチベーションもないですね。

重要なポイントとしては、
・みんなが一同に集まれるプラットフォーム
・ユーザはそこで何ができるか（現実ではできないことができる）
・マネタイズの仕組み（企業もユーザも）
というのがないと流行らないでしょうね。

FacebookもMetaに名前を変えて力を入れてるみたいですが、それよりも膨大な世界規模の街並みのデータ（ストリートビュー）のデータを持っているGoogleとか、プラットフォームとして広く知れ渡っているマインクラフトの方がメタバースとは親和性が高いような気がしています。

特にオチはないですが、今のメタバースブームではちょっと物足りない感じがしますね……。
  

印刷の世界では、
・ゴシック体：見出しや写真のキャプション、リスト等で使う書体
・明朝体：読んでて疲れにくいので本文で使う書体
という認識でしたが、Webなどのスクリーン系だとそれが逆になるようで。

ゴシック体というのは、小さなサイズでも読みやすいというのが特徴で、Webの場合、本文が一番小さな文字になるので、本文はゴシックというのが定番になります。

明朝体は小さなサイズで使うと細い横棒が視認できなくなり読みづらくなりますが、大きなサイズで見出しで使うと、ユーザー側に強く情報を伝えることができます。

……というのをデジハリの卒業制作チェックで伝えていたのですが、今朝のJアラートでそのいい例がありました。


「国民保護に関する情報」という大きな見出しは明朝体で目立たせ、きちんと読ませたい本文は小さな文字でも読みやすいゴシック体になっています。  続きを読む

映像の講師の影響のようですが……。

<header id="header" class="header">

のようなID、class指定をされていることがあります。

そもそも、<header>タグは、多くのコーダーが<div id="header">のような記述をするので、それなら……ということでできたタグなので、<header id="header">というのはちょっとナンセンスな気がします。
「<div id="header">＝<header>」と理解していいと思っています。
なので、<header>だけで十分だと考えます。（footerも同様です）

それで、例えば、
<header id="header">
に対して、
.header {
width: 100%;
height: 50px;
}
としていた場合、
<header>
に修正したら、
header {
width: 100%;
height: 50px;
}
にするだけなので、大きな修正はありません。


じゃあ、<header>にIDやclassを指定することはないのかというと、例えば、トップページと下層ページで違う見た目のヘッダーにしたい場合に指定します。例えばトップページは<header id="top">で、下層は<header>とか。
下層にもid="page"みたいにかけてもいいし、下層にだけIDかけて、トップはかけないというやり方でもいいのですが。

結局のところ、「個別になにか指定するためにIDやclassをかける」という基本を覚えておけば、こういう無駄なIDやclassをなくすことができます。
あと無駄なdivとかも防ぐことができますね。  

IDは「ページ内で一回しか使わない『強い指示』」、classは「ページ内で複数回使える弱い指示」と考えてください。
まだ<header>タグがなかった時代は<div id="header">と書くことが多かったのは、ヘッダーはページに1つしかないからです。ページ内の唯一無二なものについてはIDを使います。
classはページ内で何度も使えるものです。同じ見た目の枠とかを作る時にclass指定をすると便利です。
classよりIDのほうが強いので、
<div id="hoge" class="hogehoge">
に対して、
#hoge{margin:10px;}
.hogehoge{margin:30px;}
とした場合、IDの方が強いのでmarginは10pxになります。
※というか、一つの要素に対してIDもclassも設定することってあるかな……。  

最近、スタジオ佐賀の卒業制作でよく見かけるのがclassの多用。
classの設定自体は悪くないけど、省略可能なclass設定が非常に多いように思います。

例えば、
<ul class="list">
<li class="list_child"><a href="#">aaa</a></li>
<li class="list_child"><a href="#">bbb</a></li>
<li class="list_child"><a href="#">ccc</a></li>
</ul>
とある場合なら、liにかけているclass="list_child"はあまり意味がないかなと。
この場合、cssのかけ方としては、list_childにかけていたcssをul.list liに対してかければ解決します。
※ul.list li　は、「class="list"が設定されたul　の中のli」という意味ですね。

そうすると、htmlがシンプルに
<ul class="list">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
で済むわけです。
こうすることで、htmlがシンプルになるので、htmlのコーディングが楽になり、修正もやりやすくなるかと思います。
classのかけ忘れでレイアウトが崩れることもないですしね。

じゃあ、どういうときにclassをかけるかというと、
<ul class="list">
<li><a href="#">aaa</a></li>
<li class="active"><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
のように、特定のものに対してだけ特別な設定をしたいときとか。
例えば上の例でいうと、classでactiveにしているものだけは、背景を赤にする……とか。
要素全部にclassかけていくのは面倒だし、ミスの原因にもなりそうなので避けたいところです。  

ふと思いついたので。

WEBページの「幅」について。
10年くらい前までは「800ピクセルのモニターでも見えるように」ということで、スクロールバーの分、ちょっと引き算して760ピクセルくらいで横幅を作ることが多かったのですが、5年くらい前に1000ピクセルくらいが主流になって、また最近は1200ピクセルくらいが徐々に主流になってきているように思います。
この場合、よく「正解」を求められますが、正解は特になく、各カラムの数とそのマージンを足した数字が「そのサイトの正解」になるのかなと思っています。

また、画面幅いっぱいという設定もありますが、画面全体が間延びしやすいのと、レイアウトが定まらないことが多いので、やる場合は一工夫が必要になってきますね。

最近作った、北九州の丘ノ規病院さんのサイトですと、画面幅いっぱいに広がって見えますが、中身については1200pxで固定しているので、ひろびろと見えて窮屈感はないものの、レイアウトがしっかりまとまって見えるかなと思います。
もちろんタブレットやスマホの場合は、レスポンシブでの対応が必須です。
今どき、スマホ、タブレットに対応しないという選択肢はありませんからね。

そういうこのブログは、立上げ当初は760ピクセルくらいで作っていましたが、現在は1000ピクセルにしています。
カラム数が少ない場合は、1000ピクセルでもいいのかなということで。  

たまに聞かれるデータ保存のお話。

パソコンに入れているデータ。
このデータも、いつHDD故障やPCの故障で復旧不可になるかわかりませんよね。
ハードディスクなんて消耗品ですし…。

じゃあどうやって保存する？
っていうお話。

私の話をすると。
自宅ではNASというものを使っています。
AmazonでNASで検索すると出てきます。
これ、なにかというとパソコンとUSBで繋がないハードディスクです。
じゃあどうやってつなぐのか。LANケーブルでつなぎます。
なので、自宅にLAN環境がないと使えませんね。
まあパソコン使っているなら、インターネットもつながっていることが多いでしょうから、LAN環境がないことはないと思いますが。
NASについては、IO DATAさんのこのページを参考に。

NASと言ってもいろいろあって、ハードディスク1本のものから複数本のものまであります。
我が家はハードディスク2本でRAIDを組んでいます。
RAIDもいろいろありますが、うちはRAID1（ミラーリング）です。
2TB×2本のハードディスクを積んだ、4TBのNASですが、2TBのハードディスクにそれぞれ同じ内容のデータを書き込みますので、仮に1本のハードディスクが壊れたとしても、もう1本にデータが残っているので大丈夫。
壊れたハードディスクを新しい2TBのハードディスクに交換したら、もう1本の生き残ったハードディスクからコピー・複製されます。
デメリットは、2TB×2のハードディスクでも2TBでしか使えないことでしょうか。（こればかりは仕方ない）

実際我が家も、2年くらい前にNASのハードディスクが1本死に、新しいものに交換した直後にもう1本が死んだのですが、ちゃんと交換できたので、データが飛ぶことはありませんでした。

NASじゃない普通のUSB接続のハードディスクでもRAIDを組むことはできますが、パソコンが複数台あるならNASの方がいいし、WindowsとMacが混在するような環境ならフォーマットの関係などから、やはりNASの方がいいかなと思います。

ちなみに、パーツとしてのハードディスク自体も良し悪しがあります。
一般的に信頼性が高いと言われているのが東芝とウエスタンデジタル（WD）ですかね。
WDはNAS用のHDDもありますので、それを使っておけば間違いないでしょう。
※HDDがついているNASもあれば、HDDは別で買わないといけないNASもあります。
※HDDを別で買う場合は最初からWDの赤を買えば間違いないですね。

HDD付きのNASを買うならこの辺かな。

我が家で使っているNASの後継機です。
HDDもWD（緑）ですし、間違いはないかと。
※我が家のNASのHDDは確かシーゲート製でしたが。

ただ、それでもデータが本当に保護できるかというと…
NAS自体が壊れる（水をかぶるとか、落下するとか、火事にあうとか）自体になるともうどうしようもありません。
そう考えるとクラウドにデータを預けるのが一番いいんでしょうね。
クラウドのストレージサービスについてはまた後日。（本人がよくわかってないので）  

Google Fontsに日本語が…ってのを見て、あぁWebフォントが正式リリースされたのね…って思ってみてたら、ダウンロードできる（インストールできる）フォントでした。

https://fonts.google.com/?subset=japanese

ってことは、ダウンロードしてPhotoshopでデザインに使って、htmlで実装する時にWebフォントで指定すれば、そのままの形で見えるようになるってことかな。

Google様なのでいつサービスが止まるかわからないけど、これは試してみたいですね。  

Webフォントを使うことで、MacでもWindowsでもブラウザが違っていても同じフォントでWebサイトを表示させることができます。
Webフォントについてはwikipedia（Webフォント）を参照。

さて、Webフォントですが、有料のものから無料のものまでいろいろとあります。
手軽に始めるのなら無料のものから……と思うと、Googleが提供しているものがよろしいかと思います。

Google Fonts + 日本語 早期アクセス

使い方は、リンク先を参照してほしいのですが、head内にlinkの記述を追加するのと、cssの設定を加えるだけです。

組み込むことでこんな感じでWebフォントを使うことができます。


日本語フォントの選択肢は少ないと思いますが、欧文フォントだと選択肢も多いと思います。
Googleの欧文Webフォントというのもありますし。

手軽に使えるものなので、必要に応じて使ってみてください。  

ランサムウェアが流行ってますね。
ファイルを実行すると「お前のパソコンは乗っ取った。データを開けるようにしてほしければ金払え」ってヤツです。

対策としては、「よくわからないファイルを開かない」ということなのですが。
敵も巧妙なるもので、「請求書」や「原稿」などと偽ってダウンロード、実行させるみたいです。
また、送信元を偽装するなどして、一見するとわからないようなものもあるようです。

対策としては、
・迷惑メールフィルタを使ってフィルタリング
・送信元のメールアドレスを再確認。（例えばappleからのメールなのにapppleになってるとか）
・送信先のメールアドレスを確認（自分以外のメールアドレスが含まれている場合）
　※例えば、私宛に来た分だと過去に在席していたスタッフのメアドが含まれているとか。
といったところでしょうか？
とにかく添付ファイルが危ないので、信頼できる人の添付しか開かないというのが理想でしょうか…。

あと、「アカウントの再登録をしてください」みたいなメールがきた時は、そのメールに記載されたリンクを踏むのではなく、お気に入りやGoogleから検索するなどして、そのサイトに行って、そこで必要ならアカウントの再登録をするなどして、そのメールで完結しないようにすれば、乗っ取りのリスクは軽減できるかもです。

まあ面倒くさいですけどね…  

デジタルハリウッドスタジオ佐賀の生徒さんから、パソコンの購入について何件か相談が来ていますのでちょっとまとめました。

■ノート？デスクトップ？
自室に設置して、そこから動かすことがないならデスクトップでいいです。
家の中の移動や外に持ち出すことがあるようならノートがいいです。
「ノートはモニターが小さいから…」と思われるかもしれませんが、ノートPCでも解像度（後述）が足りていればデスクトップと変わりません。
今回はノートPCをベースに考えてみます。

■解像度？
1366x768ピクセルとか1920x1080ピクセルとか表記されています。
スタジオで使っているモニターは二台ともフルHD（1920x1080）です。
ノートPCでもフルHDのものはあります。液晶サイズ（13インチとか15インチとか）とは関係なく、13インチでもフルHDのものもあれば、15インチでも1366×768とかもあるので、注意が必要です。

■サイズ
例えばノートPCを買うとした場合、何インチにする？というのが問題です。
家の中の移動くらいなら15インチくらいの大きなのを買ってもいいかと。
外に持ち出すとなると13インチ程度（11〜14インチ）がいいかもです。

■光学ドライブ
DVDとかBlu-rayとか…。
まあ内蔵してなくても、必要なら外付けで済ます手もあります。
内蔵タイプは重たくなります。

■CPU
core i3、i5、i7とあります。i7がハイスペックでその下がi5、最後にi3ですが、グラフィックをするなら最低i5はあったほうがいいようです。

■メモリ？
数値でいうと8GBあれば大丈夫ですが、贅沢に16GBという手も。
「メモリって何？」って方には。メモリは「机」と思ってください。机が広ければいっぱい書類が広げられるので作業効率があがりますよね。同時にアプリをいっぱい立ち上げたり、フォトショップの処理が早くなったりと、メモリは乗せていくのが吉です。

■ストレージ
一般的にHDD（ハードディスク）が積まれています。1TB（テラバイト）が1000GB（ギガバイト）です。
メモリが「机」だとすると、ストレージは「引き出し」です。たくさんのデータを保管する場所ということで。
また最近はSSDというのがあります。読み書きのスピードがHDDより早く、例えばパソコンの起動時間がSSDだと極端に早くなります。（例えば普通のパソコン起動が1分かかるとして、SSDだと20秒くらいとか）ただ、HDDに比べてSSDは高価で、容量も小さくなります。大体256GBとか512GBが一般的です。

■Mac?Windows?
よく聞かれますが…。トレーナーが全員Macを持ってきているので、やっぱりMacですかね？と言われますが、トレーナー全員がWindowsをオススメしたという実績があります。Macはいろいろな特殊なルールがあって、Windowsユーザとのデータのやり取りが面倒だったり、Web系のツール（フリーウェア）が少なかったりと、まあ不便なところも多々ありますので、ここはWindowsの方がオススメ。
Windowsといっても7とか8とか10とかありますが、まあこだわりなく普通に買うならサポート期間が長い10かなと思います。

■で、結局どうなの？
個人的な意見として。
13インチくらいのcore i7で16GB、フルHDのノートPCあたりだと満足度は高いかなと思います。
光学ドライブはそうそう使うものでもないので、USBの外付けを必要になったら買えばいいと思います。
AdobeCCもダウンロードでインストールできますし。
OSは詳しくないけど、win10Pro買っておけば間違いないかな。
これとか結構いいかも。（メモリは別途たさなきゃだけど）
※無料会員登録してログインすると会員割引価格になりますが、12万円強になります。
※国産メーカーのPCだと、いらんアプリもいっぱい入ってるけど、その辺は不要なら削除で〜
  

今年こそは…と意気込んでいたものの、今年も桜の写真が撮れず。
素材として欲しかったんだけど…。

  

平成28年度がスタートしました。
1996年に入社して20年が経ちました。
企業人としてほぼ折り返し地点にたちましたが、これまでと変わらず一所懸命に。
そしてこれからも時代の流れに合わせて変わって行きたいと思います。

  

今までずっと愛用し続けてきた無印のスケジュール。
今年も…と思ってお店にいくと、赤しかない。
お気に入りだったけど、赤じゃ…
ということで、新スケジュールを探すことに。

そして巡りあったのがこれ。

サイズはA5で無印と変わらず。
中の印刷は無印が1色に対し、こちらは赤黒の2色。
無印の時は休日が見づらかったのでこれは改善。
他にも「こうだったらいいのに」と思っていた点がこちらはそうなっていなかったため、個人的には改善。
しかもちょっとだけだけどこっちのダイゴーの方が安い。

ただ1点だけ。
表紙が樹脂系なので柔らかいこと。
まあ立ったままメモするには困らないくらいなので、これは妥協点。

ということで、5年間愛用したスケジュールとはお別れです。
これまでありがとう、無印ノートくん。
  

さがファンブログをお使いの方で「ブログの容量がいっぱいになった」という問合せが個人的につづきましたのでフォローを。

さがファンブログは1IDにつき500MBの容量を持っています。
初期設定では、1ブログあたり100MBです。なので、1つのIDで5個のブログが解説できます。

で、その初期設定の「1ブログあたり100MB」というのは管理画面より変更できます。

まずブログの管理画面にログインします。
それから右上の方に「使用容量の変更」というテキストリンクがありますので、これをクリックします。


すると下記のような画面が表示されます。

右に「100MB」とありますが、この数字を変更すればいいです。
すべてのブログの合計値が500MB以下なら大丈夫です。
なのでブログを1つしか持ってないのなら500MBまで増やすことが可能です。
最後に「変更」ボタンを押しましょう。

ブログの容量がいっぱいになったからって、新しいブログを立ち上げる必要はないですよ。  続きを読む

先日からテレビなどでも報道があっていますが、Internet Explorer（IE）に脆弱性が見つかったとのことです。
「IE以外にインターネットに繋げる方法があるの？」
という方も多いかと思いますが、下記のブラウザをお使いになられてはいかがでしょうか？

■Google Chrome
Googleが開発しているインターネットブラウザです。Googleのサービスとの連携もあり便利なブラウザです。

■Firefox
こちらも愛用者が多いブラウザです。

これを機会にブラウザを変更されてはいかがでしょうか？  続きを読む

前々から気になっていた自身のWebサイトへのコピーライト表記について調べてみました。


まず、日本国内においてCopyrightの表記は意味があるのか？
一言でいうと「特にない」ということです。
日本を始めとする多くの国が無方式主義を採っているわけですが、これだと著作物を創作した時点で著作権が発生するため、著作物に特定の表示を行う義務はありません。
なので、絵を書いたら、写真を撮ったら、文章を書いたら、自動的に著作権が発生することになります。
現在、万国著作権条約のみを締結して方式主義を採用している国はカンボジアだけなので、カンボジア以外では、このマークには著作権発生要件としての法的な意味は存在していないということになります。
なので、特に必要じゃないパーツなのですね。

まあそれでも、デザインの締めの要素として重宝しているのは確かで。
「ここでページはおしまいですよ」とお知らせする意味としては十分機能しているのではないかと思います。

それと、このブログに記載しているので解説をすると。
Copyright(C)2014/SELF-SERVICE ALL Rights Reserved

まず最初のCopyright、次の(c)。(c)は©とも書きますが、どれも同じ意味です。
ダブって表記していることになるので、どれか1つでいいはずです。

次の2014。ここは著作物の年号です。今はシステムが自動的に吐き出している「今の西暦」を表示させていますが、この年号は「著作権が発生した年」を記載するものなので、古い年の記載でもかまいません。
2010となっていれば、2010年から著作権が発生していますよ、という意味になります。
もちろん著作物を作った時点で著作権は発生しているので、特に年を記載する必要もないです。

最後のALL Rights Reserved。これは「すべての権利を保有しています」というもの。
しかしながら、これも現在では特に意味はないそうです。（詳しくはWikipediaで）

ということで、簡潔に書くと、
© 著作者名
で問題無いです。
英語じゃなきゃいけない理由も特にないと思いますが、諸外国の方々にも著作権を主張したい方は英語表記で。  続きを読む

あっという間に一年です。
というわけで、2014年のノートを購入。
今年も無印です。

2010年から続けて来年で5年目。
色が茶と赤しかないので、ずっと茶を使っています。
1色刷りになったのは残念ですが、ハードカバーのリングノートで、立ったままでも簡単にメモが取れるという利点からこのノートにしています。
今年は、2色刷りでスウェード調のかっこいいノートもあったのですが、ハードカバーじゃなく、リングノートでもないので諦めました。

ということで、来年もお世話になります。