blog - みきまるしぇ

　ある場所に期間限定で参加することになり、プロフィール写真をくださいと言われたのですが、ありません。スナップ写真のレベルですら、ほとんど写真はありませんし、15年以上前にそこそこ普通の顔で撮影できた証明写真は、あまりにもまじめすぎるので使えませんし、この春にマイナンバーカード取得のために撮影した顔は、もうあまりにも生活感が出ているので使えません。つまり、プロフィール写真は、新たに撮るかアバターを作るかしか、選択肢がないのです。

　というわけで、おそらくアバターも認めてもらえそうな場であることを確認し、作成してまいりました。パーツを選んで確定ボタンを押すだけの、簡単サービスです。できあがった画像の持ち帰りに際して難しい規約などもなく、ありがたく作成させてもらいました → こちらのサイト: Anicharaさん

　いままでプロフィール写真といえばほとんどを食べ物画像にしてきた関係で、こうしたサービスについて検索したことがほとんどなく、今回はいろいろ勉強になりました。

　

　まず、問題の姉妹サイトは、中味が増えるのが1ヶ月に1回くらいですので、すぐに検索エンジンに掲載されなくても当たり前と思い、つい先日までほとんど気にしていませんでした。

　ただ、2回目の更新をしたあたりから「まったく掲載されないのはなぜ」と疑問に思うようになりました。内容はいちおうありますし、悪質サイトではありませんし、何度かTwitterや関連サイトで紹介し、リンクも張っています。Googleも、そうした「リンクを張っている場所」を紹介するのですが、本体をインデックスしてくれません。

　そこで、まず検索窓で、直前のダメ押しとして（ほんとうに載っていないかを確かめるため）
site:stories.mikimarche.com と入力してみました。
　（site: を目的のドメイン名の前に付けます）

　するとこういうものが表示されます。

　これをクリックしますと、こちらの総合サイト内にあるメニューに飛ばされます → Google検索セントラル
　初回でしたら、そのまま画面に出ている「お試しください」表示をクリックしたほうが、関連メニューに直接飛べますので便利です。

　すると自サイトであることを確認するための作業画面が出ます。ドメイン名を入れる欄、またはURLを入れる欄がありますので、URLを入れる欄（わたしが見たときは右側でした）に、掲載を希望しているドメイン内の階層（ファイル名ではなく階層）を入れます。オーナーならこのHTMLファイルをそこに置けば本人確認になりますという案内とともに、小さなHTMLファイルがダウンロードできるようになっています。それをダウンロードして、指定した階層に入れます。そして画面で「確認」を押しますと、確認できましたと表示が出ます。

　そのあと、メールボックスのほうに「先ほどのサイトを検索エンジンに掲載しますか」という案内が来ていたので、クリックしておきましたところ、のちほどまた上記画面を見たときには、画面表示が「処理中、1日後にまた見てください」という内容に変化していました。

　さて、掲載されるのでしょうか。

　悪い要素がなければ、掲載されるのでしょう、おそらく。気長に待ってみます。

 

　QRコードというものはとても便利ですが、開発されたデンソー（現在はデンソーウェーブ）という会社が特許を行使しなかったために、日本以外にも幅広く普及し、幅広い分野の産業や、最近ではこうして一般人がURLを表示するのにも使えるようになって、とてもありがたいことです。

　QRコードは多くの場合スマホのカメラを向けただけで読みとれることがあり、その場でブラウザが開いて相手のサイトを見ることが可能です。一部の機種では、カメラではなくて、QRコードを読むアプリが必要な場合もあります。

　先ほど、QRコードを作ってくれるサイトを利用してみました。「QRコード作成」で検索すれば多くのサービスが見つかりますが、わたしが利用したのはこちらです。 → https://qr.quel.jp 

　説明もわかりやすいので、ご関心のある方は、覗いてみるとよいのではないでしょうか。

　たくさんの文字列、文章、あるいは文字やデータの集合体に対して、規則性に基づいた表現を使って探しものをしたり、内容を置き換えるなどの編集ができます。そのときに使う表現を「正規表現」といいます。いや、もしかしたらすごくきちんとした定義があるのかもしれませんけれども、わたしはそう理解しています。

　たとえば数ページ程度の文章やデータであれば、ひとつひとつ検索して手で直すことも手間ではありませんが、数百、数千のページにわたって変更をしなければならないとき、これがとても役立ちます。
 

　実は本日ですが、大きなテキストファイルからルビ記号に囲まれた文字をすべて探して消そうとしました。例を書けばこういうものを
《たとえばこの中に含まれている内容がルビです》
　…消そうと思ったのですが、うっかり正規表現の記憶違いをしていて、関係ない文字列までが消えてしまう。あれれ、おかしいぞと検索をしましたところ、まったく同じ内容で質問をしている人の掲示板を見つけてしまいました →  《》で囲まれた文字をすべて削除したい

　ネットは便利ですね。わたしが最初に書いたものがきちんと動かなかったのは「 .*? とすべきだったところを最後に ? を付け忘れたため」だったとわかりました。

　また、こちらの murashun.jp さんのように、正規表現が見やすく整理されているものもありますので、ブックマークしておいて、たまに見るのも勉強になります→  基本的な正規表現一覧

　去年ですが、閲覧用に残しておいた自分の古いブログ内容を編集し、静的なテキスト部分だけを残すという、手間のかかる作業をしました。もう使っていない古いブログでしたが、CGIなど動的な部分が残っていれば誰かに狙われないともかぎりませんので、念には念をと思ったのです。合計で数百ページから該当する箇所を削除してまわる作業でしたが、正規表現と合わせて、テキストエディタで楽に実現できました。

　難しそうに思えても、何か思いついたとき「正規表現を検索して調べてみようか」と、考えてみるだけでも、けっこう新しい世界が開けるかもしれません。

　ウェブサイトは、かつて誰かが書いたものを見に行く場所でした。あらかじめ用意されたもの(HTMLファイル)を、情報が欲しい側が見るスタイルが中心でした。
　その後、どんどんと時代が下り、ウェブサイト側には情報があって、見に来た人がどの情報を見たがっているかがわかった段階で、HTMLファイルを生成して表示させるスタイルに変化していきます。現在の主流はこちらです。

　その際、見に来た人にまじって、悪意のあるロボットが検索窓や問い合わせフォームなどの入力可能な場所を狙い、一般的な文字列ではないもの（コード）を入力して情報を盗み出そうとする、あるいは改竄するなどの被害が出るようになってきました。これらを防ぐため、閲覧に来た人に最低限のことだけを許可するよう、目を光らせる役割がWAFにあります。

　建物のセキュリティに例えますと、こんな感じです。
　入館者が入り口で名前を名乗り、身分証を見せます。入れてくれるのが玄関の警備員さん（認証）だとしますと、WAFは内部で、その人と行動を共にする立場です。どこかの部屋にはいろうとする人に「それは、入館時に用があると言っていなかった部屋ですが、はいるつもりですか」と、確認のためストップをかけるお仕事。

　両方の係員さんがいて、より安全と言えるのかもしれません。いないよりも両方いたほうが、それはたしかによいでしょう。ただしごく小規模なウェブサイト（管理者がひとりまたは少人数）では、入り口だけの警備員さんでもいいのかなと、迷うところではあります。

　こちらのCANONのサイトが、やや専門的ではありますが、WAFについてわかりやすくまとまっています → https://cweb.canon.jp/it-sec/solution/siteguard/waf/

　実はこのWAFですが、たまに厳しすぎることがあるのです。ときおりウェブサイトの管理者が正規の作業をしようとしても、ブロックすることがあります。

　昨日、実はわたしは自分のウェブサイトのデザイン変更で、JavaScriptのある場所を触ろうとしたのですが、いっさい反応しない上に、場合によってはクリックしただけで403（権限がないときに出る記号）が表示されることも。なぜなのか、なぜなのかと2時間くらい悩んでしまいましたが、ようやくつい最近WAFをオンにしたことを思い出しました。以前からときおりオンにしては、不都合でいったんオフにしたりと、迷いながらオンオフをくり返していたのです。

　今回も、ねんのため作業中のみオフにし、作業が終わってからオンにしました。次回また、同じことであたふたしないとよいのですが。

 

---

　■　まずは、カメラ大手のキヤノンのサイト内 → 一眼レフ、ミラーレスカメラでの写真撮影のための「撮影テクニック記事まとめ」です。

　撮りたいものが風景なのか、動物なのか、人間なのかなどの種類別の解説や、おもしろテクニック、撮影用バッグや機材の選び方など、これまでの記事がまとめられています。
　内容は上級者向け。

　自分の身の回りのことだけ撮影したいと思う人も多いかと思われますので、ほかにも見てみましょう。

　■　こちらは、スマホや家電などを販売するノジマのサイト内 → 今すぐできる! 映える写真をスマホで撮る方法【初心者向け】

　用語解説もある、丁寧な解説ページです。題材の紹介も、ホットケーキやクマさんのぬいぐるみなど、親しみのある挿絵です。やはり情報ページというのは、視認性（言い換えれば、目にはいりやすいかどうか、視覚的に「とっつきやすいかどうか」）は、大切と思います。

　■　スマホ（Android / iPhone）の設定方法も含め、とくに食べ物の撮影について解説しているのは、こちら → Happyになる「はぴる」サイト内「食べ物を美味しそうにスマホカメラで撮る！写真の撮り方【超初心者編】」

　それにしても、美味しそうな写真が多い…。
　とても具体的でわかりやすい構成ですが、サイトを拝見したかぎり、こちらは個人の方が運営のようです。当方もまた個人で運営するサイトとして、見習わなければと思う点が多くあります。

　■　スマホで植物の撮影を伝授してくれるのは、鉢植え植物の栄養剤などで有名なハイポネックスが運営するサイトPlantia内 → 「スマホで簡単！上手くなる身近な植物撮影術」

・目線を下げる
・背景を気にする
・露出を変える

　この3点がポイントだそうです。植物のスロー動画撮影も解説。

---

　またほかにもよいサイトを見つけましたら、ご紹介にまいります。

 

 

　.htaccessでできることは、制御や、誘導です。

　簡単なところでは、この階層から下はパスワードを知っている関係者しか見られないようにする、といった制御。あるいは自社内のコンピュータからしか接続できないようにするといった、IPやホストでのアクセス制限。

　たとえば、架空ですがミキマル製菓という会社があり、その会社のサイトは mikimaru-seika.com というドメインを持っていたとします。それ以前に関連部署が mikimaru-seika.net で通販をしていたけれど、通販部門は現在お休みしており、そのリニューアルが終わるまでの数か月は、mikimaru-seika.netに来たお客さんをすべてmikimaru-seika.com内の説明ページに自動でジャンプさせてしまおう、といったことが可能になります。

　あるいは、アドレスに統一性を持たせて管理しやすくするといったことにも役立ちます。
　mikimaru-seika.comにアクセスしたお客さんが、たまたまそのとき表示されたmikimaru-seika.com/index.html という場所でブックマークをして、次から index.html をつけたままのURLでアクセスしてくるかもしれません。ですがサイトとしては、将来的にその最後のファイル名が変わってしまう可能性を考えて、念のために index.html でアクセスした人にも、mikimaru-seika.com/ に誘導するように.htaccessに書いておくことができます。

　.htaccessというのは、実は中身は普通のテキストファイルです。パソコンなどに最初からはいっているメモ機能のソフトウェアで書けます。文法を間違わないように気をつけることと、テキストファイルとして作成して、ネットに載せたあとで、ファイル名を.htaccessに変更するだけで使えます。（最初から頭にドットをつけたファイル名ではなく、最後に名称変更をして、ドットをつけます）

　実際に書いてみたい方は、ネットで「.htaccessとは」と検索すれば、例文がたくさん表示されますので、ぜひお試しを。

　わたしが以前に使っていたソフトにKompoZer（コンポーザー）というものがあったのですが、それはもう何年もずっと更新されておりません。操作が似ているもので同じMozilla系の流れを汲むSeamonkey（シーモンキー）というものがあって、それをたまに使ってきました。

　最近では、パソコンにインストールするタイプの作成支援ソフトだけでなく、オンラインで作業をしてそのままHTMLを作成して公開するというサービスが増えてきています。どちらにも利点がありますが、わたしは最近ふたつほど試してみました。

○　インストール型のソフト - BlueGriffon
　Mozilla系列のブラウザであるFirefoxをベースにしています。Mozilla系に慣れている人には、簡単に使いこなせます。
　公式サイトからダウンロードしますが（その段階では英語）、ダウンロードしたあとは、設定画面で日本語が使えるようになります。ちなみにMac OSですと、Preferenceという画面からAdvancedに進むと、以下のようなメニューで日本語が選べます。

　このソフトでとても楽と思える点としましては、たとえば何年か前に書いて古い文法になっているHTMLファイルを手直ししたいときですね。このソフトでいったんそれを呼びだして、画面をすべてクリップボードにコピーし(MacならばCommand+A、WindowsならCTRL+Aを押した状態で、Aに置いていた指をCに変更します)、新規作成画面を出して、ペースト(MacならばCommand+V、WindowsならばCTRL+V)します。するとHTML5の文法で書き直してくれますので、それを新たに別名で保存すれば、その後はらくらく更新できます。

○　クラウド型（オンライン）のサービス - STUDIO

　こちらは、オンラインサービスです。複数の人でも作業できます。たとえば会社やグループでひとつのサイトを更新するときに、メンバーで同じものを触りながら更新できます。
　作業で作ったファイルを持ち帰って、別の場所で使うのではなく、その場所ですべて完結しています。無料版ですと、"場所名.studio.design"というURLで公開されます。有料版ですと、ご自分で用意したドメインを使うことができるようです。

　このサービスの何がすごいかといえば、自分できれいな画像を用意していなくても契約先のフォトサービスからきれいな画像をダウンロードしてきてページに組み込めたり、なんと、評判のモリサワフォントまで使えるのです。わたしもいま会員登録して少しずつ学んでいるところですが、たしかにモリサワが選べました。

　モリサワフォントは、かわいいものも、上品なものもあり、これがサイトのデザインで使えるというのは、ほんとうに魅力的ですね。

　このサイトを昨夏に開始時には「最初からネット上で大々的な商売をはじめようと思わない方がよいです、まずは少しずつ」と書いておりましたが、最近の決済サービスは店頭でも使えるスマホ決済も含め、いろいろと種類も増えております。外国人旅行者や日本国内の若い世代を中心に、小銭を持ち歩かずにできるだけ電子的な支払で済ませたいと思う層も、厚くなっています。

　各社それぞれにサービスがありますが、わたしが自分で（消費者の立場として）使ったことがあるものを中心にご紹介します。

• スクエア (Square) - 小規模なお店でも簡単に導入可能な店頭型カードリーダーを提供するほか、オンラインでの請求書発行とカード決済による料金回収がおこなえます。消費者としてオンライン決済で利用したことがあります。
• PayPal  - こちらは消費者として買い物に利用したこともありますが、このサイト上での業務で支払を受ける際の候補として、アカウントを所持しています（本人確認ができている会員は、料金の受けとりができます）。​また、相手（お店や個人）がアカウントを所持していれば、金額を指定して送金できます。
• ゼウス (ZEUS) - このサービスは以前から存在しています。オンラインショッピングでこのサイトと契約しているお店を通じ、消費者として利用したことがあります。
   
• 楽天ペイ - こちらは言わずと知れた楽天市場の系列です。楽天以外でのオンラインショッピングでも、契約しているお店を通じ、楽天IDで決済できます。
• SBペイメントサービス - こちらはソフトバンク系列です。大手の企業も採用している意味では、安定のサービスです。
• Amazonペイ - Amazonのモバイル用アプリからそのまま使用できるため、手間いらず。対応する店舗が増えればかなり便利な存在だと思います。ただ、街頭で実店舗を構えるお店に関しては、まだそれほど普及していないようにも感じられますので、これからが楽しみですね。
   

　おもにパソコンなど画面の大きな環境でインターネットを利用していると、ウェブサイトを見にいったときに履歴やアドレスバーにアイコンが付いていることが、わかる場合があります。スマホやタブレットなどの画面ですと、そのときは気づかないのですが、ブックマークや履歴、よく見にいくサイト一覧で、サイトが名前ではなくアイコンで表示されているのがわかると思います。

　たとえば
Facebookならば、濃い青の背景に白のF  
ツイッターなら明るい青の背景に白い鳩
ですね。

（これらのファイル2点は、FacebookはWiki Commonsからのリンク表示、Twitterは正規のサイトからダウンロードしてきたものをそれぞれ16pxで表示しています）

　こういった仕組みで表示されるものを favicon (favorite icon お気に入りアイコンの略) と呼びます。日本語のカタカナでは、ファビコンです。これはもともとマイクロソフトのブラウザInternet Explorerからはじまったものだと聞いています。しばらくのあいだ、そして現在でも多くの人が、画像ファイルを作成する際に拡張子を .ico としたファイルを利用しています。

（この部分は無駄知識ですが、マイクロソフト系のOSでは拡張子が3文字で処理されてきましたので、.iconであればわかりやすかったところを最後のnをとって.icoとなっています。同様にウェブページの拡張子 ".html"も、マイクロソフト系の環境では.htmと長く表示されてきましたが、正式には最後にlがつくものでした）

　最近はで大きめファイルで作る事例も多いようなのですが、実はこれ、初期のころは律儀に16pixelの正方形で作られていました。その16pxというのは、インターネットでみなさんが日本語の文字をご覧になる場合は12ptというサイズで指定されているサイトが多いですが、これとほぼ同じです。日本語1文字分に画像を入れていたわけで、90年代末ころには、あまり高度な柄は入れられませんでした。

　その後、世の中のパソコンやさまざまな環境の変化で、大き目の正方形ファイルで作っても読める人が増えてきたため、いまでは96pxくらいで作る人もいれば、144pxなどの人もいます。大きく丁寧に作っても、読む人の環境に合わせて縮小表示がなされるので、大きなファイルのまま表示されるということではありません。ただ、大きくすれば相手のパケット代は増えますので、そのあたりの判断から、大きすぎないものを心がけると、よいのかもしれません。

　favicon用のファイルは伝統的には拡張子.icoのものでしたが、最近では、サイトのほうで独自に用意した.pngを使うと宣言してロボットにそれを読ませたり、アップル社のapple-touch-icon.pngを使用している例もあるようです。

　昔ながらの.icoファイルを用意するには、

• それ専用が可能なソフトをダウンロードして作成——これは、「アイコン作成ができるソフト」などの検索をすれば無料のものも見つかります。わたしは多機能の画像ソフトGIMP（読みはギンプ）というものを使っています。
• オンラインで作ってくれるサービスもあります。「ファビコン作成」などの検索をしましょう。
• 自分が.ico以外の形式で持っているアイコンを.icoに変換してくれるサービスもあります。「ファビコン変換」などで検索してみましょう。

　ちなみに当サイトでは、普段の画像作りはAdobe社のPhotoshop Elementsで、数年前のバージョンを使っています。これで画像を作って、ファビコンにする場合は、最後にGIMPで.ico変換しています。