GoogleMap山中一揆史跡地図をスマートフォンでも見やすくする

山中一揆史跡を地図で辿る~GoogleMap(http://www.can-chan.com/sanchuikki/santyuikki-shiseki-gmap.html)だとか浄土宗総本山・本山・特別寺院Googlemap(http://www.can-chan.com/tizu/g-mapjodo-honzan.html)などのGoogleMapを、スマートフォンでも簡単に表示できるように、今までのTableで区切られていた表示を取り払い、パソコンではできるだけ広く、スマートフォンでも画面に応じで見ることができるように、改造してみる。もともとはQPONさんからのスクリプトを利用させていただいていたが、スマートフォンでは画面からはみ出すようになっていたので、思い切って変えてみる。レスポンシブルな表示を目指してみました。

パソコンでは次のような見え方です。

スマートフォンで表示させたときは

スマートフォンの狭い画面で見たときもその画面に応じて表示できる。

ここでは、画像としては同じようなサイズで表示されているが、画面として表示できている部分は、パソコンの画面(上の画像)のうち赤線で囲んだ範囲となります。史跡一覧も地図下のボタンや検索窓もすべてスマートフォンで見えるようになりました。

ホームページのメニューバーの新規作成

スマートフォンでもホームページをよく見るようになってきました。

そんな時に自分のホームページのメニューバーも考え直さなくてはと、何度目のリニューアルだろう?トップページ(http://www.can-chan.com/)から先にリニューアルです。

スマートフォンでの表示は次のような感じになります。

小画面でのメニューバーの様子

メニューはハンバーガーの形になり、それをクリックするとメニューが開きます。

パソコンなどの大きな画面になると次のようになります。

大画面でのメニューバー

とりあえず数ページの付替えを行ったが、ホームページを作り始めて以来、興味関心を持つものをページにしてきたので、カウンタを設置してきたものだけで400ページを超えている。この中にはリンク切れ等で中途半端になっているものもあるだろうが、さて、どこまで切り替えができるのだろう。

framesetを<div><object>に書き換える

いままでframesetのページ「新庄村の花pHOTo検索30」http://www.can-chan.com/hana/search/shinjo/hana-index.htmlを次のように書いていた。

<frameset rows=”180,*” frameborder=”0″ border=”0″>
<frame src=”http://www.can-chan.com/hana/search/shinjo/input.html” name=”frame1″>

<frame src=”http://www.can-chan.com/hana/search/shinjo/title.html” name=”frame2″>
<NOFRAMES>
このページはフレームを使っています。
フレーム未対応のブラウザの方は
<A href=”http://www.can-chan.com/hana/search/shinjo/test/hana-index.htm”>花の写真pHOTo検索30(iframe)から</A>どうぞご覧ください。
</NOFRAMES>
</frameset>

と書いていたのを次のように書き換えてみる。

<div>
<object type=”text/html” data=”input.html” name=”frame1″ width=”100%” height=”30%”>
<p>あなたのブラウザでは表示できません</p>
</object>
</div>
<div>
<object type=”text/html” data=”http://www.can-chan.com/hana/search/shinjo/title.html” name=”frame2″ width=”100%” height=”70%”>
<p>あなたのブラウザでは表示できません</p>
</object>
</div>

このページは花の色などで検索して、下のフレームで表示するのだが、このobjectのタグに書き換えて、framesetに頼らなくでもできることがわかった。name=”frame1″や”frame2″の記述を忘れないようにしないと、双方が関係する場合は表示できなくなるから、注意が必要である。

※上の記述で<~>はここに表示するために全角の<>を使用しているので、htmlで利用する場合はご注意を。

 

念佛寺寺報「摂取」第55号の掲載

寺報をホームページにアップせずに3号分もためていた。

今回ホームページの体裁をつついていてやっとその事に気づいた。

今回一気に53号、54号、55号と「念佛寺寺報」の目次ページにリンクを設置しました。

両面印刷の第2号となります

連載記事としている「念佛寺の由来」の第2号となります。今後、どのようにふくらませることができるか、お楽しみにしていただければ幸いです。

「スーパーリロード(強制再読み込み)」や「キャッシュクリア」に「Ctrl+F5」

最近、ホームページのレスポンシブル化を少しずつ行っている。
CSSを利用してメニュー表示をしたり、ページ内を今までのTableからグリッドやFlexboxなどを使用し、その様子をブラウザで確かめている。
そんな中で、Chromeを使ってみていると、変更したはずなのに代わっていないということが度々あり、どこか記述を間違っているのかと、更に試行錯誤の時間を費やしている。
時々マイクロソフトのEdgeで確かめると、予定通り正しく表示されている。

どうも、Chromeのキャッシュが影響しているようだ。

今日たまたまであったページに、「スーパーリロード(強制再読み込み)」や「キャッシュクリア」を「Ctrl+F5」で行うという説明があり、納得。
Webサイトが最新の状態にならないときの対処法【スーパーリロード・キャッシュクリア】

旧暦ー西暦の相互変換のページをCSSによるレスポンシブルな新メニュー設置とページレイアウトに

旧暦ー西暦の相互変換のページのサイトメニューの表示をリニューアル。
スマートフォンやタブレットでも見やすくするために、レスポンシブルな表示にしました。
FlexboxというCSSによるページを作成してみました。
それに合わせてメニューもCSSでレシポンシブルなものに変更です。
今までも各ページのメニュー表示をできるだけ設置しようとしてjavascriptを使用して表示もしていましたが、ページによってはそのページ内のjavascriptの関係が影響しあって、メニューが動かなかったり、ページ内の計算や表示等ができなかったりして、メニューが設置できなくてトップページへの案内アイコンだけで断念してきた経緯があります。

今回は次のような体裁となりました。
[/caption]

レシポンシブルなメニューとページ体裁

スマートフォンやタブレットでは
スマートフォンやタブレットでのメニュー表示

今回変更作業をやっていて、メニューをすべてのページに長々と書くわけにいかないので、jsファイルにして表示しようとしても表示できず、ネットで調べていたら、コメントアウトの/* */ に全角の文字直後にあるとエラーとなるということを初めて知った。これを訂正したら、jsファイルでのメニュー表示もできるようになった。
ただ、Google検索の窓を設置したら、現在日時を取得して「西暦から旧暦へ変換」と箇所が動かないので、検索はリンクで表示することにした。

WordPress.orgに投稿できない?ログインしなくちゃ!

WordPress.orgおよびJetpackを利用するためにWordPress.comにも関わることなのだが、PCでいつも使用しているChromeからブログに投稿しようとしたら、下のような画面になった。

新規投稿画面

新規登校の画面の左には黒色のサイドバーがあったはずなのに・・・
いざ投稿しようとすると、

入力をはじめると、下書きの保存に失敗しました。

となり、「下書きの保存に失敗しました」と表示が出る。

Microsoft Edgeでブログサイトにログインしてみると

Edgeでの表示

Chromeを最近使っている時に、履歴を削除したり、キャッシュを削除したり、そんなことをしたのが原因かもと思いはじめる。ブログサイトを見ると、「ログアウト」の表示があるから、ログインのままの錯覚になっていたのかもしれない。「サイト管理」のリンクをクリックすると、ログインが促され、必要事項を入力してログイン。
メニューから新規投稿をクリックすると

Chromeからログインをし直して新規投稿

と無事解決。結局ログインできていないから、投稿できなかったということだけだったようだ。
いつもメール投稿することが多いので、うっかりしていたのかもしれない。

Excel(縦書き)からWord(縦書き)へ貼り付け

エクセルからワードへの文書の貼付けについて今後手間取らないように覚書とする。

今回、参加している俳句教室の投句一覧を冊子にしてはどうかという声が上がり、作業を始める。毎月の俳句教室のときには皆さんの投句を一覧にするにあたって、同一人の句が連続しないようにと、エクセルで作成し、マクロVBAでシャッフルして並び替えるという作業をしていた。冊子にするにはワードのほうが体裁などを整えるのに便利だろうという今までの経験からワードに移しかけて手間取ったので、今後同じようなことにならないように覚えとしたい。

(成功例)縦書きに表示している俳句一覧表を、一度別シートに横書きに貼り付ける。これはコピーした表を「行列を入替えて」貼り付けを行う。これについては

エクセルVBA8「並び替える」の7

を御覧ください。

そのシートで「横書き」に設定しておく。

必要な範囲をコピーしてワードに貼り付ける。エクセルとワードとの連携作用なのか、1行目はタイトル行のような扱いで2行目との段差がついて貼り付けられるようなので、エクセルシートでも1行目にタイトルを入れて、その位置から選択して貼り付ける。

その表の肥大上の「+」(下の図の1)をクリックして全体を選択し、「表ツール」>「レイアウト」(下の図の2)>「データ」(下の図の3)>「表の解除」(下の図の4)とクリックしていく

メニューが表示されるので、句集の体裁を作りやすい「タブ」を選択して「OK」をクリックする。

俳句と氏名の一覧がエクセルやワードの表から開放された。

これは横書きのままになっているので、再度コピーして、俳句集を作成しているファイルに「貼り付け」をしていく。

 

(失敗例)縦書きで作成したエクセルの表をコピーしてワードに貼り付けると、上段の句の欄が次々に並び、その後に名前だけが並ぶということになり、どれが誰の句かわからなくなった。

(1)割り付けるときに、エクセルの縦書きの表を選択して、ワードに貼り付けるときに、ショートカット「Ctrl+V」ではルビなどが入っていると上段と下段の幅が代わってくるので、貼り付けるところで「右クリック」>「貼り付け先のスタイルを使用」して貼り付ける。

 

(2)この表の列を上下合わせながら表を解除しても、句ばかりの行のあと、作者ばかりの行となり、後の作業がとてもやりづらい。

No tags for this post.

Bootstrapのグリッドシステムを使ってホームページのトップページのスタイルを変更してみる

Bootstrapのグリッドシステムを利用すれば、タブレットやスマートフォンでも見やすい画面になるということで、本日何とか完成。念佛寺ホームページのトップ

ホームページトップ

グリッドシステムで3列・4列の構成

グリッドシステムでは扱っているデバイスによって、構成が代わってくる。画面を小さくしてタブレット程度に狭くしてみると、4列や3列の構成が2列構成に自動的に変更される。

タブレット画面

タブレット画面ではグリッドが2列構成に

さらにスマートフォンでは1列表示になって表示されるようになる。

ここまで作るのに、悪戦苦闘。ホームページのトップには全ホームページのかなりの項目を表示させている。多すぎるので「折りたたみ」などのスクリプトを使ったり、ブログページの最新記事を表示させるRSSのスクリプトを挿入したりと、年々複雑になってきてしまっている。そんな複雑になっているところにBootstrapのグリッドシステムやメニューなどを入れようとするのだから、詳しくない私にとって悪戦苦闘の連続だった。

苦労その1>>>メニューバーを作るにあたって、今までの体裁をある程度、継続させたい。野暮ったい感じもあるのだろうが、このサイトの7つの門(入口)を設けて、色分けしたい。階層構造にもし、それぞれの背景色を活かしたい。これを達成するためのノウハウを得るためのサイトを見つけるのにも一苦労。多くのメニュー項目を今までの記述をできるだけ利用しながらどう記述していくか。外部jsファイルとしてメニューバーを設置させたい。このjsファイルだけで260行を費やした。

参考>Wiki・PCスキルの小技・忘却防止メモ

苦労その2>>>グリッドシステムに各コーナーを分けて、背景色をメニューバーと共通にする。そのときに、メニューバーのボタン設定の背景色と同様に当初していて、グリッドが思った通りに移動しなかった。ボタンの’btn’の表示を削除することによってやっとグリッドの動きができ始めた。

苦労その3>>それまでに利用していた ’ib-box’のcssをグリッドに置き換えるについて、ブログのRSSを利用して書き出していたところの扱いをどうしたものか悩む。グリッドに変更しても、画面が広がっても表示されるのは元のままの横幅しかなく、困っていた。最終的には、元のサイトで再保存をしたら、グリッドが活かされるようになった。

苦労その4>>ブログより下の記事がいろいろやっても、4列の設定でも2列にしかならず、その原因がどこにあるのかなかなかつかめなかった。最終的にわかったことは、<Li>はあっても</Li>がなかったために、グリッドが正常に動かなかったようだ。

 

施餓鬼会の法話をやっとアップしました。

施餓鬼会の法話原稿をやっとアップすることができました。
http://www.can-chan.com/houwa/201708tyonoyukue.html

THETAの360度カメラで施餓鬼会早朝の本堂の様子です。

リコーのTHETAという360度カメラを使用して本堂を撮影してみたので、その写真を掲載するにはどうすればよいかで、あれこれ試していて、結局、リコーのサーバーを利用することにしました。

リンク先のホームページからその画像を見ると上下を含めて360度の写真が見えるというものです。

Javascriptでの記述~document.write(‘~’);

Javascriptでjsファイルにしてホームページの一部を簡略化することを良くしていたが、今回、ホームページのメニューを作り変えることを考えていて、メニュー項目をどう表記していくか困っていたが、何とか筋道が開けてきた。

いままでは、
<pre>document.write(‘<li><a href=”http://can-chan.sblo.jp/”>ブログ和顔愛語</a></li>‘);
document.write(‘<li><a href=”http://canchan-cat.sblo.jp/”>ブログ猫のひととき</a></li>‘);
document.write(‘<li><a href=”http://www.can-chan.com/wordpress/”>ブログ和顔愛語パート2</a></li>‘);
document.write(‘<li><a href=”http://wagenaigo.wordpress.com/”>ブログ和顔愛語.com</a></li>‘);</pre>

というように記述していたが、すべての行に
<pre>document.write(‘~~~’);</pre>

と記述するのも煩雑。何か簡単な記述法はないものかとネット検索していたら、次のような記述ができるということがあったので試してみる。
<pre>document.write(
<li><a href=”http://www.can-chan.com/”>ホーム</a></li>‘,
<li><a href=”http://www.can-chan.com/koushinkiroku.html”>更新記録</a></li>‘,
<li><a href=”http://www.can-chan.com/koyomi/qreki-seireki.html”><b><span style=”color: blue;”>旧暦ー西暦相互変換</span></b></a></li>‘,
<li><a href=”http://www.can-chan.com/hana/search/hana-index.html”>花の写真pHOTo検索30</a></li>‘,
);</pre>

というような記述法で可能ということでやってみると大丈夫であった。文字数はかなり減りスッキリする。ただ、行頭の「’」、行末の「’,」を何度も忘れて正しく表示できなくなることもあったので、注意が必要であった。ただ「秀丸」ソフトには検索文字を色で表示するという機能があり、今回始めて利用し随分助けられた。同時に何種類も表示可能なので行頭・行末の表示が正しく記述できているかの確認に役立った。

WordPressで上下左右360度写真 

WordPressで360度写真が展示できるということでさっそく試してみる。

まずはプラグインWP-VR-viewをダウンロードして有効にしてみる

写真をマウスで移動させるか、スマートフォンで見ながら向きを変えると上下左右360度の様子がみえるという。

当然のことながら、この形式の写真を動かすプラグインを停止してしまうと、写真のアドレスしか表示しなくなる。

エクセルの関数多用を簡略化して動くように

エクセル関数の票COUNTIF,ROW,OFFSET,MATCHが一つの関数として入ったものを作成していたが、動かなくなり、作業列を作ることでエクセルが楽に動くようになった。ネットを検索してみるとやはり複数の関数が入り込むと計算ができなくなり表示できないということが示されていた。そのことを覚えとして書いておく。上の表はおおよそこんな体裁ということでデータは変更してある。

エクセルに30行☓10列の表を作成。

その票は3つの分類ができるようなもので、表の右に分類ごとにその詳細を書き出すために、ネットを検索しながら次のように設定した。「型」は分類ができる範囲(D2:D30)の範囲名とする。AF1には分類名をいれている。E~P列に項目の詳細が入力されているとする。

AF3=IF(COUNTIF(型,$AF$1)<ROW(C1),””,OFFSET(D2,MATCH($AF$1,肥料型,0),1))

AG3=IF(COUNTIF(型,$AF$1)<ROW(D1),””,OFFSET(E2,MATCH($AF$1,肥料型,0),1))

AF4=IF(COUNTIF(型,$AF$1)<ROW(C2),””,OFFSET(D3,MATCH($AF$1,肥料型,0),1))

AG$=IF(COUNTIF(型,$AF$1)<ROW(D2),””,OFFSET(E3,MATCH($AF$1,肥料型,0),1))

10行くらいの票のときには確かに機能していたのだが、行数が増えると分類ができていないことに気づく。再計算をしても変わらない。

次に、同様の事ができるということで作業列を新たに設ける。A2~C2に分類名を入力D列にその分類名があればカウントするということで下記の関数をドラッグする。

=IF($D3=A$2,COUNTIF($D$3:$D3,A$2),””)

a型分類欄には

S3=IF(MAX(a型数)<ROW($A1),””,INDEX(E$3:E$100,MATCH(ROW($A1),a型数,0)))

T3=IF(MAX(a型数)<ROW($A1),””,INDEX(F$3:F$100,MATCH(ROW($A1),a型数,0)))

S4=IF(MAX(a型数)<ROW($A2),””,INDEX(E$3:E$100,MATCH(ROW($A2),a型数,0)))

T4=IF(MAX(a型数)<ROW($A2),””,INDEX(F$3:F$100,MATCH(ROW($A2),a型数,0)))

同じような計算式でも個数を分割して作業列を作ることだけで随分とエクセルソフトにとっての計算が楽になるようだ。

漢字検索にも面白い!IPA MJ文字情報検索システム

 

「IPA MJ文字情報検索システム(簡易版)」なるサイトは文字入力ソフトが対応していない文字も検索できる。独立行政法人情報処理推進機構(IPA)は日本字の登録などの文字を表示するためにフォントの制作や検索などができるようなシステムを開発しているようだ。パソコンを始めたころは入力できる文字の種類が少なくて、経本を自作しようとしてずいぶん苦労したことが、思い出されてしまう。当時は4000文字前後ではなかっただろうか。それが6万字も表示できるという。

6万字の文字の検索ができる

フォント「IPAmj明朝フォント」を「窓の社」からダウンロードした。このフォントは6万もの文字が入っているということだ。

辺だけでこれだけの異体字が表示される。

「辺」というじでこれだけの異体字が表示される。

No tags for this post.

旧暦-西暦の変換で2つの旧暦間の日数を計算できるようにした

江戸時代の旧暦を西暦に変換し、2つの旧暦の間の日数を計算する。エクセルでの日付計算は1900年以降しかできず、WEB内で計算できるようにやっとできた。旧暦-西暦の相互変換http://www.can-chan.com/koyomi/qreki-seireki.html)のページがそれです。下の画像はその一部です。

旧暦を現在の西暦(グレゴリオ暦)に変換するときに、「修正ユリウス日」を利用する。

旧暦を西暦に変換

旧暦を西暦に変換

2つの期間を計算しようと思った理由は、江戸時代の参勤交代でかかった日数とか、藩や江戸での滞在日数を調べてみたかったからだ。近いうちに出雲街道を通行して新庄宿に泊まることの多かった松江藩の参勤交代の様子をまとめてみたいと思っている。

条件を付けてランダム~エクセルVBA

以前に、参加者の俳句一覧表にし、ランダムに並べるVBAを作成した。ところが15人ほどのメンバーで一人が2句ずつ投句し、それを一覧にする。一覧にするときには一人が投句した2句を続けてエクセルに書いていく。そうやってできた一覧表をVBAをつかってランダムに並び替えてみると、何か所かで同一の人の句が並んでしまう。5回くらいマクロを実行して誰も並ばない状態にすることもしばしばであった。

そういう状況を解決しようといろいろ考えてみて、次のように考えてみた。

1.2句ずつだからAグループとBグループのように分ける。

2.AグループとBグループに分けると、これだけで同一人物の句が並ぶことは亡くなる。でも人が同じ順に出てくるというのも面白みがない。

3.そこで、グループごとにランダムに並び替える。もちろんこの場合はAとBとの分かれ目のところで同一人物が並ぶ可能性もないことはない。その時は2回目のマクロを実行することにする。

4.AとBのグループ分けは、エクセルの関数を利用して、同一人物の何番目かをカウントする。(これも句を入力するときに1,2・・・と入力しておいてもいいのだが、手間は少しでも省きたい)そこで空いている欄を利用して、エクセル関数 ‘=IF(A15=””,””,COUNTIF($A15:A15,A15)) ‘
を必要以上にコピーする。
・・・’ =IF(O15=””,””,COUNTIF($A15:O15,O15)) ・・・’。
O15に入力がなかったら空白、そうでなかったら、A15からO15までの間にO15(人物名)の数を数える、という関数である。こうしておけば1人が何句投句しても自在となる。 他の使用法もありそうだ。こうして、1,2・・というグループ分けが可能になる。

マクロについては

エクセルVBA8「並び替える」の「

6 表の列を昇順とランダムの2条件で並び替える

グループ分けとランダム

こちらの方が、確実にバラツキができていい。

脇本陣木代邸の案内~パソコン使用20周年記念

パソコンを購入してから今日で20周年となる。それまでのワープロだけの生活からずいぶん状況は変わったように思う。当時のパソコン(ウィンドウズ95)、NECのキャンビーというようなパソコンだった。購入に当たって「社会科の授業で必要な情報をインターネットで検索できるから」という理由づけをし、当時手取り給料の2カ月分は十分にかかったように思う。パソコンの容量は今のスマートフォンよりも少なく、遅い。インターネットといっても接続までの時間が電話回線で、ピーピーと音のなる時間が長く、表示も遅く、調べることのできる情報も少なかった。使用しながらネットの情報も誰かがアップしないと探せないということに気づき始め、自分が困るように他の人も同じように思っていることだろうと、ホームページ作りにも力が入っていった。
20周年記念などとタイトルに書いたが、それほどの意味はなく、ホームページのサイトページ数は400を超えている。
新庄についても写真などはよく載せてきたが、新庄村についてということではほとんどページもなかった。
今年、新庄宿町つくりの会の活動として、木代邸の受け付け案内を数回させてもらう機会を得た。ただ木代邸そのものについての知識も大してなかったので、会の資料や新庄村史、インターネットなどを通じて木代邸について写真とともにページとしてまとめることを思いついた。

「脇本陣木代邸」は
http://www.can-chan.com/shinjo/kishirotei.html

上の写真のようなページです。

がいせん桜が見ごろを迎えると、この木代邸への入場者(無料です)も1日に2000名~3000名にも上る。がいせん桜は見たけど脇本陣の木代邸には入り損ねたという人のためにも、このページが少しでもお役に立てたら幸せなことです。

全国で現存する脇本陣はわずか6か所だということです。そのうちの一つなのです。多くの方が訪れることをお待ちしております。

このWordPressとFacebookとの連携ができなくなっていたのを解決策

知らぬ間にまたFacebookとの連携が切れていた。

Jetpackの関係なのかもしれないとネット検索。

自分のサイトで確認してみると

Jetpack連携の状況

どうも連携が切れてしまっている。そこで「Facebookとの連携を再読み込み」をクリックすると、

パブリサイズの共有

あるサイトに「他のユーザーもこの連携を利用」の欄もチェックを入れておくと良いとあったので、それに従ってみる。

そして最後に

変更を更新

「変更を保存」をクリックして、変更内容を保存する。このボタンが一番下に来るのでついつい忘れがちになる。

「外郎売の科白」 あなたは分速400(280)文字クリアーできますか

8年ほど前に少しでも歯切れよく話せないものかとインターネットを検索しているうちに、早口言葉の1つとして「外郎売の科白」というものがありました。歌舞伎の演目の中で二代目市川団十郎が述べていたようです。アナウンサーや司会者、演劇関係者にはよく知られているようでした。

そこで「外郎売」の科白をホームページ上に作成し速度に応じて読みあげるようなことができないかと思って作成していたものです。

このたびホームページをご覧になった方から、いくつかの字句が間違っていないかとのご指摘をいただき、元の参考HPだけでなく、ウィキペディアなども参考にして下記のように変更した。

れは「外郎売」の科白を分速400文字ほどで流していくページです。このほかに外郎売りの科白ー分速280字「外郎売ういろううりりの科白せりふ」印刷用のページがあります。

分速280文字でも私はなかなかクリアーできません。皆さんはいかがでしょうか。