[4169] ロボットを制御する

投稿:  著者:  読了時間:29分(本文:約14,400文字)



《そろそろ“参加するする詐欺”になりそうです》

■まにまにころころ[101]
 ざっくり日本の歴史(後編その19)
 川合和史@コロ。 Kawai Kazuhito

■クリエイター手抜きプロジェクト[471]IoT編 
 ロボットを制御する
 古籏一浩

■LIFE is 日々一歩(36)[Web]
 Bootstrapの使い方をまとめてみた(3)
 森 和恵

─【PR】───────────────────────────────
      ★ グラシン工房 ★ →→ http://bit.ly/1LWFYLN
  半透明の極薄紙「グラシン紙」の封筒など、ラッピングアイテムを販売
      オリジナル柄の印刷やOEMでの製造も承っております
    ───────────────────────────
☆極薄紙の印刷事例はこちらでチェック →→ http://bit.ly/1h1Vw8i ←←☆
    向こうが透けるほどの薄紙へ あなたのイメージを印刷します
───────────────────────────────【PR】─





━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■まにまにころころ[101]
ざっくり日本の歴史(後編その19)

川合和史@コロ。 Kawai Kazuhito
http://blog.dgcr.com/mt/dgcr/archives/20160725140300.html
───────────────────────────────────

こんにちわん、コロこと川合です。前回と前々回は新選組の話を取り上げて、その中で容姿の話にも少し触れましたが、なんと、なんとこのタイミングで、斉藤一の写真が発見されました!! しかも、イケメン!!!

・斎藤一の鮮明な写真見つかる「これが死線くぐった目だ」
http://www.huffingtonpost.jp/2016/07/15/hajime-saito_n_11008828.html

明治30年の写真なので、おじいちゃんですけど、かっこいい!

写真でも絵でも、その見た目ってなんだかんだイメージする上で重要で。特に歴史上の人物なんて想像するしかないですしね。ドラマ化された時なんかも、配役の容姿がイメージに合っているか、演技と同じかそれ以上に大事だったり。

歴史上の人物ではありませんが、ここ最近『シャーロック・ホームズの冒険』を動画配信サイトで少しずつ見てまして。英国グラナダTV版、ホームズ演じるジェレミー・ブレットがめちゃめちゃかっこいい。かっこいいだけでなくて、原作の挿絵から抜け出てきたのかってくらいそっくりでもあって、最高です。

・U-NEXT『シャーロック・ホームズの冒険』(有料)
http://video.unext.jp/title/SID0011235

ここで毎度おなじみ『真田丸』の話なんですが、小早川秀秋を浅利陽介さんが演じられています。この浅利陽介さん、『軍師官兵衛』でも小早川秀秋役で。同じ役が二回振られるだけあって、これがまた、小早川秀秋の肖像にそっくりなんですよ。どこか気の弱そうなところが。(笑)

大河で肖像に似てると言えば、『花燃ゆ』で吉田松陰先生を演じた伊勢谷友介さん。こちらも本人(の肖像に)そっくり!

もっとも、浅利さんも伊勢谷さんも、改めて写真を見比べると、まあそこまでそっくりかなあと思ったりもするので、そこは演技のなせる技なんですかね。

さて前置きが長くなりましたが、今回は伊勢谷、いや、吉田松陰先生のお話を。実はずいぶん前、『花燃ゆ』やってた頃にもまにころで触れたことあるんですけども、改めてってことで。

以下、松陰、松陰先生と、表記が揺れますが、ちょいちょい敬意が漏れ出てるということで気にせず読んでください。

◎──吉田松陰(1830年9月20日-1859年11月21日)

没年からわかるように、松陰先生自身は維新に直接関与していません。ただ、松陰が開塾した「松下村塾」の門下生に、維新に大きく関わった面々がずらり並んでいるので、反幕府側の最初としてこの方から取り上げようかと。

なお、松下村塾を開塾と書きましたが、元々は叔父の玉木文之進が開いた私塾で、松陰自身も幼少の頃そこで学んでいました。松下村塾の名を継いだのは、松陰で三代目になるのですが、講義内容とか体制に連続性はなさそうなので、「松陰の松下村塾」ってことで。

松陰は長州の萩で杉百合之助の次男として生まれ、山鹿流兵学師範の吉田家に養子に行きました。養父はすぐに亡くなり、前述の通り松下村塾で玉木文之進に学ぶのですが、9歳で藩校である明倫館の兵学師範に就任。11歳で藩主の毛利慶親に御前講義を行うなど、まあ天才児ですね。

明倫館の師範就任は家柄から家学教授ということで、就任自体は形式的な部分もあったと思いますが、御前講義の出来は慶親に高く評価されたとのことです。なお、この時講義した題材は、山鹿素行『武教全書』です。

思いっきり余談に逸れますが、松陰の兄、杉民治の孫である杉道助は大阪商工会議所の第十六代会頭です。山口で生まれ、慶應義塾大学を経て大阪に。墓所は萩にあって、「杉家第八代。生涯松陰を敬慕」と立て札に記されています。また杉道助は、海外市場調査会(現・ジェトロ)の創設者でもあります。

・創設者・杉道助氏の想いとジェトロの中小企業海外展開支援について
https://www.jetro.go.jp/ext_images/jetro/japan/yamaguchi/magazine/pdf/vol23.pdf

杉家の子孫にも敬慕される松陰ですけども、まあとんでもない人でして。幼少の頃から兵学のみならず、広く学問に励んだ松陰ですが、その松陰が10歳の時、清がアヘン戦争で大敗、それを知って西洋の学問の必要性を感じます。

20歳で九州に遊学、さらに江戸に向かい佐久間象山や安積艮斎に師事します。山鹿流の兵学者として、山鹿素行の子孫である山鹿素水にも入門しますが、松陰の感想は「この人は大したことねーな」って感じだったみたいです。

松陰が強く影響を受けたのは、佐久間象山。象山はまたいずれ改めて取り上げたいです。

この間、肥後藩の宮部鼎蔵と知り合い、22歳の時、宮部らと東北遊学を計画。この東北遊学に向かう時、藩に申請していた通行手形の手配が出発予定の日に間に合わず……宮部さんと約束してるのに延期なんてしないよと脱藩。

脱藩は重罪です。江戸に戻ったら士籍剥奪されました。

なおこの宮部さん、前々回に書いた、新選組に池田屋で斬られた宮部さんです。

◎──この国を守る意志

そこまでして東北に何しに行ったのかって話ですが、ネットや本を見ると時々「旅行」と書かれています。まあ、旅行っちゃ旅行ですけど……物見遊山ではありません。

松陰より時代は遡りますが、田沼意次や松平定信らの時代の話、工藤平助『赤蝦夷風説考』、林子平『海国兵談』などでロシアの脅威に対する海防の重要性が説かれました。

『海国兵談』は幕府に発禁とされていましたが、書き写され書き写され世に伝わっていました。松陰は兵学者としてそれを読み、東北を実地検分することで海防について確認したかったんでしょうね。

林子平は、江戸の日本橋からヨーロッパまで世界は水路で繋がっている、ってなことを言った人です。

海に囲まれた日本は、それまでまあ安全な国でした。外国はなかなか日本まで攻めてこられない。最強の騎馬隊を誇った元軍も、馬で海は越えられず、神風で追い払われました。

その元、というか中国は、周りの国から自国を守るため、万里の長城なんてものを築く必要があったのに、日本はそこまでしなくても、海が守ってくれていました。増強はできませんが補修もいらず、季節によって荒れ狂ってくれたりと、それはそれは頼りになる存在でした。

ところが、だんだん世界の航海技術が海を平気で渡るようになってきた。信長の時代にはもうヨーロッパからやってきていたわけですから、幕末までの間に船も航海術もさらにどんどん進化していってます。同時に武器も。

一方で日本は鎖国政策の一環で、外国に渡れるような船を作ることさえ禁止し、海のことを(沿岸の輸送を除いて)考えないようにしてきました。200年以上。武器のことも考えずにきました。200年以上。

兵学の観点で言えば、海に守られていた日本は一転、海によって丸裸にされたわけです。アヘン戦争で西洋の脅威がリアルにそこまで迫ってきたのを受けて、兵学者の松陰は日本の海防が心配になったんです。幕府と違って。

松陰がずっと学んできた兵学は、まあ平時は机上の学問でしかなかったわけで。それが突然、本当の意味で必要な時代になってきた。今こそ兵学者としてこの日本を守る時だ、それこそが自分の役割だ、という思いは、強烈な攘夷思想となります。

そんな折、ヤツがやってきます。黒船です。ペリーです。

◎──ペリー来航(1853年・1854年)

前にも書きましたが、黒船は突然やってきたわけではありません。来ることは知っていましたし、それ以前からアメリカは日本にアプローチしていました。

イギリスなんかにとっては、アジアは徐々に侵略していく対象で、日本はそのアジアの一番端っこ、「極東」でしたが、アメリカとロシアにとっては、日本は「お隣さん」で。侵略対象というよりは、とりあえずは仲良くなりたい先で。

ロシアもアメリカも、まずは友好的に日本に接近を試みました。でも幕府は、欧米諸国を(オランダ以外)ひとまとめにして、追い払いました。

そんなこんなを踏まえてペリーはやってきます。強硬な幕府に対して、強硬な姿勢で。軍艦で。帆船でなく蒸気船で。大砲を積んで。

それを松陰は目の当たりにします。佐久間象山と共に浦賀に見物に行って。

「来年また来るらしいから、その時は日本刀の切れ味を思い知らせてやるぞ」なんてことを手紙に書いて宮部鼎蔵に送ったそうですが、まあ実際の感想は、「西洋はんぱない、西洋やべえ」だったんじゃないかと。

さすがというか、松陰は盲目的に西洋を敵視する連中とは違って、本腰入れて西洋の学問を身につけようとします。師匠の佐久間象山の影響かも知れません。

さすがというか、松陰はまた暴挙に出ます。長崎に寄港予定のロシア軍艦での密航を企てます。ロシアが予定を前倒しにしたためそれは叶いませんでしたが、諦めず、翌1854年のペリーの黒船での密航を企てます。

結局、日本との軋轢を避けたいペリーによって退けられ果たせず。自首して、投獄されます。佐久間象山も、松陰をそそのかしただろうということで入獄、後に蟄居処分となります。

なおペリーの感想は「日本人の好奇心、すげーな!」だったと。一方の松陰は獄中で「かくすれば かくなるものと知りながら やむにやまれぬ大和魂」と。やむにやまれぬ好奇心、ではなく。この国を思う心に突き動かされた。

松陰と、同行していた金子重之輔は長州へ移されて、松陰は野山獄に、金子は岩倉獄に幽囚。金子は獄中で病死します。松陰は一年ちょいの投獄期間に600冊ほどの書物を読んだそうです。繰り返し読んだ本もカウントしてのことだろうと思いますが、すごい数です。

一年ちょいで600冊読む松陰ですから、生涯ではとんでもない数を読んだことと思います。松陰が読んだ本は、兵学者として山鹿素行『武教小学』『武教全書』ほか山鹿素行の著書あれこれ。

また『孫子』はじめ『呉子』『尉繚子』『六韜』『三略』『司馬法』『李衛公問対』といったいわゆる「武教七書」。儒学系で『論語』『孟子』『大学』『中庸』、松陰は朱子学より陽明学を好んだようで、王陽明『伝習録』、大塩平八郎『洗心洞箚記』、 佐藤一斎『言志四録』 など。

さらに歴史を重視し、『史記』『資治通鑑』、『日本書紀』『太平記』『神皇正統記』『日本外史』、などなど、まあ挙げればキリがありません。

著書や書簡など松陰が記したものも多く、松陰を追っかけると一生かかります。こっちは書物を追うだけで一生かかるというのに、松陰は読んで書いて動いて、全部ひっくるめて29年の生涯なんですけどね……

先に挙げた本は今でも手に入りそうなものを中心に、面白そうなのをチョイス。その半分くらいは読んでみましたが、字面を追っただけというか、松陰先生のように語れるほどにまでは読めていません。

凡人の私には、解説書がないと、書いてあることの本質は百分の一も理解できません。兵法書を読んでも、へー、ほーう、で終わりです……

さてそんな話はさておいて、1855年に松陰は出獄、実家の杉家に預けられます。

松下村塾を開くのはその二年後のことです。

◎──今回はここまで

松陰先生の話はまだまだ続くので、今回はここまで。次回に持ち越します。

松陰のすごいところは、長州藩士という身分にありながら、その目は日本全体を見ているところです。まあ藩士の身分は脱藩の咎で剥奪されてはいますが、松陰にしてみればそんなことは些事に過ぎなかったのでしょう。

藩だとか通行手形だとか、そんなこと言ってる場合じゃねーぞ、と。この日本を守るために自分ができることを全力でするんだと。

暴走っちゃ暴走ですけど、政権を預かっておきながら無策だった幕府を見かね、じっとしてはいられなかった松陰の熱情は、今なお尊敬されるのも分かる気がします。他にやりようはなかったのかよ、ってのは今だから言えることで。

……とは言え、めちゃくちゃですけどね。この先さらに。

次回に続く。


【川合和史@コロ。】koro@cap-ut.co.jp
合同会社かぷっと代表

https://www.facebook.com/korowan
https://www.facebook.com/caputllc
http://manikabe.net/

ポケモンGOやってる暇あれば、本の一冊でも読まなきゃですね……と言いつつ、ポケGOもやりますけど!


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[471]IoT編 
ロボットを制御する

古籏一浩
http://blog.dgcr.com/mt/dgcr/archives/20160725140200.html
───────────────────────────────────

今回は、7月18日に行われた、IchigoJamを使ったロボット制御の講座について書きます。

ロボットと言えば、一度は撤退したSONYも再び参入するとか、それなりにホットな世界という感じでしょうか。ロボット自体は古くからありますので、特に目新しいということはありませんが、AI(人工知能)と組み合わせると幅広い応用ができそうという流れがあります。

ただ、実際にロボットを制御したことがなかったので、どんなものなのかなということで、実際に自分で安いものを購入して組み立ててみました。

まあ、講座では助手役なのである程度の知識と経験、ノウハウを持っていなければいけないという理由もありました。ロボットといっても非常に多くの種類がありますが、今回購入したのは以下のロボットです。

・こどもプログラミングロボット「Paprika」
http://pcn.club/paprika/

これはIchigoJamから制御できるロボットです。IchigoJamならBASICなので制御も簡単、つまり子供でも手軽に扱えるということです。

ロボット自体は段ボールなので、購入後に自分で組み立てる必要があります。このロボットで制御できるのは、下のキャタピラ部分と両腕だけです。頭を回転させたり胴体を傾けることはできません。

キャタピラ部分はTAMIYAのものを利用しており、購入するとそのままTAMIYAの箱が入っています。こども向けの講座では、面倒なキャタピラ部分はあらかじめ作ってあるのですが、自分で購入した場合は、1から組み立てる必要があります。プラモデルを作ったことがある人なら簡単にできると思います。

思います、と書いたのはプラモデルという高級品を組み立てたことがないからです。多くの人は子供の頃にプラモデルを組み立てるのでしょうけど、そういう経験がないのでよく分かりません(まあ、貧乏だったので何かを買うという行為が、ほとんどなかったというのもあります)。

ということで、キャタピラ部分の説明書を開いて組み立てを開始しました。が、プラモデルを組み立てたことがないので、説明書にある図がよくわからないf(^^; それ以前に、ニッパーなるものが必要ということで、ホームセンターに買い出しに行きました。

道具を購入してようやく組み立て開始です。なんですが、最初の図が一体何の意味があるのか分からず。一応最後の方まで組み立て終わった後に、ああ、そういうことか、と理解するという状態。

プラモデルの図は、まとめて複数の部品を組み立てるように書いてあるので、何がどうなっているのか、ぱっと見ても分からず、とりあえず付けてみて何とかモジュールが完成。

プラモデルの図は、1を聞いて10を知るタイプの人にはいいのかもしれないけど(普通の人は、そういうタイプなのでしょう)、1から1ステップずつやって20くらいまでやって、10に戻って理解するタイプだとナントモです。

その後、ベース部分に電池モジュールなどを取り付けて、土台部分は完成しました。次はロボットの胴体部分です。段ボール部分の組み立ては簡単に終わりました。腕にはサーボモーターを取り付けます。

次にIchigoJamを接続します。ただし、そのままIchigoJamと接続しません。これらのモーターを制御するためには、以下の制御ボードMapleSyrupを付ける必要があります。

・MapleSyrup
https://hello002.stores.jp/items/5710afac00d331e5d00004b8

IchigoJamの上にこのボードを重ねます。あとは、ロボットを制御するための線を接続します。これでようやくロボットを制御する準備ができました。組み立て開始から、ここまで2時間。

ロボットをIchigoJamから制御するのは簡単です。ロボットを前進させるには、以下のように入力するだけです。

OUT 33

ロボットの移動を停止するには、以下のように入力します。

OUT 0

左腕を前に出すには、以下のように入力します。50の値は多少変更しないと腕がプルプルしちゃうことがあります。

PWM 3,50

右腕を前に出すには以下のようにします。240の値は多少変更しないと、腕がプルプルしちゃうことがあります。

PWM 4,240

両方の腕を下げるには、以下のようにします。

PWM 3,145:PWM 4,145

あとは、これらの命令を組み合わせてロボットを制御します。

ここまでが、前日の準備段階。これで、何となくロボット制御の最低限の知識を得られたので講座もバッチリ……のはず。

当日はキーボードからロボットを制御して、タイムアタックのレースを行います(というのを現場に行って知った)。

実際にコースを走らせてみると……30cmも走行しないうちに、キャタピラが外れてしまいました。う〜ん、こんなものなのか。

その後、実際のレースでもキャタピラが外れてしまう人が多発。車輪部分の間隔を調整すれば外れないみたいですが、それが分かったのは、講座終了直前でした。

IchigoJamを使ったロボット制御は簡単なので、単に走行するだけでなく腕を振るようにしたり、旗を持たせたり、いろいろ工夫する人もいました。

ロボットの講座は終わりましたが、実は組み立てたロボットの段ボール部分以外は持ち帰れないというオチが。

これは備品扱いになっているためで、実際にロボットを制御したい人はサイトから購入してください、とのこと。まあ、金額がやや高いので仕方ない面もあります。

はじめてのロボット制御講座だったので、何ともな部分も多々ありましたが、それなりにロボットレースもできてよかったのではないかと。にしても、ロボットをまっすぐに直進させるのも結構大変でした。

IchigoJamだと容量が1KBしかないのと、センサーがないので補正できません(IchigoLatteだと容量2KBなので工夫次第というのはあります)。

ロボット制御は簡単そうで難しいな、と思いました。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

IchigoLatte用にロボット制御ライブラリを作ってみました。しかし、ロボット制御は詳しくないので基本的な動作をサポートしている、というだけのシンプルなライブラリ(関数群)です。

http://www.openspc2.org/reibun/IchigoLatte/0.9.1/index.html#library8

話題のポケモンGOは配信されてすぐにプレイ。ベースがイングレスなので、ポケストップ=ポータル。写真もイングレスのデータを、そのまま流用。イングレスがシューティング系で、ポケモンGOはRPG系といった感じです。

妖怪ウオッチもキャラ変えれば同じようにできるし、ドラゴンクエストも同様の手法でゲームを実現できそうです。

ただ、いずれも都市部が圧倒的に有利なので田舎だと辛い。現在の位置ゲームは都市部有利なので、できれば田舎(地方)にも足を運ばせる位置ゲームの方がありがたい。

例えば、昔ナムコで出していたパックマンのように、全国の道路にあるドットを全部食べちゃうとか。ラリーX/スプラトゥーンなどのように、全国の道路を走って塗り潰すとか。

・パックマン
http://pacman.com/ja/

・ラリーX
https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%AA%E3%83%BCX

・スプラトゥーン
https://www.nintendo.co.jp/wiiu/agmj/

いずれは実際の地図でスプラトゥーンやるんじゃないかなあ、という気はしないでもないのですが。今のサーバー側のパワーでは無理がありそうです。

7/23日に長野県岡谷市で行われた機械学習のイベントにも参加しました(撮影部隊)。以下にまとめがありますので、興味のある方はどうぞ。

・GCPUG信州 第1回勉強会まとめ(2016/7/23)
http://togetter.com/li/1003876

・IchigoLatteを楽しもう
http://www.openspc2.org/reibun/IchigoLatte/0.9.1/

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Premiere Pro & Media Encoder自動化サンプル集
http://www.amazon.co.jp/dp/4802090471/

・JavaScriptによるデータビジュアライゼーション入門
http://www.amazon.co.jp/dp/4873117461/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・Adobe JavaScriptリファレンス
http://www.amazon.co.jp/dp/B00FZEK6J6/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■LIFE is 日々一歩(36)[Web]
Bootstrapの使い方をまとめてみた(3)

森 和恵
http://blog.dgcr.com/mt/dgcr/archives/20160725140100.html
───────────────────────────────────

こんにちは! 森和恵です。暑いですね。梅雨も明けてようやく夏本番ですね。この週末には、恒例のガレージキットのイベント“ワンダーフェスティバル”(通称“ワンフェス”)が開催されましたね。

アニメ好きなわたしは、自分の好きなキャラクターの“ねんどろいど”という可愛いフィギュアを集めています。まだ、13体ぐらいしか持っていないライトユーザーですけれど、この趣味がこうじて、一度はワンフェスに参加してみたいものだなぁ……と思い続けています。

夏・冬と開催されますが、毎年仕事の落ち着く時期とずれてしまって、まだ一度も参加したことはありません。開催されるたびに「行きたい」と言っているので、そろそろ“参加するする詐欺”になりそうです。

Gigazineさんが、リアルタイムで会場の様子を伝えてくれるので、その記事を読むのを楽しみにしています。今年もすでにたくさんのレポートがあがっていますよ。

なかでも今年欲しいなと思ったのが、“figma(フィグマ)”から発売が発表されたダライアスの“アイアンフォスル”。3画面の筐体でプレイしたダライアスのあの魚をお家にかざれるかもなんて……。楽しみですね。

【レトロなゲーセンのパックマン・ギャラクシアン・ギャラガの筐体を12分の1サイズでミニチュア化】
http://gigazine.net/news/20160724-mini-game-center-wf2016s/

さてさて。今回は、Bootstrapの3回目です。

前回は、<h1> や <p> など基本タグに付加されたスタイルを確認しました。Bootstrapを割り当てただけで、基本タグに下地となるデザインが付いていて便利でしたよね。

【Bootstrapの使い方をまとめてみた(2)】
http://blog.dgcr.com/mt/dgcr/archives/20160613140100.html

今回は、ボタンに付加するスタイルを見ていきます。以下のURLで、Bootstrap使用後のコードを見ながら、動作を確認してみてください。
http://r360studio.com/dgcr/bootstrap/step3.html

●ボタンスタイルの基本

<a>、<button>、<input> 要素のclass属性に「btn」を指定すると、ボタンのベーススタイルが適用されます。この設定は必須です。それに加え、ボタンの用途に合わせて、以下のオプションスタイルを適用します。

デフォルトのスタイル(白色) btn-default
主要・基本・初期値のスタイル(青色) btn-primary
成功時のスタイル(緑色) btn-success
情報のスタイル(水色) btn-info
注意時のスタイル(オレンジ色) btn-warning
警告時のスタイル(赤色) btn-danger
リンクのスタイル(デザインなし) btn-link

例えば、『警告ボタン』の場合は下記のように指定します。ボタンの背景が赤色になり目立つようになりました。

<a class="btn btn-danger" href="#">Button</a>

●ボタンのオプションスタイルは、“色指定”ではない!

オプション指定で注意しておきたいのが、ボタンの用途に合わせて選ぶことです。“ボタンを可愛くしたくて赤色にデコレーションしたいから”という理由で、警告時のスタイルを選んではいけません。意図しない意味がボタンについてしまうからです。

Bootstrapのデザインを好きなように書き換えたい場合は、独自のクラススタイルを用いて指定します。

.btn-mystyle{
color:#FFFFFF;
background-color:#FA56FF;
}

という具合にクラスを作成し、

<a class="btn btn-mystyle" href="#">Mystyle Button</a>

と、Bootstrapのオプションスタイルの代わりに指定します。

ボタンだけではなく、Bootstrapのデザインを独自にカスタマイズする方法については、いろいろと手順や手法があり、また回を改めてお話する予定です。

●ボタンのサイズオプション

さて、次はサイズを変更するオプションスタイルです。

大きい btn-lg
小さい btn-sm
特別に小さい btn-xs

例えば、『特別に小さい(Extra Small)』は下記のように指定します。ボタンが標準のサイズよりもかなり小さいボタンになりました。

<a class="btn btn-default btn-xs" href="#">Extra Small Button</a>

親要素にあわせて幅100%に固定する(ブロック指定する)には、btn-block スタイルを付加します。

例えば、<p>要素を親にして幅100%に固定するには、下記のように指定します。親要素の<p>に指定したスタイルに合わせてボタンサイズも変化します。

<p style="width:50%;"><a class="btn btn-default btn-block" href="#">Button</a></p>

●ボタンの状態を表すスタイル

その他にも、ボタン操作の状態を表すスタイルが準備されています。

アクティブスタイル(押した状態) active
ディセイブルスタイル(無効状態) disabled

例えば、『押せないボタン』を指定する場合は、下記のように指定します。ネットショップなどで在庫切れでいまは購入をストップしたい時のスタイルに使うとよいですね。

<a class="btn btn-default disabled" href="#">Disabled Button</a>

今回は、ボタンのスタイルと使い方を説明してきました。ほぼ全部紹介していますが、詳しい説明を確認したい場合は、下記の公式サイトページに掲載されていますので参考にしてください。

【Bootstrap Buttons】
http://getbootstrap.com/css/#buttons

……というわけで、今回はこの辺で。

さて、次回も基本タグの発展系で、フォームに付加されるスタイルを確認していきます。まとめてどさっと行けそうかなと思った、基本タグのスタイルですが、オプションを深堀りすると思ったより内容が多そうなので、ゆっくり進みますね。

ではでは、また!(^^)


【森和恵 r360studio 〜 Web系インストラクター 〜】
site: http://r360studio.com
mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio

web系の担当講座、8・9月分を好評受付中です。まだ発表は先ですが、9月30日に恒例の秋の無料セミナーを実施予定です。発表は、8月3日! すぐ満席になるので、お見逃しなく。
http://r360studio.com/seminar/


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(07/25)

●金田一秀穂「日本語大好き キンダイチ先生、言葉の達人に会いに行く」を読んだ(文藝春秋、2016)。谷川俊太郎、安野光雅、三谷幸喜、内舘牧子、桂文枝、出口汪ら13人の言葉の達人に言語学者が会いにいくのだから、インタビューではなく対話である。金田一先生、テレビのクイズ番組などにもよく出演しているそうだが「成績はあまりよくない。息子の央紀のほうがましだ」と、やたら漢字や言葉にうるさいクイズ脳の妻は辛辣。やりなおしが(たぶん)きかないテレビと違って、本にするための対談なら安心、後加工は充分に可能である。学者らしからぬユルさを見せるキンダイチ先生、なかなかの好印象だ。

13人すべての対話は軽快に進む、ように整理されている。これは編集者の腕だろう。そのうちの一人、英文学者・外山滋比古との会話が興味深かった。この人の30年前の「思考の整理学」は読んだことはあるが、内容は忘れた。いまでは「知識は必要ない」と誤読されるようになっているそうだ。対談時は米寿超のはずだが、少しも頭脳に衰えがないようにみえる。対談のタイトルは「早期英語教育より母親の言葉」だ。早期教育だといって小学校3、4年生から英語を教えるというのは非常にまずい。それ以前に、最初に自分の子供にどうやって言葉を教えるかが、子供の一生を決定しかねない重大な問題だという。

言葉が曲がりなりに出来るのはだいたい生後40か月以降だ。それまでに、その子の言葉に対する理解や感覚、文法などの基本構造が固まる。外山先生はそれを「絶対語感」と呼ぶ。それは親の職業や住んでいる地域・方言などに規定される。つまり、周囲の話し言葉によって、美しく正しい絶対語感にもなり、そうでないものにもなる。生後40か月が重要である。赤ん坊は両親の言葉を見よう見まねで覚えていく。親が子供に充分な言葉を伝えられないと、子供は感じたことをうまく言葉にできないまま育ってしまう。母親が心のこもった言葉を使うのが一番いい。だが、このことを問題にする言語学者は少ない。

「敬語とは相手をなるべく近づけない方法だと思うのです。人間同士が近づくと摩擦が生じ衝突する危険も高まる。そうした衝突を避ける潤滑油として、敬語が重宝されてきたのです。敬語には尊敬語、謙譲語、丁寧語がありますが、相手を持ち上げるだけでなく、自分を低めることで、相手を遠ざける」「敬語というのは、相手に対する思いやりであり、自分を守るに適した、最も簡単で、実はかなり功利的な方法なのです。必ずしも相手を尊敬しているわけではない。敬語は人のためにあるのではなく、半分以上は自分のためにあるのです」という説明には納得。常識とかマナーとか考えていたわたしは無知だった。 (柴田)

金田一秀穂「日本語大好き キンダイチ先生、言葉の達人に会いに行く」
http://www.amazon.co.jp/exec/obidos/ASIN/4163904697/dgcrcom-22/


●ポケモンGO。配信情報を得て、アプリをダウンロード。Ingress用のGmailで登録したら、ゲームボーイの時と同じく三匹のポケモンが出てきてチュートリアルスタート。アカウント名登録がしたいだけなんだが、それが終わらないとできないらしい。

一匹をゲットするように促されるが、事前情報でチュートリアルの三匹を無視し続けていたらピカチュウが出てくると言うので、試してみることにした。

ほっとくと、まわりに三匹は居続ける。歩かないと引き離せないんだろうと、夕方からの買物予定を変更し、昼間に出かけた。

日差しが強い。画面が良く見えない。Ingressを始めた頃も、予定を変更してまで出かけたなぁと遠い目。歩いても歩いてもついてくるポケモンたち。引き離せないのではと思った頃に消えてくれた。

それを繰り返すこと3〜4回。700mぐらい歩いただろうか。最初の目的地のそばに三匹が出てきた後、ピカチュウが出現。喜んでゲット。 (hammer.mule)