スクロールが下まで行くとナビゲーションバーを上部に表示

スクロールが下まで行くとナビゲーションバー(ヘッダ部分でもいいけど)を上部に表示
これはjqueryで簡単に実現できる。
cssに以下を記述しておく

要するにナビゲーションを固定するクラス
これを例えば.navに与えるかどうかの制御で実現できる

スクリプトは以下だ。

まず変数navにクラス名navを持つナビゲーション部分を代入
次に変数navTopにnavの位置を代入
位置は最初の要素の、ドキュメント上での表示位置を返してくれるoffset関数を使う。
ここはtopの位置
さらにscrollイベントの中で
変数winTopにスクロール位置を代入
スクロール位置は.scrollTop関数を使う
この位置を比較して、スクロール位置がnavの位置より下だったらクラスfixedを追加
そうでなければ、クラスfixedを除去
これだけ。
実際は以下。

これはfooterについても言える。

ページスクロール「トップ」アイコン

ページをスクロールすると「トップ」へのアイコンが現れるページをよく見かける。
これもスマホで見る場合が多くなたためと思われる。また、縦長のページが増えているためかもしれない。
この縦長ページもスマホ用という感じがする。スマホはパソコンと違って、縦のスコロールが容易だからだろう。
このスクリプトを探してみたので報告。

まずHIML

これは単純に文字列とする。リンク先はwrap。場合によってはcontainer。

CSS

まずは現れる場所をposition: fixed;で固定。

リンクで文字を装飾。ここはいろいろ好みで。

JAVASCRIPT

ここは自分の理解のために解説してみる。

変数topBtnに#page-topを代入
これを非表示
scrollイベントを使って、スクロールが起きたら以下を実行
.scrollTop() でスクロール位置を取得
それが100を超えたら
topBtn(すなわち#page-top)をフェードインする
でなければフェードアウト

また、
clickイベントを使って、クリックされたら
animate関数をつかって、
ページをスクロール0の位置に500msで表示する。
なお、return false;は
clickイベントを実行した後にリンク先に移動してしまう
それを防ぐ為の記述らしい。よくわからないけど。
この点については柴原氏のブログにある。
以下の記述となる。

実際は公開した以下のサイトで
http://ogu-tec.net/test/webtest06/ypcwebtest02/

スクリプトはヘッダに書きます。

wordpressとfacebookの連携

これについてはwordpressに連携のためのプラグインを導入すれば簡単に実現できると思っていた。
ところが豈図らんやそう簡単ではなかった。その顛末。
実は昨年の夏頃にfacebookアプリの仕様が変わって、これまでの設定情報が古くなり、うまく動かなくなってしまったようだ。

そこで、色々と情報を収集して、試みてみた。
一番信用できそうな情報は以下のサイトである。
「2015年度版WordPressでFacebookアプリを使う為のDeveloers登録とアプリ作成手順」

2015年度版WordPressでFacebookアプリを使う為のDeveloers登録とアプリ作成手順

これによる手順はこうだ。
1.Facebookで開発者登録
2.Facebookアプリの登録
3.Facebookアプリの設定
4.OGPの動作確認
5.WordPressにコードを埋め込む
6.OGPの設定

これを見ただけでも嫌になってしまうが、そのいちいちがまた面倒だ。順を追ってみるが、基本的には上記のサイトに詳しく出ているのでそれを参考にするのがいいのだが、わかりにくい点を補っておく。

1.
https://developers.facebook.com/ にアクセス。
My Apps→Register as a Developerで登録
携帯の電話番号でsmsでコードを取得して本人確認する。

2.
My Apps→Add a New App でアプリ名(なんでもいい)を入れてCreate New Facebook App ID

3.
メルアドや自分のサイトを入力して、status画面で公開処理をする。

4.
https://developers.facebook.com/tools/debug にアクセスして確認
これをやる前にwordpressにfacebookの公式プラグインを入れて設定しておくといい。
ただ、設定には開発者登録情報が必要。

5.
「すると、「Quick Start for Website」の画面が開きますので、「Setup the Facebook SDK for JavaScript」に記載されているコードをコピーして、WordPressのヘッダー部分に貼り付けます。」
とあるが、「WordPressのヘッダー部分」というのがよくわからない。ブログのテーマ編集からheader.phpのの直後に貼り付けてみる。
ただ、
The following snippet of code will give the basic version of the SDK where the options are set to their most common defaults. You should insert it directly after the openingtag on each page you want to load it:
とあるので各ページに貼らないといけない気がするが。この辺りがわかりにくい。
さらに、いいねボタンを表示したい場所にタグを貼るとある。タグは以下だ。

そこでこれをテキストウェジットに貼って、サイドバーに表示してみた。

6.
「ただし、Facebookの公式Plugin「Facebook」を使うとOGPを自動で吐き出してくれますので、個別設定が大変だという場合はこちらを使うのが一番簡単です。」とあるように4.でのべたプラグインでできるようだ。

その上でプラグインでlikeボタンを各記事に貼ってみた。そして自らいいねを押してみる。すると自分のfacebookのタイムラインは表示された。しかしニュースフィードには表示されない。ただ、「友達」のニュースフィードには表示されたようだ。
これでいいのかな。

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

先生国(明治9年9月13日)

新時代になって「先生」が大量発生したことを揶揄する。

「先生と呼ばれるほどの馬鹿じゃなし」という戯れ句があった。
「先生」という言葉は様々な意味を持つ。政治家が互いに「先生」と呼ぶのは今も続いているようだ。単に学校において生徒を指導する立場の人間を指す言葉でないことは確かだ。漢字本来の意味は単に「何々さん」と言った敬称だったが、これが人の上に立つ立場の人間をすべて指す言葉になったようだ。
ただ、この語は現代でもことの両面を表す。戯れ句ではないが、馬鹿にした意味でも使われる。現代の学校でも生徒たちは真に尊敬する教師にはかえってこの語を使わず、「さん」付けで呼ぶことを小生も知っている。

さて、この語江戸時代ではそれほど使われていなかったようだ。(柳北によれば、大名の留守居役が集まる場合に使われていたとのこと)しかし新時代になって一気に「先生」が増えた。

「嗚呼先生ノ夥シキ開闢ヨリ以来未ダ今日ヨリ盛ンナルハ有ラズ」というわけだ。

ここで柳北は何を嘆いているのだろうか。

「我々ガ其ノ多キニ驚ク所ロノ先生者流ハ決シテ人ノ称スルノミニ非ズ自ラ信ジテ以テ先生ト思ヒ自ラ僭シテ以テ先生ト號スル者ナリ」

と言うように自称先生が多すぎる。このことを嘆いているのだ。(「僭シテ」とはおごること)
これでは今日の先生が明日は車夫と化し、今年の学僕がにわかに先生となっても不思議ではない。先生の「粗製乱造」だと言う。

これに対し先生社中からは以下のような反論が聞かれる。

「学ノ進ムハ刮目シテ待ツ可シ学僕豈頓ニ大博士タラザルヲ知ランヤト」と。

つまりは「学問は日々進歩している。したがって学僕が俄かに大博士となる場合だってあるんだ。それがわからないか。」と言って柳北を批判する。

しかし、柳北は「そんなのは真の先生ではない」と断ずる。
幼少から圧倒的な教養と学問を身につけ、転換期においてもいち早く洋学に取り組んできた柳北から見れば世の自称「先生」達は「偽物」にしか見えなかったのはことの当然である。

現代においても「一億総評論家先生」と言った傾向が見える。しかし、それはまた「一億総白痴化」時代を意味するとも言えなくもない。

結語

「我ガ日本帝国ノ狭小ナル壌地ニシテ先生大家ノ数ハ欧米諸州ニモ超絶シタルハ豈是レヲ欣〃慶賀セザルヲ得ンヤ是レ則チ君子國ノ称有ル所以ナル耶抑モ亦以テ先生國ト改称ス可キモノナル耶」と。

「君子」則ち「先生」だとすれば、いっそ「君子國」を「先生國」って変えたらどうです。これまた、薄っぺらな新時代への痛罵である。

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

濹上の嘆(明治9年9月10日)

濹上すなわち隅田川流域の景勝地に近年訪れる人が少なくなったことを取り上げる。
しかし、この文意はそのことそのものにはないようだ。濹上に人が訪れなくなったことを嘆いているのではない。都会の人士が濹上を訪れる目的そのものの変化を嘆いていると言っていい。そしてそれは同時に新時代の人士の柳北への批判の反証となっている。

では、柳北への批判とはどういったものか?
柳北が
「風月ノ権ハ花柳ノ権ニ若ザル也山水ノ美ハ脂粉ノ美ニ敵セザル也」
と言うと、「風流自ラ任ズル騒人雅客」はおもいっきり次のように言って批判する。
「足下ハ文士ノ後ヘニ従ヒナガラ風流ノ情趣ヲ解シ得ズ濫リニ蕩子冶郎ノ口吻ヲ模擬スルカ」と。
即ち、風流のなんたるかをお前は知らない。すぐに花柳や脂粉を取り上げる遊び人の口真似をしているだけだと。

これに対し柳北はまず、濹上すなわち隅田川流域の景勝地がいかに春夏秋冬見るべき味うべきところが多いか言い、もちろんここに「脂粉」即ち花柳界の女性が加われば言うことはないが、それは一つの要素であり、要は濹上は単なる歓楽街ではないとする。
だが新時代の人士はそこを単なる歓楽街としてしか見ていない。新政府が以下のような御触れを出した途端に客が減ったのが何よりの証拠だとする。

「頃日官人貴族ノ酒色ニ耽リ挑達ノ遊ヲ為ス者ノ為メニ懲戒ノ法ヲ設ケタリ」
「遊客ノ愛妾狎妓ヲ携ヘテ酒楼ニ投宿スル者ハ挟梴官必ズ其ノ牀第(ネドコ)ニ就テ之ヲ鞠訊スト」

つまりは当時の官人貴族の遊びがひどかったために新政府が取り締まりに乗り出したというわけだ。これによって濹上の客が減ったということは、いかに当時の人士が濹上を歓楽街としてしか見ていなかったかという証拠だと。

柳北は言う

「噫妾妓ノ衾(衣偏に周)ヲ同ウスル無ケレバ濹上ノ風月モ敢ヘテ楽ムニ足ラザル耶曲眉豊頰ノ相追随スルニ非ザレバ濹上ノ山水モ亦賞スルニ足ラザル耶」と。

新時代の支配層の人士の遊びは要するに下品なのだ。もちろんここには江戸の遊びの自負がある。また、薩長の田舎侍への嫌悪がある。

「高尚ナル面貌ヲ装フ者ハ盡ク偽ナル耶」と。また、「彼ノ都人士ノ淫褻ナル断乎トシテ其レ信ズ可クシテ」とまで言っている。「ニセモノ」であり、「ワイセツ」であると。

結語

「何ゾ彼ノ偽風流客ノ瓢礮ト筆刀トヲ懼レテ黙々タルヲ得ンヤ噫」

黙っていられませんよね。今だってこんな風に感じること多いです。

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

水の禍福(明治9年9月3日)

湯屋すなわち銭湯の大繁盛を書く。前半を読むと現在のスーパー銭湯ブームを彷彿させる。ほんと日本人は風呂好きである。柳北もまた風呂好きであった。柳北は言う。

「斯クノ如ク府下ノ士女争ツテ来タリ以テ其ノ垢賦ヲ洗滌シ全身ノ清潔ナルヲ得ル実ニ府下智者ノ夥キ知ル可シ是即チ我輩ノ大ニ楽シム所ロナレド其六根マデ清浄ニ至ルヤ否ヤハ我輩ノ敢テ保証シ能ハザル所ロナリ」

自分もまた銭湯を好むが、東京の男女が銭湯に浸かって「身も心も」清浄にするというつもりだろうが、「身」はともかく「心」まではどうか保証の限りではないという。ここらあたりがいかにも柳北らしい。銭湯の効能に若干の留保を置く。これが後半の旱魃について語ることにつながる。

後半で柳北は旱魃について論じる。都会では銭湯が大繁盛し、まさに「湯水の如く」水を消費する。しかし一方で地方では旱魃である。だが、都会の士女は

「水ノ以テ人生ニ必須物タルヲモ想フコト無ク唯遊戯談笑シテ以テ旱魃ノ何物タルヲ知ラザル者蓋シ多キニ居ル」

と言うようにほとんど旱魃について考えてもいない。

それを柳北は

「我輩ハ是ヲ以テ真ノ幸福ナリト公言スルヲ楽シマザルナリ」と言う。

こうした言に柳北の経世家らしい面を見ることができる。都会での楽しみに充分浸かってもいたし、その人生における大事さも十二分に体現していた柳北だが、一方でそれらを裏で支えることにも目配りを忘れていないのもまた柳北であったといえる。

ここに若干の都会の人士(即ち都会の支配層)への批判を読み取ることもできるが、それを声高には言っていない。ただ、軽く

「いつまで銭湯の楽しみが続くかは保証の限りではないよ。ちょっとは地方の旱魃のことも頭に入れておかないとね。」と言ってるのみだ。

また、結論は

「君其レコレヲ水道ニ問ヘ」とのみ。

これはお天道様次第とでもとれる言い方だが、ここらあたりもいかにも柳北らしく好ましい。

画像のキャプション表示

figureタグを使う話の続き

figureタグのなかにfigcaptionを書いておけば、画像の下にfigcaptionで書いた内容が表示されることは前回書いた。それを画像の中に書いてやることもできるのは容易に想像できる。positionプロパティを使ってレイヤにしてやればいい。positionは親要素にも書いてやらないとz-indexが効かない。cssは以下。

スクリーンショット 2015-12-17 9.00.00次に表題と説明を上下に分けてみる。ついでに文字色を白に文字も中央揃えにしてみた。
cssは以下

スクリーンショット 2015-12-17 9.14.31更にマスクを掛けてみる。cssは以下

backgroundで透過色を指定しているだけだが、ブラウザが持っているh3やpのプロパティを初期化していないので、ここで指定し、下の部分はbottom指定も変えている。

スクリーンショット 2015-12-17 9.37.36

最後にこれをマウスオーバー時にキャプションが現れる形にしてみる。ここではopacityを0、すなわち完全透過で非表示にし、:hoverでopacityを1にして、透過なしにする。その際若干の時間差をつけてやるといい。それはtransitionを使う。その部分のcssは以下。

これについてはデモをご覧ください。
なお、もっと上手なエフェクトについては
http://www.nxworld.net/tips/css-only-caption-effect.html
をご覧ください。とても参考になります。

 

画像のタイトル表示再び

前に画像のタイトルを画像の下に表示することについて書いた。
目的はimgタグの属性であるtitleに書いた内容をそのまま使いたいという点だった。
しかしこれをcssだけで行うのは無理なようだった。やはりjavascriptを使わなければならない。
それについてはいかに有力な情報があるので参考にしてほしい。
http://park5.wakwak.com/~tito/archives/2005/11/javascript.html

figureタグでキャプション表示

ここはimgタグのtitle属性を取得するのではなく、captionを別に書いておいて様々な形で表示する方法をやってみる。これにはhtml5から加わったfigureタグを使う。

html

css

こうすると以下のような表示となる。

スクリーンショット 2015-12-16 11.18.22そのままの記述でfigcaptionタグに指定した文字列が表示される。

となれば、今度はcssに手を加えて、このcaptionを画像に重ねるだとか、マウスオーバー時に現れるだとか、様々な場所に、様々な形で表すことができるのは当然ということになる。これについてはまた別稿で。

今やパッケージアプリはいらないね。

実は画像処理ソフトのことで相談を受けていた。これまで慣れ親しんでいたアプリがWin10にしたら使えないというのだ。新しい物を入れればいいとか、フリーの対応するアプリだってあるよ、といったアドバイスが浮かぶが、そんな必要はありません。そうwebアプリを使えばいいんです。しかもこんなにも進化しています。ほとんどPhotoShop並みな機能を持っていて登録も必要ないアプリがあるんです。色々と紹介するサイトもありますから、そこから自分に適したものを使ってみるといいですが、本格的な物を一つ紹介します。

PIXLR EDITORは使える

スクリーンショット 2015-12-15 10.25.03
http://pixlr.com/editor/ にアクセスしたところ。メニューも日本語対応、レイヤー操作もできるしほとんどPhotoShop並みです。ところが右側の巨大広告がいけません。Macを使っていますがブラウザはChomeです。(ちなみにFlashを使っている様でSafariでは使えない様です。)これは嫌ですね。広告を非表示にするボタンはありません。

スクリーンショット 2015-12-15 10.25.19そこでChomeの表示を拡大します。そうすると広告は消えますよ。これで次からはこの表示で使える様になります。
勿論ある程度は画像処理処理に慣れていないと使いこなせんませんが、これまで使っていたアプリが動かず、あらたにアプリを入れようかと思っている方は十分使えると思います。

なお、初心者向きのアプリもあるようですし、このアプリにも初心者向きもあるようです。

ほんと「今やパッケージアプリはいらないね。」

 

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

権兵衞ノ小言(明治9年8月27日)

いわゆる「秩禄処分」を問題にする。
明治になって幕藩体制は崩壊する。それにともなって藩から禄をもらっていた大量の士族たちの収入は実質的に無に帰す。しかし、一気にそうなるのは相当な社会的混乱を生じてしまう。そこで明治政府がそれを一時的に肩代わりしていた。だがそれもこの明治9年に至って、金禄公債を一時に支払うことによって廃止することとなった。
それを柳北一流の問答形式で喝破する。

権兵衞すなわち百姓と軍太衛門、兵太九郎という士族の問答だ。(ネーミングも面白い)

士族が言う。「百姓の種は鴉に食われたとしても、何粒かは残るだろう。しかし、自分たちの飯の種は遠からず政府に引き上げられて一粒もなくなってしまう」と。つまり「秩禄処分」について不満を言う。それに対し権兵衞が目を皿にして士族を睨んで言う。

「公等ハ元来国家ト人民トノ事ヲ少シモ思ハズ唯我ガ利ノミヲ是レ視ル所謂我利我利亡者ナルノミ往昔圧政ノ病毒天下ニ流行シタルニ因リ遂ニ幕府モ各藩モ其ノ毒ノ為ニ斃レタリ然ルニ其怨霊ガ今日迄残リ留マリ廃藩置県以来数年ノ間華士族ノ家禄ヲ我々ノ膏血ヨリ出スハ則チ公等ノ如キ我利我利亡者ノ為ニ七代祟ラレタルモ同様ナリ実ニ此ノ六七年ハ道理ニモ何モ当ラヌ物ヲ年々取ラレタルニ非ズヤ然ル故ニ今度政府ガ禄券ノ制ヲ立テラレシハ実ニ神通力アル修験者ガ怨霊ノ祟リヲ祓ヒ除ケント一般ニテ我々ハ天ニ仰ギ地ニ附シテ歓喜スル所ロナリ」と。

これまでも自分たちは我利我利亡者の士族に血税を絞り取られてきた。その後もその祟りで相変わらず政府に士族の為の金を搾り取られている。まさに祟りであると。しかし、今回の「秩禄処分」はその祟りを祓い除くためだから良しとすると言っている。
もちろんその額は相当な物となるから、これからだって血税をとられてしまう。しかしこれは「縁切り金」と思えば仕方がないとしている。

以下の権兵衞の言はふるっている。

「我々ハ未ダ十分満足セザレドモ政府が仁心深クシテ幽霊ガ安楽ニ成仏スル様ニト定メラレタル法度ノコトナレバ七代モ八代モ祟ル亡者ト遠カラズ縁切リニナルヲ楽ミニ有難ク畏ツテ罷リ居ルナリ」

これは決して政府の政策を手放しで賛同していないことを表しているが、柳北は明らかに士族の側にはいない。柳北は元幕臣であったが、隠居を機に平民になっている。賢明な選択であった。もはや士族の時代ではない。しかし平民百姓は相変わらず形を変えて負担を強いられていることも見逃してはいない。いわば政府に釘をさす言と言える。

末尾にこの権兵衞の小言に怒った士族が鬢端を打ち切ろうとするが、

「刀ヲ獲(さ)ガセド腰ニハ何ンニモ無カリケリ」という次第である。