にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2018/02/19. 10:39:06.

Sakura Scope (2015年02月)

ちょっと倒錯気味な、ただの日記です。(^^;)
これはやばいと思われた場合は、お早めに閲覧を中止されることをお勧め致します。

モバイルファーストの前にレガシーファーストなCSSで

古いブラウザ用のCSSを先に書くレガシーファーストモバイルファースト設計でCSSを記述すると、Media Queriesの記述方法に対応していない古いブラウザ(特にIE8以下)では、常にモバイル版デザインが表示されてしまいます。
それ自体は、「古いブラウザにはモバイル版を見せる」と割り切ってしまえば済む話なので別に構いません。

でも、モバイル版デザインもわりと凝っていて、モバイル版デザインの中にも「古いブラウザでは表示が崩れるようなCSS」が含まれていると、ちょっと困ります。その場合、古いブラウザではまともに閲覧できなくなってしまいますから。

そういった問題を防ぐために、モバイルファースト設計でCSSを記述する際に、「モバイル版デザイン」よりも前に、「レガシー版デザイン」を記述しておく方法がおすすめです。
モバイルファーストよりもレガシーを先にするわけなので、「レガシーファースト」とでも言えばいいかなと考えて記事のタイトルにも使いました。

古いブラウザ用のCSSを先に書くレガシーファースト(@All About ホームページ作成ガイド)

うちのサイト(のトップページ)には、この書き方を採用しています。
本当はトップページに限らず全サイトに適用したいんですが、そこまで自分のウェブサイトに時間を割けていないので(^_^;)、今のところはトップページだけに留まっています……。
もうちょっとなんとかしないとな……。^^;;;

レスポンシブ・ウェブデザイン採用時にCSS記述を楽にするモバイルファースト

モバイルファーストでデザインする際のCSSの書き方レスポンシブ・ウェブデザインを採用してウェブページを作成する際には、複数の画面サイズ向けにCSSを記述することになります。そのとき、重複する記述を極力なくすように記述できれば、管理や更新作業が楽になります。もちろん、CSSサイズも小さくなるため読み込みも早くなります。

そんな、レスポンシブ・ウェブデザイン採用時に重複記述を減らせる方法として、「モバイルファースト」なCSSの設計がお勧めです。レイアウト(デザイン)がシンプルなモバイル版デザインを「共通スタイル」として記述しておき、そこに追加する形で、大きな画面用のデザインを記述する方法です。

そんな「モバイルファースト」のCSSソースの書き方を、All Aboutで解説しました。

モバイルファーストでデザインする際のCSSの書き方(@All About ホームページ作成)

外部のフレームワーク等は使わずに、自力で1から全てを記述する場合の書き方を解説しています。
ぜひ、覗いてみて下さい!

※ここでは、特にモバイル端末の特長を活かした作り方や、モバイル端末での使いやすさに関しては扱っていません。あくまでも、「モバイル版もPC版も単一のHTML・CSSで作ると記述も管理が楽だから、レイアウトが単純なモバイル版を先に設計して、そこに諸々を付け足していく形でPC版デザインを書くと楽でいいよね!」という「CSSの書き方」を紹介しています。

「花燃ゆ」のメインテーマと、映画Annieの「Tomorrow」を

NHK大河ドラマ「花燃ゆ」のメインテーマと、映画Annieの「Tomorrow」をヘビーローテーション。自宅での作業中のBGMにしています。

NHK大河ドラマ「花燃ゆ」のメインテーマと、映画Annieの「Tomorrow」、「軍師官兵衛」のメインテーマ

今年のNHK大河ドラマ「花燃ゆ」のメインテーマ(NHK交響楽団)が気に入ったので、サントラが発売されるのを心待ちにしていました。なんだか高揚感を掻き立てる感じがするのがとても良いです。今月初旬に発売開始されたようなので、iTunes Storeで単曲をポチりました。
あと、つい先日まで公開されていた(もしかしたら今もまだやってるかも知れませんが)ミュージカル映画「Annie」の予告編でも使われていた曲「Tomorrow」(Quvenzhane Wallis)も気に入っていたので、映画自体は観には行けなかったんですが^^;、それも単曲だけポチりました。
その2曲をヘビーローテーション中です。

ちなみに、昨年の大河ドラマ「軍師官兵衛」のメインテーマも気に入っていたので昨年に買いました。こちらもたまに聴いています。
サントラのセットではなく、1曲単位で販売してくれる仕組みは大変ありがたいです。(^_^;)

確定申告の電子申告でエラーHJS0413Eがっ!(再起動で解決)

SHARP製のICカードリーダ先日、年1回しか使わないSHARP製のICカードリーダをUSBでPCに接続して、これまた年1回しか使わない住民基本台帳カードを読み込ませて、確定申告の電子申告を完了しました。
年1回しか使わないとはいえ、過去もう6~7回くらいは使ったことになるのかな……?
確定申告がペーパーレスで電子申告可能になって、わりとすぐに取得した気が。
住民基本台帳カードに搭載している公的個人認証の有効期限が2月半ばで切れてしまうので、早めに電子申告を済ませたのでした。

いつも通り、国税庁の確定申告サイトへ帳簿などを転記して手続き。
確定申告用の書類を作成するだけなら比較的多くのブラウザで利用できますが、電子申告まで行う場合には使用環境に制約があります。Firefoxでも問題ないっぽいですが、念のために(これまで同様今年も)Internet Explorer11で作業しました。^^;
しかーし。

エラーHJS0413E

過去の電子申告では特にトラブルなく手続きできていたんですけども、今回は、最後の最後、確定申告データに電子署名を付けて送信する段階になって、エラー「HJS0413E」が出てきました。
表示内容は、

HJS0413E:受付システムから応答がありませんので処理を中止しました。ご利用の通信環境等を確認の上、再度処理してください。

HJS0413E

受付システムから応答がありませんので処理を中止しました。
ご利用の通信環境等を確認の上、再度処理してください。

というもの。

エラーメッセージには「応答がありません」と表示されていますが、実際には、送信ボタンを押した瞬間にこのエラーが出てくるので、「応答を求めにすら行かなかった」感じです。
受付システムへデータを送信する機能自体が動いていない感じ。
国税庁サイト内にあるエラーHJS0413Eの説明ページによると、「ネット接続環境にエラーがあるか、PCの設定が正しくない」と解説されています。ウェブが閲覧できている以上、ネット接続にエラーがないことは明らかなので、PC側の設定に問題があるのでしょう。

そういえば、ICカードリーダへのアクセスを開始する直前に、Internet Explorerに対して何かのアドオンをインストールする操作が求められました。
これ系のツール(=電子申告処理のためにブラウザに追加しないといけない機能)は、確定申告操作を開始する最初の段階で求められる「作成コーナー事前準備セットアップ」内に含まれているはずなので、なんかおかしいな……? とは思っていたのでした。

とりあえず再起動……で解決

受信通知:電子申告等データを受信しました。で、よくよく思い出してみると、今回は、平成26年分の「作成コーナー事前準備セットアップ」を実行してセットアップを上書きした後、PCを1度も再起動することなく確定申告操作を開始して、ICカードリーダの読み取り画面まで移動してきました。
最近のWindowsでは、何かをインストールしても再起動を求められる頻度は減ってきました。が、それでも念のために何かをインストールしたら、とりあえずWindows自体を再起動しておく方が無難です。
で、今回は1度も再起動していないので、その辺に問題がありそうだと思い、とりあえず再起動してみることに。

幸い(当たり前ですが)、ブラウザの動作自体には何も問題はないので、そのまま確定申告データを一旦保存。(もともと頻繁に保存はしていましたが、念のために別ファイル名でその時点のデータも保存しておきました。)
そして、PCを再起動。

その後、保存しておいたデータを読み込んで確定申告データの送信を再度試してみたところ、あっさり解決しました。
問題なく送信完了です。

やっぱり、「作成コーナー事前準備セットアップ」をインストールした直後には一度再起動しておいた方が良いみたいですね……。(^_^;;;
次回は気をつけようと思います。(^_^;;;

文字や画像を含んだ要素(ブロック)丸ごとを自由な角度で傾けられるCSS3「transform」プロパティ

CSS3を使って画像や文字を任意の角度で回転させる方法CSS3で追加された「transform」プロパティを使うと、30度でも45度でも90度でも自由な角度で、(画像だけでなく)文字などを含んだブロック全体を、自由自在に傾けられます。Y軸でひっくり返して「鏡文字」にすることもできます。
文字は当然範囲選択可能で、そこに含まれているリンクなども通常通り機能します。

2年前にAll Aboutで公開した記事ですが、実際に閲覧して確認できるサンプルを増やして、解説内容を一部改訂しました。ぜひ、覗いてみて下さい。

CSS3を使って画像や文字を任意の角度で回転させる方法(@All About ホームページ作成)

ウェブ上のフォームへの入力チェックをリアルタイムに実行するスクリプト

フォームの入力内容をリアルタイムにチェックする方法ウェブ上に掲載した入力フォームへの入力文字列や選択項目が、指定の条件に合致しているかどうかをリアルタイムにチェックして、結果を「吹き出し」の形で表示する方法を解説した記事を約2年ぶりに改訂しました。

フォームの入力内容をリアルタイムにチェックする方法(@All About ホームページ作成)

ウェブ上のフォームへの入力チェックをリアルタイムに実行できるスクリプト「jQuery-Validation-Engine」の使い方を解説した記事です。
使い方自体は2年前と変わっていませんが、ソースの内容が変わっていたり、ダウンロードページ(GitHub)のレイアウトなどが変わっていたので、一部を改訂しました。

「jQuery-Validation-Engine」は、特定の入力項目に、指定の条件(文字種や個数など)で入力されているかどうかを判断できるだけでなく、「項目Aの選択がある場合に、項目Bの入力がどうなっているか」のような複合的な判別もできる高機能さが便利です。

また、各国語(32言語)に対応していて、日本語用のファイルをアップロードすれば、入力チェック結果が日本語で表示される点も便利です。自分で表示文字列をカスタマイズする必要がないので、楽に使えます。もちろん、スクリプトのソースを編集すれば、表示される日本語文字列を自由に変えることもできます。(その方法も記事の最後で解説しています。)

ウェブ上の入力フォームで送信前に入力チェックを行いたい場合には、このスクリプト1つさえ使えば十分ではないかと思います。

病院の広大な無料駐車場がTimesの有料駐車場になってた

うちの近所にある病院には、かなり広い面積の無料駐車場がありました。
病院の両側にある道路のどちらからでも出入りできるため、単に通り抜けるためだけに利用されたりする問題もあったように聞いています。(実際にどうなのかは分かりませんが。^^;)

で、そういう状況に業を煮やしたのか(^_^;)、それとも単に余っている土地を収益源として有効活用しようとしたのか(まあたぶん後者でしょうけども)、先日から工事が始まりまして、気がついたら全面的に「Times」ブランドの有料駐車場になっていました。

有料駐車場とはいえ、まあ当日診察に訪れた患者は無料になるようなサービスでもあるんだろうな……と予想していたんですが、駐車場前に掲げられた料金表を見ると、患者であっても100円の駐車料金が取られる料金体系……。(^_^;)
ええー。そこは患者は無料じゃないのか……。(^_^;;;

なお、患者ではない場合は、60分300円です。
うちの近所だと60分100円程度の料金がザラなので、そこから考えると結構な料金……。(^_^;;;
まあつまりは、あくまでも「患者用・見舞い用」の駐車場だということなんでしょうけども。

当然ですが、駐車場の出入り口にバーができたので、通り抜けるだけの通過は不可能になりました。いや、料金を払えば通過は可能ですが。(^_^;;;
不当な利用(通過)を阻止するために有料化するというのは、有効な手ですね。維持管理コストを回収できるなら。
ああ、そう考えると、(駅からはそこそこ離れているので)一般の利用があまり期待できないことから、病院利用者(患者)から料金を徴収する以外にコストを回収する見込みが立たなかった、という判断でしょうか?(^_^;)

人型になって蔓延った菌類による王国の話

きのこ人間の結婚菌類が人型になって蔓延る世界の話、「きのこ人間の結婚」を読了。
よくこういう世界を思いついたな、と思いました。(^_^;)
独特、独特。ずいぶん独特な世界です。ジャンルは、ファンタジーというよりはSFだろうなあと思いました。
服っぽく見える部分も含めて、全部が身体(菌)なんですね。
一度腐ってしまった部分を切り取った後は、復活しないのかな?
菌類なら、他の生物よりも復活は容易そうに思ったんですが、ずっと応急措置の状態のままでしたね。もしかすると、あの措置の方法自体が、身体の復活を阻止してしまっているのかも知れませんが。

たぶん、これは1巻完結ですかね?
わりと最初の方でヒロイン(の身体の一部)が腐っちゃったりしたので心配していたんですが。(^_^;)
ハッピーエンドでよかった。(^_^;)

きのこ人間の結婚(@Amazon.co.jp)

嘘解きレトリック 第4巻

嘘解きレトリック 第4巻先日発売された「嘘解きレトリック」第4巻を読了しました。
6話収録中の最初の1話は、脇キャラ藤島千代の話。
脇キャラですけども、妄想暴走ぶりがいいですね。(^_^;) 妄想の中での鹿乃子の扱いがぞんざいなのが笑えます。そして証拠(でも何でもないけど)を自分で潰してしまうドジ。良い味です。^^;
今巻では出てきたのは最初の1話だけですけども。

残りの5話で、物語は3つ。
キリの良いところで終わっていました。(前巻もですけども)
もらった20円の報酬で、くら田のツケはちゃんと払ったんだろか?(^_^;)

巻末の案内によると、次の第5巻は夏頃の発売らしい。楽しみです。

嘘解きレトリック(都戸利津/花とゆめCOMICS)(@Amazon.co.jp)

ブラウザ上だけの作業でホームページ作成ができるWix

(レビュー広告)

Wix Topブラウザ上での作業だけでウェブサイトを簡単に作成・公開できる「Wix」というサービスがあります。ざっと使ってみた感じと、作成から公開までの操作方法についてを紹介します。

このサービスを使う利点としては、

  • すべての作業がウェブ上(ブラウザ上)で完了すること、
  • 豊富にあるデザインテンプレートから好みのデザインを選ぶだけで簡単に作成できること、
  • PC版とモバイル版のウェブサイトを同時に作成できること、
  • 作成から公開まですべて無料でできること(オプションサービスには有料のものがあります)

が挙げられます。アカウントの作成は名前の入力すら不要で簡単でした。

Wix Edit右図のように、ブラウザ上だけで各種オブジェクトの配置修正や文字の追加ができるため、ウェブ作成ソフトを使っている感覚で操作できます。外国企業によるサービスですが、ちゃんと日本語化されていて説明文も日本語で表示されるので安心です。

以下に、このWiXを使ってウェブサイトを作成・公開するまでの手順を解説してみます。

アカウントを作成する(ついでにデザインも選択する)

Wix NewAccountアカウントは、トップページ右上にある「ログイン/新規登録」ボタンを押すと表示される右図の画面で作成できます。
メールアドレスを入力してパスワードを決めるだけで完了です。名前すら入力する必要はなく、あっという間に終わりました。facebookやGoogle+のIDを使ってアカウントを作成することもできます。

Wix SelectCategory次に、豊富に用意されたテンプレートの中から、使いたいテンプレートを選びます。右図のようにジャンル名を使って絞り込んでいけます。文字だけではイメージが掴めませんから、下部の「全てのテンプレートを表示」リンク(右図の黄色矢印部分)をクリックして、全体のプレビューを見ながら探した方が良いかもしれません。

Wix Templates使いたいテンプレートが見つかったら、そのサムネイルの下部にある「表示」ボタンをクリックします。すると、テンプレートが別画面に大きく表示され、細部まで確認できるようになります。ここで「編集」ボタンを押せば、そのテンプレートを使ってウェブサイトが作れるようになります。

ブラウザ上のエディタでページを編集する

Wix Editorテンプレートを選択すると、「WiX HTML Editor」というWYSIWYGエディタ(見たままの状態で編集できるエディタ)がブラウザ内に表示されます。ここで、ウェブページの内容を編集できます。編集したい箇所をクリックすると説明が出てきますから、参考にしつつ操作して下さい。

編集したい箇所をダブルクリックすると、そこにある文字などをその場で編集できます。編集領域の傍にはツールバーが現れ、文字サイズ、色、書体、配置、リンクの指定など、装飾の指定ができます。

また、画面左上に縦方向に表示されている5つのボタンから、ページの背景を変更したり、新しく要素を追加したり、編集するページを移動したり、様々な作業ができます。すべて日本語で表示されるので、とりあえずクリックしてみていろいろ覗くと、何ができるのか分かると思います。

Wix Mode編集画面には「デスクトップ版エディタ」と「モバイル版エディタ」の2種類があり、スマートデバイスにも対応したウェブサイトが作れます。昨今はスマートデバイスでのアクセス者がずいぶんと増えていますから、最初からモバイルに対応したウェブサイトが作成できるのは便利でしょう。

編集とプレビューを切り替えつつ操作

Wix Previewエディタには、各種操作用のボタンや枠線などが常に表示されています。アクセス者から見える「実際の見え方」を確認するには、上部ツールバーにある「プレビュー」ボタンをクリックします。
すると、編集用のボタンや線が消え、実際にアクセスしたユーザがどのように見えるのかが確認できます。ウインドウを変更することなく、その場で表示を切り替えられるのが便利でした。WiX側が追加する広告の表示具合もここで確認できますから、広告が表示されるコース(デフォルトのコース)で作成する場合の見栄えのチェックもできます。

保存と公開

Wix Saveツールバー上の「保存」ボタンを押すと、今作成しているウェブサイトのデータが保存できます。(単に保存されるだけで、いきなり公開されるわけではありません。)
初回保存時には、ウェブサイトの名称の入力が求められます。望みの名称を付けて下さい。ここで指定する名称はそのままURLの一部にもなるため、使える文字には制限があります。(使えない文字を入力した場合はその場で指摘されます。)

Wix Publish「公開」ボタンを押すと、ウェブサイトが公開されます。この作業をするまでは公開されませんから、作成途中の内容が公開されてしまうことはありません。
モバイル版を有効にするかどうかも選択できるので、モバイル版を作らなかった場合でも問題ありません。

無料版では、ページの右上と下部にWiXの広告が表示されます。
特に下部の広告はそこそこ目立つので、無料版のまま使い続ける場合は、あくまでも趣味の範囲内で手っ取り早くウェブサイトを作成したい場合に活用するサービス、という位置づけになるでしょう。
もちろん、有料プランを契約すれば広告は消せますので、本格的に活用したくなったら検討すると良いでしょう。サービス内容によって複数のプランが用意されています。

アカウントの情報を変更するには

Wix AccountSettingアカウントを作成する際には、メールアドレスしか入力しません。なので、アカウント名はメールアドレスを元にして自動で決定されています。そのアカウント名は、そのまま公開サイトのURLに使われます。それが気に入らない場合には、後から変更が可能です。

画面右上に、アカウントの名称がアイコンと共に表示されています。これをクリックすると、「アカウント設定」というメニューが出てきます。それをクリックすると、右図のようにユーザ名やメールアドレスの変更画面が出てきます。
ユーザ名を変更すると公開URLも変化しますから、アカウントを作成したら、まず先にここで望みのユーザ名に変更しておく方が良いかも知れません。

以上が、WiXのアカウントを作成してから、ウェブサイトを作成・公開するまでの手順でした。ウェブサイトの編集にかかる時間を除けば、本当にあっという間です。
テンプレートがたくさんありますから、趣味のウェブサイト、団体のウェブサイトや、各種キャンペーンなどで一時的に必要なウェブサイトを手っ取り早く作成したい場合などに向いていそうです。

SmartNewsアプリを使ってみた

SmartNewsAll Aboutの担当さんから、先月に私が作成したとある記事が、スマートニュースの「テクノロジー」タブに掲載されたため、結構な閲覧数になったと連絡がありました。
モバイルアプリの「SmartNews」というと、なんか最近TVでもCMをやっていましたね。
存在はなんとなく知ってはいましたが、今まで利用したことはありませんでした。
というわけで、iPod touchに「SmartNews」アプリを入れてみました。

確かに便利ですねえ。タブを切り替えることでジャンル別にニュースが読めます。(ニュース記事本文の表示は、アプリ内ブラウザを使って、記事提供元のウェブサイトへ直接読みに行く形です。ただ、本文だけを抽出して読む「スマートモード」という閲覧形態も用意はされていましたが。)
SmartNews側が選別したジャンルだけじゃなくて、特定のウェブサイトに限定した記事を「タブ」として追加することも可能なんですね。RSSリーダーでウェブサイトをチェックするのに似た感じかな。そういえば、All AboutもSmartNewsにタブを用意して記事を提供していると、以前プレスリリースを読んだような気がします。

これ、特に広告が表示されているようには見えないんですが、どうやってマネタイズされているのかな……?
ニュースチェックには、なかなか便利そうでした。

1日3回自動更新が設定できるっぽいです。(時刻はカスタマイズ可能でした)
タブの取捨選択や順序の変更も可能なので、ちょっとカスタマイズしてみました。しばらく使ってみようと思います。

「宮本さん本気でヤメてくださいっ」が笑える

宮本さん本気でヤメてくださいっ先月末に出た「宮本さん本気でヤメてくださいっ」を読了しました。
あしたの今日子さん」作者さんの新作ということで、期待して読みました。
とある小国の王城で、王子と呼ばれている王女を、その執事(宮本)が弄る話です。^^;
おもしろいです。
笑いながら読みました。
かわいくて、笑えます。
だいたい宮本(※変態執事)がボケて、王子(※と呼ばせているが外見も中身も王女)が突っ込む感じです。他にもメイド見習いとか、隣国の姫とかも出てきますが。王子(※王女)だけがそこそこマトモで、あとはみんな色々おかしい人々です。(笑)

この本編(15話収録)を読んでいる最中に、なぜか「ミスマルカ興国物語」のマヒロ王子を思い出して仕方がなかったんですけども、なんでかな……?(^_^;)
キャラクターの関係も物語も全然異なるんですが、ギャグ部分の(宮本の?)ノリがマヒロ王子と似てるのかな……? どうかな……?
マヒロ王子(あっちは本当に王子ですが^^;)の暴走ぶりを脳裏にちらつかせつつ、楽しみました。(いや、あちらは別にそこまで変態ではありませんが。^^;)

なお、ここ最近、作者さんのTwitterアカウントで、ちらほら試し読み画像が投稿されているので、そちらもぜひどうぞ。

宮本さん本気でヤメてくださいっ(@Amazon.co.jp)

2015年02月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

他の月

--- 当サイト内を検索 ---