CALENDAR
S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< July 2020 >>
ARCHIVES
CATEGORIES
Amazon左








マウスコンピューター/G-Tune






MOBILE
qrcode
「廃線前を訪ねて」ホームページをレスポンシブ化
ヒマなので自分のホームページをパソコンのみならず、タブレットやスマホでも最適化されて閲覧できるように、レスポンシブWEBデザインに変更している。

クイズの本4冊のページのレスポンシブ化が終わったので、今度は旅行系コンテンツの修正に入った。
まずは「廃線前を訪ねて」だ。

haisen-1.jpg

これは2000年前後の、国鉄やJRのローカル線廃止が一段落したころ、「そういえば廃線になった路線って結構乗っていたよな、今の若い人たちがまだ幼い頃の、国鉄ローカル線の現役時代を紹介しよう」との考えで、ローカル線廃止が相次いだ北海道に絞り、昔の写真や切符、駅スタンプを総動員して、在りし日の、廃線になる前の姿を紹介したコンテンツだった。
鉄道マニアの集まりで「僕が作ったんです」というと「見た見た」という人も多かった。ありがとうございます。

「廃線前を訪ねて」は決定的に今の世の中に合わないホームページの作り方が残っていた。それはフレームだ。左側に路線名(メニュー)、右側に本文(コンテンツ)が出る構成で、作るのも簡単でひところは流行ったのだが、SEO的によくなく、ましてやレスポンシブ化できなくて、現在では廃れている。また、レイアウトもtableを使っていたが、これもCSSでするようになった(一部のtableはそのまま使っています)。

15年も放置しており、ホームページデザインが陳腐になったとともに、留萌本線や札沼線の先っぽが廃止になった。

これまでレスポンシブWEBデザインは、右側カラムが狭くてメニューや広告バナー、左側が広くて本文という構成が多く、クイズの本もそうしたのだけれど、これまでのデザインのこともあり、左側カラムが狭くてメニュー、右側が広くて本文という、逆の構成にした。

haisen-2.jpg

スマホで見ると、メニューがやたら長くて広告も入り、いくらスクロールしても本文にたどり着かない欠点があるが、こうしてしまった。

本文は2000年ごろに書いたので、大体はそのままにしたが、一部は書き換えた。写真も以前はちまちま使っていて、大部分は昔の写真(ファイル)のままだけれど、新規の原稿の写真は大きく使っている。だから1ページをダウンロードするのに時間やパケット代がかかるかもしれないが、Wi-Fiスマホ時代のコンテンツということにしておく(それでも軽いほうがいいに決まってます)。

各章の見出しに使った写真を紹介します。

メイン。士幌線十勝三股駅。
haisentop.jpg

道央。夕張線紅葉山駅。
dououtop.jpg

道北。天北線浜頓別駅。
douhokutop.jpg

道南。胆振線喜茂別駅。
dounantop.jpg

道東
。白糠線北進駅。
doutoutop.jpg

いずれも私が撮影した、二度と撮れない写真です。


今回の「廃線前を訪ねて」のコンテンツ作成に下記のサイトのお力を借りました。ありがとうございます。

●レスポンシブWEBデザインのページのベース
ポポデザイン様のテンプレどん。
haisen-9.jpg


●ページ送りのボタン(ページャー)
リンク切れ。
haisen-3.jpg

●Googleマップのレスポンシブ埋め込み
WEBDESIGN DAY様のCSS。
haisen-4.jpg


●Youtubeのレスポンシブ埋め込み。
webclips様のCSS。
haisen-7.jpg


●写真やタイルの横への貼り付け。
CSSレイアウトを学ぶ様の「inline-block」。
haisen-6.jpg


簡単な記述です。
.shinmeiphoto {
display: inline-block;
width: 253px;
height: 240px;
margin: 2px;
}

HTMLは、
<div class="shinmeiphoto">
<p><img src="shinmeiphoto/horonari.jpg" alt="幌成駅"><br />幌成駅</p>
</div>
これの繰り返し。

●カラーチャート(色見本・色指定)
Color-Sumple様の色見本と配色サイト。
haisen-8.jpg


いろいろな人が、自分のノウハウを公開している。そして考えることは同じで、そうしたいけれど細かいことがわからない人が検索する。そのおかげで私のサイトが出来て行ってます。
ありがとうございます。
| パソコン・インターネット | 18:17 | comments(0) | - |


パソコン関係のトラブルが3つ発生
もう7月ですね。梅雨だかなんだか、風雨が断続的に来て、蒸し暑くてウザイ天気です。

書斎に引きこもってパソコンに対面しているが、3つもトラブルがあった。

●その1 ウォークマンにアルバムジャケットが表示されない

DSC00242.jpg

ウォークマンにパソコンからCDなどを取り込むには、SONY Music Center for PCを使ってファイルをパソコンからウォークマンに転送する。パソコンから曲は消えない。
iTunesで録音してそれをMusic Centerにコピーしてウォークマンに転送する。CDの曲名をネットから自動的に取得するが、アルバムジャケットの写真もウォークマンに転送され、現にこれまでそうしてきたが、なぜかジャケットが表示されない。iTunesを使わないでMusic Centerに録音して転送しても表示されない。これは寂しい。
あいみょんも髭男もサラ・ブライトマンもジャケットが表示されない。

●その2 FFFTPでファイルが表示されなくなった。
廃線前を訪ねて」という、北海道の廃止ローカル線の在りし日の姿を紹介するサイトを運営している。レスポンシブ化いている。
パソコンでホームページを作ってサーバーに転送するソフトでFFFTPはメジャーなソフトだ。無料で使えてありがたい。ときどき、何も表示されなくなる。再読み込みをすればたいてい表示されるようになるが、今回はいったんパソコンの電源を落としてもダメだ。

DSC00239.jpg

やむなく、サーバー会社が提供しているブラウザのファイルマネージャーを使って転送しているが、使いにくい。

DSC00236.jpg

ホームページの先生から別のFTPソフトを紹介してもらったが、難しくて使いこなせなかった。早く安定してほしい。

●その3 CSSが働かなくなった。
その「廃線前を訪ねて」レスポンシブデザインはこれまでのクイズの本のレスポンシブ化同様、ポポデザイン様のテンプレートをベースにしている。
本文は黄色地になっているのだが、突然なぜか周囲と同じ濃いグレーになってしまった。

DSC00240.jpg

これでは文字が読めない。
レイアウトも色指定もCSS(スタイルシート)で指定しているのだが、突然のことだ。
かろうじて、タブレットに残っていたキャッシュだが、本来はこうなってほしい。

DSC00243.jpg

CSSがいけないのか、js(Java Script)がいけないのか、いじったのはCSSだけだし、こんな表示に影響が出るのはなぜだろう。今までちゃんと表示していたのに。
老眼なので小さい字は見えないから虫眼鏡で拡大して確認した。



ホームページに限らず、プログラム制作にはちょっとした文字の誤記も大きな影響を及ぼす。


.  ,  :  ;  


これらは間違いやすいし、それだけで動かなくなる。

すると、自分で書いた部分に

[  {  }  ]

の間違いがあり、本来は波かっこなので「えっ、そうだたのか」と思いつつも直す。それでも動かない。

ちゃんとCSSが働いている「TVクイズ大研究」のCSSと比較して分かった。

「これ、だぶってるじゃん」と}が連続している記述を消していたのだ。消したのを覚えているが、CSSが働かないのと結び付けられなかった。いや、消すほうがおかしい。

DSC00238.jpg

124,125行目に

}
}


と続いているのでポポデザイン様の打ち間違いだろうと、一つを消してしまったのだ。人を疑う前に己を疑え。

しかしこれはかっこをさらにかっこでくるんでいる、記述の長いセレクタだった。パソコンやタブレット、スマホで表示を切り分ける大事な記述部分だった。



上の、84行目を閉じるのが125行目で、85行目の閉じが124行目だ。
}
を書き足すと、表示が元に戻った。

DSC00235.jpg

こんなことでずいぶん時間を無駄に消費した。そもそもCSSのかっこが入れ子になっているのに気が付かないのがおかしい。消すものでない。

この修正作業を、ブラウザのファイルマネージャーでやったので、たいへんだった。FFFTPも直ってほしい。

廃線前を訪ねて」のレスポンシブ化は今週中を目標にするけど、厳しいか。
| パソコン・インターネット | 19:49 | comments(0) | - |


Appleのニセメールにひっかかった人
毎週のようにAppleやAmazonからニセメールが来る。


↑クリックで拡大

支払いの同期が失敗した」とか、「第三者の不正アクセスがあった」とか、「セキュリティ上の問題があった」とか、ようするにアカウントをロックしたので期限内に「支払いの同期」をするように求められる。
そうしないとサービスが使えなくなると脅す。

最近は巧妙になり、
「この手紙は信頼できる送信者から送信されたものです。
このメールアドレスはAppleアカウントとして登録されています。」


apple-2.jpg

と、わざわざ最初に表示される(赤枠)。あたかもメーラーがこのアラートを出したように見せかけているが、これもメール本文の一つだ。

それに「この手紙」とは書かないね。日本人なら「このメール」と書くものだ。

もう一つ、かつては「パスワードの変更を直ちにしてください」という、パスワード入力を促す文言があったが、そういうのはニセメールとの報道がされるようになり、かえって敬遠されるので、パスワードとは一切書かずに、「支払いの同期」のようなあいまいな表現を使っている。

そしてボタンがあるけれど、マウスを載せて下部のステータスバーを見ると(緑の枠)、まったく違うURLを示す。

ある人が「フィッシングされたかもしれない」と、慌ててクレジットカード会社に電話をしていた。Appleから誰かに使われているかもしれないとのメールが来たとのこと。

「どうせニセメールだろ、俺は毎週メールを受け取っているぞ」と言ったが、「本当かウソかわからないのでカードを止める」とのことで、以前、海外旅行で不正利用された経歴を持つ人だった。

カード会社によると、実際、この数日にカードを使った形跡は本人を含めてないとのことで無事だった。用心に越したことはないが、ニセメールにウブな情報弱者が過剰反応したわけだ。

一つ褒めたのは「ログインはメールのリンクボタンでなくTOPページから入った」とのこと。これがリンクボタンからならAppleIDやパスワード、カード番号などを入力してまるまる盗まれていたはずだ。
しかし銀行に連絡したりクレジットカードを止めて再発行の依頼をしていたから、かなり面倒な手続きになってしまったわけで、ご苦労なことである。
むしろ、ネットリテラシーが高いと言えるかもしれない。

私はこれに限らずメールのURLはかなり気を付けてクリックするかしないか考えるが、一番良いのはAppleやAmazonの本来のTOPページからログインすることだ。Yahoo!やGoogleで検索するか、あらかじめ正規のURLをブックマークをしておくか、そこから入る。

これ以外にもWi-Fiからカード情報が漏洩することもあり得る。
海外旅行に行ってホテルのWi-Fiから通販で買い物や次に泊まるホテルの予約をするなど、辞めておいたほうがいい。
あるいは、ホテルのベッドサイドにあるUSBメモリポートからスマホの充電をすると、まるまる情報が抜き取られることがあるから、充電は必ずコンセントからするようにしている。

| パソコン・インターネット | 21:45 | comments(0) | - |


富士通、親指シフトキーボードやOASYSの販売とサポート終了へ
パソコンのキーボードはほぼすべての日本人がJISキーボードを使っている。
しかしごくわずかな人は「親指シフトキーボード」という"特殊な"キーボードを使っている。絶滅危惧種である。

親指シフトキーボードは富士通が開発した日本語ワープロ(パソコン)用のキーボードで、富士通OASYSで使われていた。

DSC09434.jpg

残念ながら富士通は親指シフトキーボードやOASYSの販売とサポートの終了をアナウンスした。来年で販売が終了する。JISキーボードがデファクトスタンダードになり、シェアが著しく下がって事業継続が困難になったのだ。詳しくはリンク先を見てね。

1980年代、英文タイプライターに変わる日本語タイプライターとして電機メーカー各社が一斉に日本語ワードプロセッサーを発売したが、多くはJISキーボードを採用していた。しかし富士通は神田泰典氏らによって、親指シフトキーボードを開発し、ワープロOASYSやパソコンFMVなどでも採用したが、残念ながら異端児とされて普及しなかった。

親指シフトキーボードは、一つのキーに上下二つの文字が割り付けられており、その変更を中央下部にある親指シフトキーと同時打鍵することで上の文字が入力された。

例えば「は」と「み」が同じキーに割り付けられているが、「は」を打つときはそのまま、「み」を打つときは右側の親指シフトキーと同時打鍵した。

では「ば」を打つときはどうするか。それは左側の親指シフトキーと同時打鍵することで濁音が入力された。つまり下段の文字は濁音になる文字が割り振られていた。

DSC09425.jpg

ゃ、っ、などの促音・拗音にもキーが割り当てられ日本語の特質を十分に研究してこのキーボードが出現し、JISキーボードと比較してとても入力しやすい優れたキーボードなので、私はOASYSを買った。MY OASYSはCRTディスプレイで75万円した。これは驚異的に安かった。なにしろワープロ第1号は630万円したのだ。

1984年のうちにあったMY OASYS。CMで高見山関が軽々持っていたのを思い出す。



一方で、パソコンのPC8801も持っており、こちらはNECなのでJISキーボードだ。



さらに、業務用のOASYS100Fを買った。これは100万円以上したが、このワープロを使って「TVクイズまる金必勝マニュアル」などを書いて、フロッピィ入稿をして悦に入っていた。
ワープロの価格が下がり、周囲の友人にも勧めたので、私の周りは親指シフターが多いはずだ。

1985-07-1-26.jpg

私は親指シフトキーボードでワープロ・キーボード入力を覚えたが、今ではJISキーボードでローマ字入力だ。でも使えと言われれば親指シフトキーボードを使える、バイリンガルだと思っている。

DSC09435.jpg

このキーボードはパソコン用だが、日本語IMEソフトもJapanist 10という"特殊"なソフトを使わなければならない。だから押し入れにしまい込んでおり、今回撮影用に取り出したが、重たかった。幅は49cmある。

1993年の写真。当時日本のパソコンの標準機というかデファクトスタンダードだった、NECのPC9801。サードパーティー製の親指シフトキーボードにしてある。



親指シフトキーボードがとても入力しやすいのに普及しなかったのは、ビデオデッキと同じ。ベータが高性能なのにVHSに駆逐されたと同じく、「仲間づくり」がうまくいかなかったのだ。
これには通産省の「いじわる」とも言うべき動きがある。小指でシフトする「新JISキーボード」を出したのだ。小指は力が入らず、まったく普及しないですぐに消えたが、親指シフトキーボードをJIS化したほうがよかったはずだ。ちなみに英字は親指シフトキーボードでも同じ配列になっている。なので親指シフトキーボードでローマ字入力の人が少なからず存在する。

富士通は2001年には日本語入力コンソーシアムを立ち上げて同社が保有する知的所有権の一部をキーボードメーカーに提供、「NICOLA規格」として標準化を提案していた。しかしJISキーボードがデファクトスタンダードとなったことで、今回の終焉を迎えたのである。
性能(能力)が良くても人あたりがよくないと孤立して消滅する、まるで私の人生のようなものである。

最近はスマホが台頭して、フリック入力になり、学生はこれで論文を書くらしいから、世の中はどんどん変わる。

| パソコン・インターネット | 18:35 | comments(0) | - |


ZOOM会議
新型コロナウィルスで外出や人との面会がままならない状態で、インターネットを使ったテレビ電話システムが大流行している。
SkypeやLINEはどちらかと言えば1対1のプライベートな会話に使われているようだ。
ビジネスではZOOMを筆頭にマイクロソフトteamsSlack、最近になってGoogle meetが反撃を開始している。
いずれも時間制限や人数制限があるものの、無料で使える。パソコンのみならずスマホなどでも使える。

中でもZOOMはZOOM飲み会という言葉がはやるように、パソコンの前に集まってそれぞれの家で酒を飲みながらみんなと会話をしてあたかも居酒屋にいるような雰囲気も醸し出している。

これまで海外との会議はSkypeを使っていたが、今回初めてZOOMを使った。
東京とタイ、仙台の三元中継になった。

zoom20200512-1.jpg

多少、相手の画面がカクカクすることはあったが、画面で資料の共有もできたし、音声は良好で何ら問題なかった。

会議資料の画面脇にワイプで顔が映されるので、ワイプ芸人みたいにうなづいて反応を示した。
あらかじめうなづいている動画を作り、「背景」として流すワザがあるらしい。本人はどこかに行っている。

いつまで緊急事態宣言が出ているのかわからないが、そうであってもなくても、海外を交えた打ち合わせにはとても便利だ。
お疲れさまでした。ありがとうございました。
久しぶりの仕事でどっと疲れて、会議の後、昼寝をしてしまいました。これが在宅のいいところか。
| パソコン・インターネット | 21:30 | comments(0) | - |


フォトショップで写真ウィンドウを分離させるには
フォトショップ(photoshop)を使っていたら、写真がフォトショップの枠全体に表示されるようになった。

ps-1.jpg

2枚3枚と写真をドラッグしていくと、写真が重なってしまい、写真の上部のバーをマウスでずらして写真ウィンドウを小さくしても次にドラッグするとまた全体に拡大されてしまう。

どこか間違ってボタン操作をしてしまったようだが、どうすれば元通り写真ウィンドウが分離して表示できるかわからない。つまりこういう風にしたいのだが。

ps-2.jpg

そこでいろいろ調べたら、
[編集]→[環境設定]→[インターフェース(またはワークスペース)]で

タブでドキュメントを開く

のチェックを外すのだった。

ps-3.jpg

いったいタブって何?
私は複数の写真を並べて処理する機会が多いので、ウィンドウは分離していたほうがいい。

それにしてもこんなところのチェックをいじるとは思えず、どうしてこうなったのかが知りたい。

ちなみにタブで開いたほうが高速化されるそうですが、実感するほどではないと思います。

| パソコン・インターネット | 17:01 | comments(0) | - |


ZOOMミーティングの背景用のグリーンスクリーンを自作する
いよいよ緊急事態宣言が発令された。
基本は在宅ワークの私でも人との打ち合わせは発生する。かつては赴いたりご来訪いただいていたが、緊急事態宣言が出てからの対面打ち合わせは互いに気が引ける。そこで今はやりのZOOMによるミーティングをすることになってセットアップした。

無料プランは3人以上の会議は40分までで、それ以上は月2000円の有料プランになる。今のところセミナーをZOOMでする予定もないのでとりあえず無料でいいので登録した。

もともとWEBカメラはSkype用にあるし、わざわざ照明も用意している。

DSC08368.jpg

本来なら部屋が映るから片づけをしなければならないところが、ZOOMのおちゃらけ機能で背景を入れ替えることができる。ちなみに背景なしだと私の書斎はこのザマである。
200万画素のWEBカメラだから解像度が低い。セミナーで使うなど本格的にするなら、高性能のカメラを買ったほうがいい。



画面左下のビデオカメラアイコンの右側に  のマークがあるのでクリックする。

zoom-10.jpg

仮想背景を選択してください」と出るのでそれをクリックすると背景画像を選択する画面になる。

zoom-12.jpg

NONEは素のありのままの背景。右上角の  マークをクリックしてパソコンから画像を選んでパレットに出す。あとはパレットで背景にしたい画像を選べばよい。

私の場合、世界各地を旅行したのでシャレで名所の写真をいろいろ選んでみた。いくらでもあるんですが。

zoom-14.jpg

左上から、バンコク暁の寺、フランスモンサンミッシェル、ロンドン国会議事堂、
アメリカモニュメントバレー、アメリカヨセミテ、上海外灘(バンド)、
シドニーオペラハウス、クアラルンプールツインタワー、ドイツケルン大聖堂。
ZOOM用に撮影していないから、メインが自分の後ろになってしまうのが残念ですぅ。

背景画像と本人は非常にきれいに切り抜かれる。本人が動いてもほぼ追尾して切り抜かれるのだが、もうちょっときれいに切り抜かれたいと思った。

そこで映画などのCG合成で使われるグリーンスクリーン(グリーンバック、クロマキー)を自作してみた。

ちなみにアベンジャーズの撮影風景。緑のところに空飛ぶ背景が合成されるのだろう。

zoom-15.jpg

まず不要不急の外出と思われないようにと願いつつ近所の100均に行く。
買ったのはフェルト布(70cm*60cm)2枚とヒートン(ネジピン)で330円だった。ボンドは前からありました。

DSC08357.jpg
DSC08358.jpg

フェルト布を2枚並べて強力ボンドで貼り付けた。お裁縫で糸で縫い付けてもいいんですが、そんな能力はありません。

DSC08362.jpg
DSC08363.jpg

これで118cm*70cmの横長のグリーンスクリーンが出来た。

DSC08364.jpg

最初は金具の棒に取り付けて天井にヒートンをつけて天井から釣ろうとしたのだが、

DSC08365.jpg

そんな大それたことをする必要はなく、自分の頭の周りだけグリーンスクリーンであれば、そもそもの背景は差し替えてくれるのだから、本棚のCDや雑誌にクリップで固定した。ここは各自の部屋の環境に合わせて工夫してください。

DSC08366.jpg

こんな感じ。あまりに雑然とした書斎ですなぁ。片付けても片付けてもモノが増えて満杯になる。

DSC08367.jpg

このグリーンスクリーンを使うと、頭の周りがきれいに抜けると思う。

zoom-1.jpg

背景写真はこのような名所を考えがちだが、会議室や会社の自分の席、居酒屋や夜の町などにしたらそれなりの雰囲気が出る。また動画も可能で、動く背景がループで流れる。

在宅ワークに少しでもうるおいを出しましょう。そして早く新型コロナウィルスが収束しますように。

  
| パソコン・インターネット | 17:32 | comments(0) | - |


| 1/66PAGES | >>