成島柳北「柳北奇文」を読む4

狂症の説教(明治9年8月18日)

この表題が何を意味するのか詳らかにしないが、趣旨は以下の文にある。

「一郡ヲ治ムルモ一郷ヲ官スルモ同一ノ理ニテ其ノ事務ヲ総括スル先生ハ日夜勉励シテ世話ヲ焼クハ当然ノコトナレド餘リ細密ニ注意シ過ギルト往々ニ苛察ニ流レテ却テ保護ガ妨害ト化ケテ仕舞マス」

ようするに保護と言って手を出しすぎるとかえって成長を妨害することになる。人間も社会もそして植物もという訳だ。

この文の末尾に「津田先生ノ媒助法」というのが取り上げられている。これがいかなるものか、わからないので少し調べてみた。(グーグル先生に聞いた)

まず、津田先生というのは津田仙という人物。元幕府側にいた人物で戊辰戦争では幕府側に加わっている。また、福沢諭吉と渡米経験があり、帰国後農業の近代化に尽くした人物。
「農業三事」という著作があり、そのなかで「媒助法」を説いている。これはようするに「人口受粉」で、これによって農産物の生産性を高める方法。現代ではいわば当たり前の方法だが、当時は多くの反対にあったようだ。かなりの論争にもなったらしい。
また、津田は農園を作って多くの西洋野菜を栽培したことでもその名を止めている。また、キリスト教信者で青山学院の創始者でもあり、後に足尾鉱毒の反対運動にも加わっている。次女梅子は津田塾の創始者。内村鑑三もいわばその弟子筋に当たる。
(以上 小林富士雄氏「西洋農学の導入をめぐって」pdf版による)

それにしても旧幕府側の人間に優秀な人物が多かったとまた思わされる。

さて、この津田の「媒助法」論争に柳北はこう言っている。

「有益ナルコト権兵衞ニモ烏ニモ分カルコト」としながら、これが日常化すると「草デモ木デモ苦イ顔ヲシテ嗚呼ウルサイ蝿ダト小言ヲ云フニ相違無ク又何ノ益ニモ立チマスマイ」と。

津田の考えは近代が産んだものだが、とすると柳北は反近代という事になるのか。いやそうではあるまい。この文の趣旨は冒頭で言っている事にある。

世話をしすぎると人間も社会も植物もいわば「息苦しく」なるんだ。今の日本の状況を見てもそれは大いに言えると思う。親も教師も社会も手を出しすぎた結果(ああだこうだとほんと五月蝿(ウルサ)い)、ロクな大人が育っていないのもそう思える。

この文も柳北の

「水清ケレバ魚育タズ」

という人間観に基づいている。

成島柳北「柳北奇文」を読む3

東隅ノ土百姓ヲ戒ム(明治9年8月12日)

こうした逆説的な文章を書かせたら天下一品ですね。
旧幕時代の御用道中に比するに「官員様ノ派出巡行」を問題にする。
旧幕時代はもうタダでやりたい放題、今の官員様は金を払っているのだから失礼のなきようにというわけだ。しかも多額の金を使っているんだから。

曰く
「試ニ退イテ算セヨ大臣参議一人一日ノ旅費ハ汝等ガ幾日ノ且活計ヲ立ツルニ足ルカ斯ル天淵月鼈(月とすっぽん・ゲツベツ)ノ相違アル貴キ官員様ヲ粗略ニ心得テハ仮令開明ノ世界別ニ御叱リテハ之ナキモ決シテ汝等の礼節ヲ尽セル者トハ謂フ可ラザルナリ」と。
ようするに官員等が巡行と称して莫大な金を使って旅行をしていることへの批判なんだが、それを百姓に向かって
「官員様の一日の旅費は君たちの生活費の何日分にもあたるように、官員様は君たちとは月とすっぽんの違いがあるんだから決して失礼があってはいけないよ。」と言っているのだ。

何時だったか、ある政治家が日本は世界平和に人を出さないで、金だけ出しているのはいかんといった発言をしたことがある。PKOの話だったと思う。それに対して今は亡くなった女性の料理研究家がいいことを言っていた。「その金は誰のものと思っていて発言しているんだ。庶民が働いて収めた税金だ。金を出すということは庶民の生活を提供していると同じなんだ。」と言った趣旨だったと思う。
この話も同じだろう。官員様の旅費は実は百姓が払っているんだけどね。
これを読むと本当に新時代とはわかりにくい時代ということになる。結局は金を搾り取られていることに変わりはありゃしねえんだ。なんか近代というのはようするに同じことをわかりにくにしただけかなって気がしてきます。
それを柳北は面白く書いている。流石です。

成島柳北「柳北奇文」を読む2

華謡新聞題言(明治9年8月2日)

「華謡新聞」は明治9年8月1日に風香月影社と言う所から発行された。(早稲田大学図書館のDBによればその4号が現存している。宮本千万樹 編輯とある。)
「今ヤ我社友中扼腕切歯シテ慷慨悲歌シタル諸子ガ。往日ノ失策ヲ懺悔シ。幡然(ヒラリ)ト旧套ヲ脱シテ。はな謡新聞ノ一社ヲ開ク。豈之ヲ奇〃妙〃ト称賛セザルヲ得ンヤ。」
とあるようにこの新聞は「朝野新聞」によって発行されたもので、その内容はまさに政治とは無縁に見える「はな謡」を採録したもののようだ。

やはりこの文にも柳北の真骨頂が伺える。
古詩を引いて「花ニ声無シ」というものの、古歌を引いて「曙に花の雫の音をきく」とし、ましてや花街の花たるものの声(これを「はな謡」という)を聴けば、「誰カ垂涎三尺ナラザルヲ得ンヤ」ということになるはずだとする。

しかしそれに対し「仮道学先生(ニセガクシャ)」は「頑〃タル鑼声(ドラゴエ)ヲ発シ余ガ此ノ説ヲ破毀シテ」言う。鄭の国の音楽をあげそれを「淫」とし、麗人は「危」いとし、「淫褻俗ヲ乱ルハ固ヨリ君子ノ悪ム所ロナラズヤ」とする。

(いつの時代もいますね、こう言う輩。道徳を説く人です。ほんと「銅鑼声」がうるさいのだ。)
もちろん柳北はこんなことは言いません。まず自分もこうした道徳説教を家業としていたとして、(何たって柳北は幕末期の奥儒者です。「ゑへん」と言ったりしていて、これがまたいい。)

「宣尼(コウシ)ハ何故ニ詩経(別字だが)ヲ剛正スルニ当テ。しんい桑中ノ如キはな謡を尽クかわノ流レニ擲棄シ去ラザリシヤ。蓋シ之ヲ存スルハ亦為メニスル所ロ有レバナリ。」とし、

孔子だって、鄭の国の音楽をすべて捨ててはいないし、それはそこに意義を認めているからなんだという。
しかし、「はな謡」を採録するのは難しい。いっそ「寝言」を集めてみたらと提案する。
「若シ寝タ時ニ寝言ヲ採リ。覚ムル時ニはなうたヲ録セバ。」これは無尽蔵で本社の繁盛間違いなしだと言っている。

ふざけているようにように聞こえて、決してそんなことはない。「扼腕切歯」して「慷慨悲歌」するより「はな謡」や「寝言」にこそ人間の真実があるんだ。もっと言えばこっちにこそ「痛み」があるんだと聞こえる。

やはり柳北はいい。

成島柳北「柳北奇文」を読む1

成島柳北に「柳北奇文」という著作がある。これは明治11年に西山喜内という人物によって編集され、出版されたものだが、中身はすべて「朝野新聞」の「雑録」である。
「雑録」は当時の社会の様々な現象を取り上げ、それを柳北ならではの文章で料理する。するとたちまちそれは当時の新政府批判へと転じる。この雑録にこそ柳北の真骨頂を見ることができるのだ。
これから一つ一つの雑録を紹介したい。漢文崩しの独特な文章は今や多くの人にとっては読みやすいものとは言えないが、なるべく本文を引きつつ紹介する。(引用は「明治文学全集」による。ただし一部漢字を変更する場合があることをご容赦ください。)

麦湯の説(明治9年7月29日)

今で言えば喫茶店、麦湯を売る店が開かれたが、それを官が禁じた。それを取り上げた文章だ。
その論法を追ってみる。
まず、官がそれを禁じたのは麦湯そのものではなく、それを売る「白面女郎ノ醜行有ルヲ以テナリ」である。すなわち
「官家ハ汝ノ麦湯安ヲ妨害スルニ非ズ汝ガ白面安ヲ妨害スルノミ白面安ヲ妨害セザレバ則チ全府ノ風俗乱ルヲ以テナリト」
これは官の言い分だ。
それに対し柳北はこう言う。まず
「我輩ハ市上ニ大呼シテ言ハン(巡査ニ叱ラレルナラ小音デ)」と言っているのもおかしいが、
この問題を新政府の問題として取り上げる。
「其(官が)行フ所ロノ事務ハ固ヨリ行フ可キコト猶麦湯ノ利有テ害無キが如シト雖ドモ其ノ姦猾苛刻等ノ事有ルニ至テハ則チ其主旨ヲ失フ者ニシテ之ヲ排撃セズンバ有ラザルコト猶彼ノ白面的ノ醜行ヲ禁えつスルト一般ノ道理ナレバナリ」
すなわち、政府の人間に不正があれば、それを妨害するのは麦湯店の禁と同様、ことの当然だというのだ。
「我輩ハ亦将ニ大呼セントス我輩論者ハ決シテ国安ヲ妨害ス可カラズ唯姦猾安ト苛刻安トノ如キハ宜シク之ヲ妨害ス可シ此ノ二安を妨害セザレバ人民の権利ヲ失ヒ却テ国安ヲ保ツ能ハザルヲ以テナリト」
政府の非を非難するのは当然の権利であり、それなくして国安は保てないと言っている。

さて、こうした柳北の論法は見事だが、その背景に実は柳北が麦湯店の側に立っているということは見逃してならないと思う。市井に視点があるといってもいいが、ようするに実は柳北は麦湯店が好きなのだ。
では、当時の麦湯店とはどんなものだったか。ちょっと調べてみた。今でいう喫茶店のようなものだが、江戸時代からあったようで、屋台で麦湯を売っていたのだが、それを売っているのがすべからく少女であったらしい。それを目当てに若い衆が集まったと言う。今でいうメイドカフェ?いや違うか。何れにしても市井の風俗の一つであったようだ。庶民のささやかな楽しみの場であったに違い無い。
柳北はいつもこう言う場所に立っている。女好きだしね。

レスポンシブにはtableではなく、dlを使おう

以前、tableをレスポンシブ化する方法を報告した。ただ、これは縦横を(行列を)入れ替えるといった形であまりよくないので、tableと同様な形が作れるdl環境でやってみた。

そもそもdlとは

dlタグは、定義・説明リストを表す際に使用します。 dl~/dlの中に、 dtタグで定義・説明される言葉を、 ddタグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。(クイックリファレンスから)
たとえば

HTMLソース

ブラウザ上の表示
作者

ジョン
ポール
ジョージ
リンゴ

しかもhtml5からは一つのdtに複数のddを付与できます。

要するにdlはデータリスト環境だということです。

(このdlの使い方についてはかつて「小技集」25で紹介しました。)

table表をdlに変更する

実は具体的な要求があります。さくらサーバーで提供されている問い合わせフォームをレスポンシブ化したいという要求です。以下がそのhtml部分です。

このtableをdlに、thをdtにtdをddに変えます。trは不要です。

cssに変更を加えます。表のような形にするわけです。

ポイントは
dtの clear: left;
float: left;
width: 26%;

ddの margin-left: 27%;

です。dtをfloatさせて、幅を決め、その幅と同じ長さをddで左マージンを取るわけです。(ただし1%多く取るときれいに表示できる)こうすると横に並びます。
後は罫線部分です。dlでトップ以外を引き、dtでトップを、ddで左とトップを引きます。
これでほぼ表と同様な形ができます。
(なお、htmlの改行タグbrを使っている部分も複数のddに変更します。)

スマホデフォルトのcss

実は表の形はPC用ですから、スマホでは最初のcssに変更を加えない形がむしろいいということになります。

ただ、このまま(postmail01.html)ではそっけないのでcssを書きます。

これをデフォルトにして、メディアクエリーでPC用を書けば良いということになります。
完成形

ここではiPad縦置き以下から表示が変わるようになります。

実際に運用する場合はhtmlのheadに以下を書きます。

実例は以下をご覧ください。
実例
以上

 

洋風濡れ縁(ウッドデッキ)作成

洋風濡れ縁(ウッドデッキ)を作ってみた。
今回は材料を以前買ってあった安価な輸入品のツーバイ材(息子のところにごみ置き場を造るため)とDIY店で売っていた赤松のシラタの角材。
ファイル 2015-11-16 17 39 25
脚になる部分を3脚作成。太い角材の上に溝を彫って、横に木を渡し、下にも横木を嵌めて作成
ファイル 2015-11-16 17 39 13
それを長いツーバイ材でつなぎとめる。いたって簡易な方法。もちろんス全てボルト締め。
ファイル 2015-11-16 17 38 30
但し庭に置くので、底が平らになっていなければならず、今回ここが一番大変だった。穴を掘ってブロックを一個半平らにおいた簡易なもの。
羽根突きの置石も考えたが、これだと脚を低くしなければならず、置石が出っ張ってしまうのでこの形にした。
ファイル 2015-11-17 15 15 35
後はツーバイ材を貼っていくだけだが、柱の間に横木を入れて、止めておきその上で3脚の柱の横木に止める。ここもビス止めだが、ダボで化粧している。
ファイル 2015-11-16 17 38 11
部屋の床とほとんどフラットの高さにした。何とか水平は保てているようだ。
塗装は組み立てる前にあらかじめ塗装しておいて、天板のみ後からもう一度塗った。キシラデコールのチークを使った。
なお、設置後高さがかなりあるので、かみさんの要望で踏み台も作った。二つ作って普段は横に置いて置くことにする。
ファイル 2015-11-17 14 40 25
作りはほとんど同じだが、やや頑丈に作ったつもり。
これで完成。これからは冬だがあったかい日にはここで喫煙・お茶ができそう。木工もここでやれるかも。と楽しみにしている。
ファイル 2015-11-17 14 42 49ファイル 2015-11-17 14 42 31

レスポンシブデザインのメニューについて

以前既存のサイトをレスポンシブ化する際のメニューについてslicknavというのを紹介した。しかしこれは適さないという向きもあるだろう。
既存の横メニューを2段や1段に表示させたいという場合があるかもしれない。
その場合の技を書いてみる。
いろんなやり方があるだろうが、ポイントはメディアクエリー内でfloatが効かないということとここでもスマホデフォルトで考えるということだ。
具体的に言おう。
普通横メニューはlistを使って、それを左からfloatさせ、メニューの数によってwidthを%で決める。
スマホデフォルトということはfloatを止めて、widthを100%近くにすれば縦にメニューが並ぶ形になる。
しかし、こうするとPC表示の時に改めてfloatさせなければならなくなる。しかし、メディアクエリー内でfloatが効かない。
どうするか。
スマホデフォルトでfloatをそのままにしておいて、widthを100%近くにすればいいのだ。そしてメディアクエリー内で%を変えてやればいい。
例えばメニューが4個だとすれば、50%に近ければ2段になり、25%に近くすれば1段になる。
これが簡単な方法だということに今更気付いたので。

Jimdo無料版でpopup表示

先日Jimdoのサポートをしていて、ユーザーからポップアップ表示がしたいという要求があった。Jimdoそのものには簡単に実装できるアイコンがない。(無料版ですが)
そこで、独自に実装する方法を考えた。

ポップアップ表示はJavascriptやJqueryを使えば、いわば難なくできる。
しかし、Jimdoでそれを使うとなるとちょっと敷居が高い気がする。
特にJqueryはJimdoがもともとPrototype.jsを使っているということもあって、コンフリフトを避ける設定をしなければならなかったり、いろいろ面倒そうだ。

そこで、cssのみで実装できるポップアップ表示を見つけたので、それを試してみた。
http://javascript123.seesaa.net/article/133792048.html
を参考にさせて頂いた。

Jimdo無料版でpopup表示の方法

設定から「ヘッダー部分を編集」を開き
先ずヘッダに以下を書き加える。

もちろん、これはあくまで噴出しの設定(css)なので文字色や幅、背景色等はいくらでも設定変更してかまわない。ボーダーをうまく使って噴出しの形を実現しているが、これとて変えてもかまわない。

今度はHTMLだ。
Jimdoでは記事の編集で隠れているメニューを出すと、記事のHTMLが編集できる。

jimdo01
jimdo02
jimdo03

そこに

要するにポップアップで注釈等を付けたい文字列に<a href=”javascript:void(0);”>を付け
ポップアップ自体は<span class=”fukidasipop”>で囲んでやればいい。

ちなみに”javascript:void(0);”はクリックを無効化するおまじない?のようだ。
実際は以下を見ていただければ
http://ogu-tex.jimdo.com/it/

追記 なお、このJimdoサイトでは「プリーツ構造」「新型インフルエンザ」という文字にマウスを載せるとポップアップが表示されるようになっています。
要するに:hoverを使っていますので、iPad等ではうまくいきませんのでご承知おきを。
これについてはまた後日。

tableのresponsive化2

TablePressで作成した以外のtableのresponsive化

これについては以下のサイトに詳しく書かれているのでそれを参考にすればいい。

http://design-spice.com/2012/11/01/responsive-table/

基本的にはやはりmedia_queryを使って、横に長い表を縦の組み替えるか、リスト表示に変えるかする方法。

ここでもdisplayプロパティがよく使われる。

これをワードプレスで使うにはカスタムフィールドが必要になる。

以前の表で一部やってみた。表は以下。

商品番号 商品名 容量 税込卸価 詳細 購入
01K201 家庭用カビ取り剤サール 1L 1,296 詳細 購入
02KS01 業務用除カビ洗浄剤S1 1L 1,512 詳細 購入
04KS05 業務用除カビ洗浄剤S5 5L 6,480 詳細 購入
05K116 業務用除カビ洗浄剤S6 16L 20,304 詳細 購入
06KJ31 頑固なカビ取り剤J3本セット 100g 1,944 詳細 購入
07KJ50 頑固なカビ取り剤 500g 2,052 詳細 購入

すでにここではcssをカスタムフィールドにインストールしてある。

これに以下をsample_02.cssとして追加してみる。

若干の表示のずれがあるようだけど何とかできる。
これはワードプレスだけに使えるわけではないのはもちろんだ。

tableのresponsive化

日本人はどういうわけだか表が好きだ。
WEBページでも使いたがる。
ところがこの表はレシポンシブには向かない。
要するに狭い画面では表がうまく表示できないからだ。
しかし、そうは言ってもそういう要求はあるのだからやってみるしかない。
いろいろと調べたのでその報告。

まずはワードプレス上での表のレスポンシブ化について

以前紹介したtablepressのレスポンシブ化をしてみる。
tablepressの実装については以前の記事
http://kwski.net/wordpress/1094/を参考にしている。

まず「TablePress Responsive Tables」というのがあるので、

これをダウンロード(https://tablepress.org/extensions/responsive-tables/からできます。)し、プラグインの新規追加から「プラグインのアップロード」を選び、ダウンロードしたzipファイルを選択し、アップロードし、有効化する。

あとはTablePressのShortcode:(ショートコード)に以下のようにresponsive=”xxx”を付与して投稿に貼り付ける。
例えば

のように。

以前の表をやってみた。

// 768px以下になるとテーブルを横向きにする場合

商品番号商品名税込卸価詳細購入
01K201家庭用カビ取り剤サール 1L¥1,296詳細購入
02KS01業務用除カビ洗浄剤S11L¥1,512詳細購入
04KS05業務用除カビ洗浄剤S5  5L¥6,480詳細購入
05K116業務用除カビ洗浄剤S6  16L¥20,304詳細購入
06KJ31頑固なカビ取り剤JJ3本セット100g¥1,944詳細購入
07KJ50頑固なカビ取り剤J  500g¥2,052詳細購入

// 980px以下になるとテーブルを横向きにする場合
商品番号商品名税込卸価詳細購入
01K201家庭用カビ取り剤サール 1L¥1,296詳細購入
02KS01業務用除カビ洗浄剤S11L¥1,512詳細購入
04KS05業務用除カビ洗浄剤S5  5L¥6,480詳細購入
05K116業務用除カビ洗浄剤S6  16L¥20,304詳細購入
06KJ31頑固なカビ取り剤JJ3本セット100g¥1,944詳細購入
07KJ50頑固なカビ取り剤J  500g¥2,052詳細購入

// 1200px以下になるとテーブルを横向きにする場合
商品番号商品名税込卸価詳細購入
01K201家庭用カビ取り剤サール 1L¥1,296詳細購入
02KS01業務用除カビ洗浄剤S11L¥1,512詳細購入
04KS05業務用除カビ洗浄剤S5  5L¥6,480詳細購入
05K116業務用除カビ洗浄剤S6  16L¥20,304詳細購入
06KJ31頑固なカビ取り剤JJ3本セット100g¥1,944詳細購入
07KJ50頑固なカビ取り剤J  500g¥2,052詳細購入

tablepress 以外のtableのレスポンシブ化については別項で