2018年9月8日土曜日

nanoblock award 2018にエントリー中です

※9/18エントリー作品追加!※
凝りもせず、今年もnanoblockのワールドコンテストである「nanoblock award 2018」にエントリーしています。

まずは目指せ、優秀賞再受賞。もしよかったら、リンク先の作品紹介ページの「Like」ボタンを押していただけたら嬉しいです。

▼Under200部門(※ブロック200個使用までのnanoテイスト溢れる部門)

▼No Limit部門(※ブロック使用個数制限なしの無差別級部門)

#nanoblock

2018年2月22日木曜日

NHK教育の幼児番組で、大人も唸れるいい曲を教える(※随時更新?)

娘が生まれて、これでもかというぐらい子供番組を見ることに。まだまだ1歳ですので「いないいないばあっ!」「おかあさんといっしょ」を喜んでみております。アンパンマンやトーマスも見せるけど、もう少し月齢が経たないと受けないのかも。

そんな中で、大人の私も「お、これはいい曲じゃん」と思った(もしくは娘が喜ぶので洗脳された)曲があるので、ここでご紹介。


「ベルがなる」


「おかあさんといっしょ」のエンディング。個人的に一番好きな曲。
心臓の鼓動を「ベル」と例えており、幼児向けの曲のくせに歌詞が実に深い。深読みしすぎかもしれないが、最後は輪廻転生まで歌ってるんじゃないかと思ったりする。
りんどん かんろん りんどんかん
げんきにべるを ならすきみ
ひとりであそんでいたぼくは
べるにつられて あるきだす 
べるもきみも ぼくもかぞくも
どうぶつたちまでうごきだす
おもちゃもふくも つくえもいすも
なんでもかんでも みんなでおどる 
ちいさなおとで かんこんかん
もっとちいさくできるかな
しずかになったらきこえてくるよ
むねのなかから とくとくとく
だんだんおおきく どくどくどく
もっとおおきくりんどんかん 
きみがならして ぼくもなる
みんなのために べるがなる
べるをならして おいわいだ
みんなでいっぱいおどったら
いっかいさよなら またあおう
りんどん かんろん りんどんかん
この歌詞は時々しか流れないフルバージョンで分かる歌詞。
通常放送は「べるもきみも~」から「もっとおおきくりんどんかん」のパートは子供たちと行進するシーンとなり歌詞はないのだが、「きみがならして~」の前にに歌のおにいさんが「今日はおっしまーい!」といってサビに入る展開が実に素晴らしい。
ついつい見て聞いてしまう名曲。




「はなのいろ」

初見で聞いて「これはあの人の曲だな」と思ったら、やはりそうでした。作詞・作曲は山本正之。タイムボカンシリーズでおなじみの"アニメの大王"。
イントロや間奏で流れる牧歌的な独特の音遣い、曲に入る寸前の「♪タッ・タッ・タ~」という切り方、柔らかい言葉遊びに韻を踏むような響きがいい歌詞はまさに『山本節』。
1番の「♪赤・赤・きれい バラの花」の字面に2番では「ピンク・ピンク・きれい コスモス」と当ててきているところが、実に山本大王らしい曲の作り方。
私がフルで歌詞を覚えてる数少ない子供向け曲です(笑



なお、山本大王は「おとうさんといっしょ!」でも「イチジョウ7」という曲を提供してるようですが、こちらは完全にバリバリ山本節となっております(笑)。


「のりものステーション」

作詞・作曲がつんく。この部分ですごく驚いた。曲も途中でオリエンタルな曲調をまぜて変化をつけており、結構耳に残ります。「わんわんワンダーランド」でも人気の曲で、ダンスも動きが大きく、見てても楽しい。
この曲は、娘がなかなか寝なくてぐずって抱っこし、この曲を歌いながら振付に合わせた揺らしをしてあげるとすぐに寝てくれたので、個人的にはすごく助けられた名曲。




「ずーっといっしょ」

作詞:三浦徳子、作曲:つんくのコンビ。確か初めて「いないいないばぁ」を見た回で流れて、初見でいい曲だなぁと思った。
いないいないばぁ20周年放送の曲らしく、歴代の女の子が歌いまわす形式だけど、歌詞が実にいい。映像も歴代の女の子の人形がかわいいくて曲にあっててこれもいい。


ほらね
風をすうたび いいにおい
風をすうたび いいきぶん(うん!)
風をすうたび げんき げんき げんき!!
風をすうたび さいこうさ

いっしょにあるいて おそらのしたで
いっしょにはしって いち、にの、さーん(GO!)
いっしょにわらって へへへのハハハ
いっしょにないたら ほっぺにチュッ!(CHU!)

ワンワンとみーんな てをつなごう
目と目があえば うれしいよ(OH!)
ずーっとずっと いっしょだね
(ゴー! イェーイ! ワオ!)

いっしょにあるいて バウワウバッフン
いっしょにはしって ブンブンブキューン!(ブキューン!)
いっしょにわらって にこにこ んぱ!
いっしょにないたら ジャンプ!ジャンプ!ジャンプ!(JUMP!)

みんないっしょに てをつなごう
目と目があえば うれしいよ(OH!)
ずーっとずっと いっしょだね
ずーっとずっと いっしょだね
ずーっとずっと いっしょだね! ずっと!



グローイングあっぷっぷっぷ

「みいつけた!」の最後に流れる曲の一つ。作詞が宮藤官九郎、作曲が星野源という号かなコンビ。とにかくじわっと泣ける染みる名曲で、まずメロディは往年の「みんなのうた」のようなきれいで素朴な雰囲気。そこに幼児用のイスとお別れする成長を見守る歌詞が乗っかっており、「星野源、すげー!」「宮藤官九郎、やればできるじゃん!」と思える曲。この曲が流れると、家を出ようと思ってもとりあえず聞いてから家を出る、そんな曲です。
ちなみに、放送では現在は1番の男の子編でなんだけど、2番は女の子の三輪車がテーマになっていて、これまた泣けるらしい。




「なぞなぞうた いたちのたぬき」

ピタゴラスイッチで流れる数え歌。数え歌といえばなぎらけんいちの「いっぽんでもにんじん」だが(古!)、この曲は超秀逸な歌詞で私の中の数え歌ベスト1になってます。いや、この言葉遊びはすごすぎる。



2018年2月6日火曜日

podcast「佐藤大のプラマイゼロ」"日本一遅い箱根駅伝振り返りトーク"の放送台本2018

podcast「佐藤大のプラマイゼロ」の最新回「#110 バトンのオトナ」が更新。
毎年恒例であります「日本一遅い箱根駅伝振り返りトーク」の今年分が公開されましたよ。
今年も「箱根担当大臣」である私めも勝手に協力させていていただいております
正月は両家にあいさつに行くようになり、箱根の1/2と1/3はネットワークがない(場所によっては下手すりゃ3G回線)実家から、しかもまだ1歳の娘もいたりするので、twitterでのリアルタイム追っかけどころか、テレビ中継もほとんどリアルタイムでみることができず(ちゃんと見れたのは1区、2区途中、5区途中、6区、7区、10区ラストのみ、というぐらい)。そのため、12時間の箱根録画でまとめ作りとなりました。だからtwitterのリアルタイムな動きは、大さん、おすぎさん、アマDぐらいのツイートぐらいしかピックアップしていないです。

・・・が、それでもこのボリューム。何をしてる、俺は。嫁も半分白い目でしたわ(苦笑


ということで、放送されたので今年も"放送台本"を公開。放送は30分枠を取ってましたが「これ全部やるとすげぇ時間がかかっちゃんで by 佐藤大」というボリュームですので、追記にしております。放送と合わせてよかったらご覧くださいませ。

2018年1月31日水曜日

class付与をtoggleClassで自在にする

ボタンをクリックしたらボックスが表示←→非表示、とかいう動きを、とりあえずclassを付けたらとりあえず何とかなる、という発想で解決した手法。

基本形。「.btnというclassが付いたボタンをクリックしたら、.openが付いてるdivに.activeというclassを追加する」という仕組み。

▼HTML



ボックス
▼JS




▼CSS

.open{display:none;}

.open.active{display:block;}

ポイントはCSSでopenはdisplay:noneで非表示にさせておいた上で、.activeが付いたらdisplay:blockにする点。
あと、classに向けて付与させるためのものか、反映させる要素にclass設定が入ってないとダメっぽい?(この場合.openのこと。#openにしてJSの指定を#openにしてもclass付与されない)

さらに、これに「.btnも色が変わる」とボタン自体にもクラスを付けた場合はこのようになる。





classの指定でもいいが、発動起点となるクリックした要素事態だからthisという指定でもOKらしい。その際は''は使わない。


    $(this).toggleClass('active');


これが「3つのボタン&3つのboxの開閉」となったらclassを変えて設置する。(HTMLとCSSの内容は書くのが面倒なので各自対応で)





ただ、上記の内容だとbtn01をクリックしbtn02をクリックすると、box1とbox2が同じ画面にあることになる。これはtoggleClassはclassを付け外しする命令のため、もう一度ボタンを押さないとクラスが外れないため。そこでクラスを付ける・外すだけの命令もある。

toggleClass・・・クリックするたびにクラスを付ける・外すを繰り返す
addClass・・・クラスを付ける
removeClass・・・クラスを外す

addClassでクラスを付けたらクラスはそのままになるので、クラスを消す処理が必要な場合はremoveClassで確実に外す処理が必要となる。
「画面には1つのboxだけが表示されて出し入れされる」というサンプルは以下の通りとなる。





めんどくさっ!
toggleClassではなくaddClassとremoveClassを組み合わせて、一つのボタンをクリックしたら他の要素からremoveClassでactiveを外す、という命令にすると対応可能、というわけ。
もっとスクリプトで高度なやり方がありそうだが、手持ちの武器でできる簡単な実装はこんな感じとなる。

ここまでは「クリックしたら」だったが、発動処理を「マウスオーバーしたら」にすることも可能。





あとおまけ。display:block、noneだとパッと開いちゃうので、これを少々アニメっぽく動く縦の拡縮にすることもできる。


.box{
 max-height: 0;
 overflow-y: hidden;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}

.box.active{
 max-height:1000px;
 -webkit-transition: all 0.8s;
 -moz-transition: all 0.8s;
 -ms-transition: all 0.8s;
 -o-transition: all 0.8s;
 transition: all 0.8s;
}


つまり、max-heightの高さに加えてtransitionでアニメっぽく見せている処理にしちゃうわけですな。
これも気を付けないといけないのは、.boxに上下のpaddingとか使っちゃうとそのスペース分だけ画面に残ってしまうので、.boxの内部要素で上下のスペースを取る工夫あり。
横の拡縮とかも出来そうなので、そこは各自工夫で。

ページ読み込み時、時間差で要素を表示させるスクリプト記述

ページ読み込み時、という限定ではあるが、ファーストビューが読み込まれて●秒後に表示させたい、とかいう時のスクリプト。

基本形。「ページ読み込みがあったら、div id="block01" の要素を3秒後にフェードインさせる」。いろいろ試してとりあえずコレで。
setTimeoutが時間を管理する命令で、最後の3000が秒数となる。最初にopacityの値を0で表示させないでおくのがポイントで、3秒後にopacityを1にして表示させる仕組み、らしい。




で、これに「ページ読み込み後、3秒目でにフェードインして、10秒目でフェードアウトする」となると以下の通りとなる。
setTimeoutでopacityの加減命令を並べて書いて秒数を変えて時間差をつけているだけなのだが、間違えてはいけないのは秒数は読み込みからの時間であり、最初の命令からの時間ではない点。




さらに、これに「ページ読み込み後、#block01をフェードイン→フェードアウトした後、#block02をフェードインさせる」となると少し複雑になると以下の感じ。





宣言にhideを増やす。これはdisplay:block、noneと同等の動きらしい。この処理を加えた理由だが、opacityだと画面に見えないが要素が残っており、リンクなんか張った要素だと空白地なのにリンクが押せちゃうので要素自体を消す必要があるため。つまり宣言では、透明にしたうえで非表示という2段階の処理を加えている。
そしてsetTimeoutが来たら、showで要素を表示させ、opacityを1にして透明から非透明にして要素を登場させる、という処理を同タイミングで行わせている。

参考:
「~秒後に、指定した要素をフェードアウトさせる」
「jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法」

2017年3月9日木曜日

podcast「佐藤大のプラマイゼロ」"日本一遅い箱根駅伝振り返りトーク"の放送台本2017

podcast「佐藤大のプラマイゼロ」の最新回「#106 ハッケンのリサイクル」が更新。
月一更新の番組ですが、今年は全くの音沙汰なし。大さんかおすぎさんが倒れたのか、いや番組自体が!?と思ったのですが、昨日ようやく初の更新で一安心。
すでに3ヶ月も経ってますので話したい事が山盛りだったようで1時間40分の長丁場。いや、一安心しました。

ででででで、
箱根専用放送作家改め「箱根担当大臣」になった私も勝手に協力させていていただいております「恒例・日本一遅い箱根駅伝振り返りトーク」が行われております。まさに日本一遅いです。
内容はさらりと20分程度で終わりましたけど(笑)。まあ、3ヶ月も経ってるしねえ。

ということで、今年も"放送台本"を公開。20分じゃたらないボリュームの内容となっております(笑。長いので追記にしておりますので、よかったらご覧くださいませ。



2017年3月7日火曜日

SSHのコマンド一覧

SSHで処理した方が楽な作業が多くなってきたので(バックアップとか)、コマンドをまとめておく事にする。よく使うコマンドだけなので追々追加。

▼基本


ls ・・・ ディレクトリ内の確認

cd «対象ディレクトリ» ・・・ ディレクトリ移動

▼フォルダを丸ごと圧縮


$ zip -r «ZIPファイル名» «対象ディレクトリ»

$ unzip «ZIPファイル名»

2016年12月21日水曜日

EC-Cube(2系)でプラグインをインストールできない場合

さくらビジネスに移管したEc-Cube 2.12.2でプラグインを入れようとしたところ、
赤文字で「※解凍に失敗しました」の文字。

という事で調べてみると、Archive/Tar.phpというファイルの最新版を取ってきて入れ直してみると動く模様。PHP5.5上で動かないファイルがあり(下記の通り)、どうもこのファイルがその元凶らしい。

・オーナーズストア>モジュール管理
・オーナーズストア>プラグイン管理
・システム設定>バックアップ管理
・デザイン管理>テンプレート追加
・コンテンツ管理>ファイル管理

入れたらさくっと動きました。

2016年12月20日火曜日

サーバー引っ越しをしドメイン移管をした際のWPに入っているhtaccessの設定に注意

へテムル→さくらビジネスのケースだけじゃないと思うが、サーバー移管でWordpressを移管する際の注意点。
特にhtaccess。マルチサイトを切っている場合は特に気をつけておく点をメモメモ。

【1】旧サーバーで使っていたhtaccessは合わない可能性が高いので、基本一緒に移管しない。
一緒にアップロードせずにとりあえずhtaccessなしでとりあえず動かす(もしくは、デフォルトのhtaccessを入れておく)
じゃないとおそらく画面は「Internal Server Error」が表示される可能性あり。

【2】マルチサイトを使ってる場合は、最初はhtaccessは持ってかない。なぜなら設定が変わってる可能性があるため。
管理画面のネットワーク管理画面にある「設置」→「ネットワーク設置」にあるhtaccess情報をコピーしてサーバーにhtaccess初アップ。
これで、一応マルチサイトの末端ページは見る事が出来るはず。見る事はね。

【3】上記の設定だと、マルチサイトの管理画面に入れない、マルチサイトでアップした画像やファイルが閲覧できない可能性がある。
これは上記の「ネットワーク設置」にある情報では動かないため、らしい。htaccessの中にインストール先ドメインが入ってるかと思うので


RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) ●ドメイン●$2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ ●ドメイン●$2 [L]

これを削除してアップすると、マルチサイトが動き出す。


RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]

ドメイン移管処理後、できるだけ早くチェックしたい場合の設定

ドメイン移管処理を行った際、同サーバー内でのDNS切り替えなら比較的すぐに反映するけど、別サーバーにDNSを切り替える場合だとネットワークドメイン浸透に時間が掛かってしまい、ちゃんと移管できたのか分からないのでどきどきする・・・という事がある。特にショッピングサイトだったりとか、でかいクライアントのサイトだったりとか。メンテナンスの看板を出しておくというのも手だけど、すばやく確認できるようにしたい場合は、ネットワークのDNSをGoogle Public DNSにしてあげると反映後のサイトを見るスピードを速める事ができる。

いわゆるTCP/IP設定のDNSサーバーに、「8.8.8.8」と「8.8.4.4」を設定するだけでOK。