Blogger(blogspot)にTwitterとFacebookのSNS共有ボタンをオリジナルで表示する方法（自力で解決！）

Author: Alice Strawberry

BloggerにtwitterやFacebookなどSNS共有ボタンを表示する方法

これまでBloggerの旧テンプレートには以下のような小さなソーシャルブックマークボタンが標準で設置されていました。しかし今度の2017年の新テンプレートではソーシャルボタンはファーストビューから消えてしまいました。
Bloggerのソーシャルブックマークボタン
Bloggerのソーシャルブックマークボタン（旧デザイン、右は筆者が付け足したもの）

旧デザインのソーシャルブックマーク（共有）ボタンは次の種類があります。
  • メールでURLを送信して共有
  • Bloggerでリンクして共有
  • twitter共有
  • facebookのいいね！
  • PinterestのPinするボタン
  • Google Plusの共有ボタン
この組み合わせにどんな意図があるのか不明ですが、これらのボタンは小さくて視認性が悪く、99.9%以上の確率で誰も共有してくれないことが欠点でした。

このようなSNSボタンは無駄ですのでデザインから排してしまったほうがよいと考えたのかわかりませんが2017年の新テンプレートではSNSボタンは見当たらなくなりましたので世間とのつながりを重要視する場合は追加してやる必要があります。

どのようにすればBloggerにSNS共有ボタンを表示できるのか、まずは私の旧ブログのテンプレートを解析して新たなソーシャルボタンとともに目立つようにデザインしてみたいと思います。

SNS(ex. Facebook)の仕様を確認する

まずはフェイスブック等のSNSのデベロッパー向けサイトに行き共有するための仕様を確認します。今回は例としてフェイスブックで試してみましょう。
Facebook SNSコード取得画面1

Facebookのデベロッパーサイトに行くと自分のウェブページのURL入力欄があってコードを取得すると次のようになります。

Facebook SNSコード取得画面2
Facebookのコードを見てみると「<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" ></div>」どうやらこの辺りを自分のページのURLに変更するだけでよいことがわかります。

Blogger Facebookのいいね！ボタンの基本仕様

ではBloggerの個別のSNS共有用ののURLをどのようにして表示させるかスクリプトを見ていきましょう。Bloggerテンプレートのhtml編集画面を見ると、個別のURLの書き方は次のようになっています。

expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;'
つまり、この文字列を応用してSNSボタンを作成すればよいのです。ちなみに筆者が自力で作成したFacebookの共有ボタンの全容は以下の通りになります。
<b:if cond='data:top.showFacebookButton'>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
</b:if>
いいね！ボタンを押すと新しいウィンドウが表示されFacebookへのログイン画面が表示される仕組みになっています。このほかに<body>内にも決められたスクリプトをコピペします。Bloggerの場合既にFacebookが仕様に組み込まれていますのでわかる人はこれを利用します。つまり、ここのCSSのクラスを自分のデザインに変更するだけでよいです。

筆者設置のFacebookの共有ボタンのテキストリンク

私のカスタマイズしたFacebookのいいね！ボタンは次の通りです。

<div class='facebook'>
<a expr:href='&quot;https://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;target=facebook&quot;' title='Facebook' target='blank_'><span class=''>Facebookで共有する</span></a></div>

Facebookで取得したスクリプトをbody内に貼り付けます。
Bloggerの場合既にFacebookが仕様に組み込まれていますのでどちらのソースを使ってもいいね！ボタンを設置することが可能です。

モバイルページでFacebookアプリを立ち上げるリンクをBloggerに実装する方法

実は上記のリンクはPC版ともいえ新しいウィンドウが立ち上がりそこにFacebookのログイン画面が表示されます。いちいちログインするのはスマホでは無理ですからアプリが立ち上がるようにしましょう。いろいろ調べたところ、次のサイトが役に立ちましたので紹介したいと思います。この方法はBlogger以外のブログでも応用可能です。
htmlからFacebookのアプリを立ち上げる方法は意外と単純なんですよ！

冒頭のhttps://をfb.//に変えてやればいいのです。Blogger用に私が考えたFacebookアプリを立ち上げるリンク方法は次の通りになりました。

<a expr:href='&quot;fb://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;target=facebook&quot;' expr:title='data:top.shareToFacebookMsg' target='blank_'><span class=''>Facebook</span></a>
これでBloggerのブログページからモバイル版Facebookアプリが立ち上がるリンクを作ることができました。

titleは単にtitle='Facebookで共有'としてもよいですが、日本語以外の人もいますからBloggerのタグを付けたほうがよいでしょう。

SNS共有ボタンをデザインする

SNSの共有リンクを設置する前に少しだけデザインについて考えてみましょう。まず最低限必要なのがソーシャルメディアのイメージカラーをRGBで取得しておくことです。SNSの基本色はグラフィックソフトのカラーピッカーなどから取得可能です。

それで、どんなボタンを作るかといいますと、シンプルに四角のパネルボタンを作ってみたいと思います。

まずはSampleというクラスを作ってみますね。
.sample{
 margin:5px;
 padding:12px;
 background-color:#E50086;
 position:relative;
 width:150px;
 height:40px;
}

.sample a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:#FFFFFF;
}
CSSは大体こんなものでしょう。ボックス（div）全体をボタンにすることができました。

共有ボタンの作り方は最終回で詳しく説明していますので、そちらを参考にしてください。


twitterのシェアリンクを作る方法

次はSNSのリンクの作り方です。

SNSに何かURLを付け足す指示がある場合は「'data:post.sharePostUrl'」をコピペして利用します。

twitterの自前仕様を見てみると・・・
<a href="http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]" target="_blank">

参考サイト様：http://blog.yuhiisk.com/archive/2015/10/12/twitter-share.html#i-2
となっています。

この仕様を見てみると、Bloggerに自動挿入できないタグにはハッシュタグと言うものがあります。ユーザー名はちょっと今の自分には意味がわからないので消しておきましょう。Bloggerで使えそうなところは「URL」と「テキスト」あたりです。

この「URL」のところに先ほどのBloggerの記事共有用のテキストをコピペしてみましょう。ついでに「テキスト」のところにはBloggerの「記事タイトル」のタグを挿入してみましょう。
<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.sharePostUrl + &quot;&amp;text=&quot; + data:post.title'>twitterでシェアする！</a>
こんな感じですね。

実はこの1文をひねり出すのに小一時間悩んで頭がボンバーとなり脱糞してました（笑）

&を特殊文字に変換することや「+」で文字列をつなぎ合わせることに苦労しました。

ここまででFacebookとTwitterボタンのBloggerへの設置はわかりましたね。はぁ。疲れた。ここまで執筆するのに4時間くらいかかってます。次は気を取り直して人気のFeedlyのBloggerへの設置ボタンを作りたいと思います。と思ったけどもう脳みそがフル回転したのでFeedlyのシェアボタンの説明は次回にしたいと思います。きっと数学やプログラミングの才能がある人はこういった時に緊張して頭が爆発せずに冷静でいられるのでしょうね（笑）

このスクリプトを設置する場合は絶対シェアしてくださいね！じゃないと苦労が報われません。このページをシェアしない人？閑古鳥鳴いちゃえ！

関連リンク

アーカイブ（ここをタップすると開きます）

このブログの人気の投稿

硬い木、強い樹木のリスト（日本・世界）

Author: Alice Strawberry
イメージ
硬い樹木の一覧 木を選ぶうえで重要なのが耐久性と硬さです。あまりに柔らかい木はすぐに白アリの餌となってしまいます。ここでは硬い木とその特徴を調べて簡単にリストアップしてみました。一般で言われているような杉やヒノキのような柔らかい木材と比較して硬い木という意味ではなく、硬度という客観指標に基づいた本当に硬い木の一覧です。 目次 硬い木 - 針葉樹 硬い木 - 広葉樹 硬い木 - 海外の木 シロアリに強い木 弱い木 針葉樹 カヤ 硬さ-硬質 耐腐食性-強靭 耐摩耗性-強靭 カヤは日本の関東以西に分布する針葉樹です。カヤはイチイ科カヤ属の常緑針葉樹です。カヤは日本国内の屋久島～福島県あたりに生息しています。カヤの木は生育に時間がかかるため建材としてはほとんど流通していません。カヤの実は食用とされます。 カラマツ 硬さ-硬質 耐腐食性-強い 耐摩耗性-強い カラマツは松科カラマツ属の落葉針葉樹です。カラマツは日本の固有種で中部地方～東北地方の高地に生息しています。カラマツは日本の針葉樹の中で唯一落葉する高木です。カラマツの材質は硬いですが、割れや狂いが生じやすくそのままでは建築に使いづらい板材です。 広葉樹 モクマオウ 比重0.95 用途：工芸品 極めて硬い。 リュウキュウコクタン 比重0.74～1.21※ 用途：小物 モンゾより軟らかい。 イスノキ 比重0.9～1 用途：木刀・床柱・三味線の棹など。 硬くて加工しづらい。 イスノキを使った製品一覧（楽天市場） イスノキは苗木のほか、木刀があります。 アカガシ 比重0.80～1.05 用途：道具類・山車の車輪など。 イスノキに次いで硬い。 アカガシを使った製品一覧（楽天市場） アカガシは苗木のほか、木刀や箸があります。 外国の木 海外の木の比重について。ちなみにラワンの比重は0.4程度です。 アオコクタン タイ産 比重1.15 用途：仏壇・箸など。 アフリカンブラックウッド 東アフリカ産 比重1.2 用途：楽器など。 アンジェリンラジェッタ ガイアナ産 比重0.99～1.03 ...
続きを読む

Ubuntu初回起動時にWi-Fiが繋がらないというより選択肢が出てこない問題への対処法

Author: Alice Strawberry
イメージ
UbuntuでWi-Fi（無線LAN）に接続する方法 このページは初めてUbuntu（ubuntu-ja-16.04-desktop-amd64）をインストールした直後にネットワークにWi-Fiの選択肢が出ない問題への解決方法を記載しています。Wi-Fiの選択肢が出ず無線LANに接続できない問題に対する回答は一つです。ズバリあなたがお使いのUbuntuに無線LANドライバがインストールされていません。私も初めてUbuntuをインストールして無線LANに接続できなかったときは本当に困りました。わざわざホコリの被った有線LANをパソコンに接続して各種のアップデートやインストールを行うはめになりました。 参考サイト: Ubuntu16.04 でWi-fiが使えない時はまずアップグレードから Wi-Fiドライバのインストール 参考サイト様から学んだ手順によると、PCを有線LANに接続してオンラインの状態でUbuntuのアップデートを行います。手順は次の通りです。 Ubuntuの端末を開きます。 lspci -nnk | grep 0280 -A2　または　sudo lshw -class network　と入力してEnterを押します。 無線lanのハードウェアが認識されていたら次に進みます。 sudo apt update; sudo apt upgrade;　と入力してEnterを押します。 パスワードを入力してアップデートをインストールします。 PCを再起動してネットワークにWi-Fiが出ていたら設定して完了です。 このように無線という選択肢が出てきたら大丈夫です。アクセスポイントの名前とパスワードを入力して設定を済ませます。しばらくすると自動的にWi-Fiに接続できるようになりました。 ちょっとだけLinuxにさわってみたい人のための Bash on Ubuntu on Windows入門 Amazon 楽天市場 Kindle版 こちらのUbuntuの解説本もおすすめです。
続きを読む

【解決】AcerのAspireノートPCでBiosにF2で入る方法が完璧にわかった！

Author: Alice Strawberry
イメージ
AcerのパソコンはBiosに入りづらく設定項目が少ない！ 私はAcerのラップトップPCを2台連続で使っています。1台目のノートPCはCorei5でも熱とファンの騒音がひどくてホコリが内部に蓄積して清掃してもすぐにゴミが溜まるので2年ほどで壊れてしまいました。次に買ったAcerは今使っているノートパソコンです。これは当たりのPCで静音タイプなのでファンも回転しませんし、ホコリも内部に溜まりません。発熱が少ない、つまり消費電力が低い32W程度なのでバッテリーのへたりも前の機種と比べたら天と地くらいの差がありました。 次にノートPC買うなら絶対に省エネタイプにしようと思うこの頃です。 F2でBiosに入れない！ さて、このAcerのAspireシリーズ。Shiftキーを押しながら再起動を選択してもBiosが起動しません。F2（ファンクションキー）を押しっぱなしで電源ボタンを押してもBiosに入れません。F10を押したらWindows10の修復画面が出たものの、やはりBiosに入れません。F12を押すと起動する記憶装置の選択画面が出ますが、他の設定画面には行けません。 Biosに確実に入れる方法がわかった！ ネットの書き込みなどを参照しても、なかなかこのパソコンでBiosに入ることはできませんでした。というか無理でした。そして何時間か経過して脳みそも爆発済みになったある時、ある書き込みの馬鹿だと思う方法を試してみたら、本当にBiosに入れました。まるでテレビゲームみたいな操作方法にほんとうに呆れました。 AcerのBiosに入りたければF2を連打しろ！ まさにこの方法ですｗ どのタイミングでF2を認識するのかわからないのです。F2を押しっぱなしでも認識しないので、ある時点で一瞬だけF2を認識する仕様となっているようです。 な～んだ、簡単！ 嘘だと思って試してみてください！ 必ずBiosに入れますよｗ
続きを読む

【挑戦】USBメモリー又はSDカードにUbuntuをインストールする方法

Author: Alice Strawberry
イメージ
SDXCカードにLinuxのUbuntuをインストール/起動してみた ある日のこと、テレビの録画用HDDを丸ごとコピーするためにUbuntuというOSが必要であることがわかりました。UbuntuというとLinuxベースのOS（オペレーションシステム）です。フリーで使えるうえに、さまざまなアプリが揃っているので前々から使ってみたいと思っていました。ではさっそくUbuntuのインストールにレッツ&トライ！今回の解説にWindows10を使っています。 USBメモリまたはSDカード、DVDを用意 まずはUbuntuを起動するためには記憶装置が必要です。インストールに使える記憶装置はUSBメモリ、HDD/SSD、そしてDVDです。そして別途インストールDVDを作成するためにブランク（空の）DVDが1枚必要です（DVDにブートする場合はDVDドライブは外付けも含め2台必要です）。 SanDisk Cruzer Glide USB3.0 SDCZ600-064G Amazon 他のUSB3.0メモリを見てみる→ 尚、本題とは関係ありませんがDVD-R、私が持ってるFujifilmのDVDはパックが黄ばんでずいぶんと古いのですが、まあまあ元気でした（笑） 手順1. Ubuntuをダウンロードしてくる Ubuntuを配布しているサイ ト に行き、Ubuntuをダウンロードして来ます。 手順2. ISOイメージをDVDに焼く 好みのバージョンのUbuntuをダウンロードしてきたらアイコンを右クリックしてディスクイメージの書き込みを行います。このときDVDをトレイにセットしておきます。 ダウンロードしたファイルを 右クリック DVDの入ったドライブ を選択して 書き込み(B) をクリックします。 DVDにISOイメージを書き込んでいます。 UbuntuのインストールDVDが完成しました。 手順3. UbuntuをUSBメモリーまたはSDカードへインストール インストールDVDが完成したら、いったんパソコン（Windows）をシャットダウンします。そして起動時にF12を選択して起動時の媒体に先ほどのDVDを選択します。案内に従いインストールをはじめます。 ...
続きを読む

【解決】ランダムなハードウェアアドレスをオンにすると家庭用のwifiに繋がらなくなる（Windows10の話）

Author: Alice Strawberry
イメージ
ランダムなハードウェアアドレスとwifiのネット接続について まさに今さっき、パソコンのメンテナンスをしたついでにWindows10のランダムなハードウェアアドレスをオンにした直後のことでした。いきなりWiFiに接続できなくなりました。しかもメインのノートパソコンだったので大変ショックでした！すぐにiPadを使い、動作を確かめてみるとiPadは普通にネットに繋がりました。これは間違いなくランダムなハードウェアアドレスを使用する機能をオンにしたせいだと直感しました！ ガビーン！ネットに繋がらない！ Windows10も知らない間に余計なセキュリティー機能が勝手にオンになっていたりして、いろいろオフにしまくっていたので、プライベートネットワークがパブリックネットワークになっていたり、この際だからついでにパソコンの設定をセキュアなものに変更しました。 ランダムなハードウェアアドレスを使ったことで自宅のwifiに接続できないなら、再びその機能をオフにしてやれば無事接続することができました。 ハードウェアアドレスはおそらくMACアドレスだと思います。ルーターのほうでMACアドレスを指定して接続しているとランダムにしたら接続できなくなります。 実のところランダムなハードウェアアドレスとは何のことか私もさっぱりわかりません。でももとのアドレスは残っているみたいなので安心しました。 本来のランダムなハードウェアアドレスの使い方 Microsoftのサポートページを見てみると、ランダムなハードウェアアドレスの使い方は次のような場合に用いるのだと思います。 信頼できないwifi（ネットワーク）に接続する場合 つまり、自宅のwifiに接続している場合は、あまり深刻な問題は出にくいと思いますが、不特定多数の人が接続するネットワークに繋いだらハードウェアアドレスを目印にコンピュータを追跡（検索）されるおそれがあるのでは？ということなんじゃないかと思います（違ってたらすみません）。 ランダム ハードウェア アドレスを使う理由:　 Wi-Fi に接続していないとき、接続しやすくするために、その地域内で Wi-Fi ネットワークを探すための信号が PC から送信されます。 この信号には、デバイスを表す一意の物理ハードウ...
続きを読む

Package Name（パッケージ名）の決め方 - Android Studio プログラミング

Author: Alice Strawberry
Package Name Android Studioを使い始めて2日が経過しました。参考ウェブサイトを参考に、アプリを作ろうとしたらどうもうまくいきません。あれこれ調べているうちに、また1からやり直そうとしてあることに気が付きました。それはPackage Nameを最初に決める時に、私は何かやらかしたのではないかということです。プロの解説を読んでみると、 Package Nameは一度ストアに公開すると変更できません 。まったく知らなかったので私はClassファイルを書いている時に「 com.example.myapplication 」という デフォルト の設定をそのまま使っていました。パソコン内で開発している間は、いくらでもパッケージ名を変えられます。 詳細は開発者向け公式サイト「 アプリケーションIDの設定（外部リンク） 」を参照ください。 初めてのAndroid Studio、まず公開するというところまではいきませんが、私は適当に名前を決めて「com.example.list」と適当に決めておりましたが、それでもうまくアプリが作れませんでした。 Package Name（パッケージ名）は何がいいか？ 「com.example.myapplication」というデフォルトの名前から、パッケージ名の決め方は次のようになると思います。「 会社の名前.作者の名前.アプリの名前 」です。例えば、私の場合、ドメインの名前が「digiota」で、筆者の名前が「Alice」、作りたいアプリの名前が「メモ帳」だとしたら、パッケージ名は「digiota.alice.memopad」という風に決めることができます。 Dot（点）はいくつまで入れられるのか？ Package Nameの「.」の数は、仕様だと思うので、最低2個に決まっているようです。つまり、3個以上のセグメント（名前）を入れないといけません。 Package Nameにどの文字を入れられるのか？ パッケージ名は、最低2文字でなければいけません。そして頭文字はアルファベットである必要があります。2文字目以降に数字と、ハイフンまたはアンダースコアを入れられます。 Package Nameは変更できるのか？ googleの公式サイトの開発者向けの説明によると、一度決めたパッ...
続きを読む

デロンギのオイルヒーターを使ってみた！風呂場のヒートショックの予防策

Author: Alice Strawberry
イメージ
デロンギのオイルヒーターは脱衣所におすすめ！ 冬になり、寒くなってきたのでデロンギのオイルヒーターを買いました。オイルヒーターとは、オイルを熱することで金属の板に熱を伝えて放熱させ、輻射熱で部屋を暖める家電と私は理解しています。オイルヒーターはシンプルな仕組みで安全と言われています（が本当に安全とは信じてません）ので狭い場所の暖房に適した暖房器具です。 目次 オイルヒーターを買ったよ！ 脱衣所での使い方 オイルヒータを使用した感想 消費電力 後日談 オイルヒーター込みの電気代 オイルヒーターが温まらない原因 オイルヒーターを買いに行きました 家電の特売日があって、たまたまデロンギのオイルヒーターが1万円程度でありましたので開店時に近い時間にオイルヒーターを買いに行きました。このとき既にオイルヒーターは最後の1台と、本当に売り切れ間近だったようです。型落ち製品ですら意外と人気の高い家電なんだとわかりました。 オイルヒーターを上から見た写真です。持ち手がありません。持つ場所は左側のプラスチック部分のデロンギのロゴの下にある窪みだけです。 スイッチ部分の写真です。二つのスイッチがあり、両方「入」にして強（1200W）、左側のみを「入」にしたら中（700W）、右側のスイッチは弱（500W）となります。弱ではすぐには温まらないので最初は二つのスイッチをオンにして強で運転しました。30分ほどしたら0.5畳のどの風呂場の脱衣所の温度が上がってきました。 タイマーのダイヤルです。右にしか回せません。行きすぎたら一周しなければいけないようです。 シールが貼ってありました。空気キレイ、乾燥対策、やけど心配なし、手間いらず。 風呂場の脱衣所の室温を測定しました。測定前は室温は14度ほどです。家族全員が風呂に入った後の脱衣所の室温は22度台でポカポカというほどではないにしても、身震いしない程度の温かさがありました。 デロンギオイルヒーター Amazon 楽天市場 デロンギのオイルヒーターを0.5畳の風呂場の脱衣所で使用しました。スイッチをオンにして最大出力で30分ほど温めるとフィンからの輻射熱で室温が高まってきました。実のところ、浴室暖房乾燥...
続きを読む

時間をかけて作ったページがSearch Consoleのインデックスカバレッジで除外されている件について

Author: Alice Strawberry
イメージ
Googleのクローラーがブログの半数近くのページを除外していることが判明！ショック！ 私はこのブログをはじめて、前の他のブログと統合して総合の運営年数では3年目くらいになると思うのですが、このブログに引っ越してこのテンプレートを使ってからアクセスがやたら少ないことが問題でした。原因を探るべくSearch Consoleのインデックスカバレッジを見てみると、なんと多くの記事がインデックスに登録されていないことが判りました。 クロール済み - インデックス未登録 というところでインデックスされていないことが示されているのですが、これは事実なのでしょうか？ クロール済み - インデックス未登録 の内訳を見てみると手間暇かかったページもインデックスされていません。/search/という検索結果や/年/月/といったアーカイブの検索結果画面が除外されるのは当然として、さすがに何時間もかかって作ったページがインデックスされていないことはショックでした。 先日はrobots.txtがブログのシステムで勝手にクロールしないことになっていて（表面上はクロールする設定になっていたので気づかなかった）、訪問者数や広告収入面で不利益を被っていました。明らかに原因はBloggerというブログサービスにありました。 別にどうこう言うつもりはないのですが、真面目に時間をかけて撮影したり写真を加工したりしているわけですから、そのページが検索結果にインデックスされていないということは大問題です。再クロールを申請してみましたが、本当に大丈夫なのでしょうか。 しかし旧といいますか、前のタイプのSearch Consoleにはインデックスされていないページの存在は伝えられていません。 新しいSearch Consoleが正しいのか？従来型のSearch Consoleが正しいのか混乱してしまいます。 search console インデックスカバレッジ 送信されたURLにnoindexタグが追加されています そもそも私のブログが閑古鳥泣いていた原因はこれでした。「search console インデックスカバレッジ 送信されたURLにnoindexタグが追加されています」というメッセージとともに1月2月のグラフにnoindexでインデックスされなかったペー...
続きを読む

Android Studio 3.3でメモ帳を作ってみた！初めてのプログラミング

Author: Alice Strawberry
イメージ
Android Studio 3.3 でメモ帳アプリを作る 前回は「 Android Studioをインストール 」しました。今回は参考サイト「 [Android Studio] メモ帳を作ろう！（その１）[Java] 」をお手本にメモ帳を作ってみたいと思います。ちなみに、私は自力でプログラムを作れない、まったくの初心者です！ 「作ったアプリってどうやって自分のスマホで使うの？」 そこまでは、わかりません。 新規プロジェクトの作成 とりあえず、お手本のページの通りに新規プロジェクトを作ってみます。 Start a new Android Studio projectをクリックしました。 Choose your projectという画面が出て来ました。 出て来る中身は英語なんですが、私は英語の勉強中なので、ソフトウェアの日本語化は行いません。アメリカでアプリを売ることも考えているので英語にしておこうかと思います。 いったんデフォルトの「My Application」にしておき「Finish」をクリックしました。 ワークスペースが表示されました。 よくわかりませんが、新規プロジェクトのフォルダ―に「 MainActivity 」というファイルと「 AndroidManifest.xml 」というファイルが出て来ました。 新規Activityの作成 ここで、MainActivityを右クリックして「New→Activity→ Empty Activity 」をクリックして新規に空のアクティビティーを作ります。 適当に名前を付けて「Finish」を押します。参考サイト様によると、このActivityは「メモの新規作成」をするためのActivityだそうです。 私には、この段階では深い意味などわかっておりませんので、指示通りにするとMainActivityの下に新たに「任意の名前のActivity」が追加されました。 ActivityをリネームするにはActibityのファイルを右クリックして「Factor→Rename」から名前を変えられます。 途中経過 すべてのソースをコピーして利用させてもらったんですが、エラー...
続きを読む

BEAU SOLEIL（ボーソレイユ）スイスの名門寄宿学校

Author: Alice Strawberry
イメージ
BEAU SOLEIL COllEGE ALPIN INTERNATIONAL（ボー・ソレイユ） 世界の金持ちの子どもたち（王室や経営者など富裕層の子ども）が通う学校がスイスにあります。その寄宿学校の名前はボー・ソレイユ（美しい太陽）。College Alpin Beau Soleil（コレージュ・ボー・ソレイユ）は100年以上の歴史を誇ります。一週間のはじまり（月曜日）は学校長のケビン・フォイル氏の英語とフランス語の朝礼から始まります。学校長のケビン・フォイル氏は生徒たちに礼儀正しくすることが重要であると説きます。「礼儀は法より尊い。礼節を知る人は周囲から歓迎されます」と。生徒の服装はジャケットとネクタイ、ズボンまたはスカートと黒いストッキング。足元は黒と決められています。全校生徒は240人。王室の子どもたちや富豪の子どもたちが通っています。 BEAU SOLEIL COllEGE ALPIN INTERNATIONAL（ボー・ソレイユ） 写真はwikipediaから転載しました ※BS3（プレミアム）で放送された内容から有用な部分について一部メモを取りました。この番組は NHKオンデマンド で視聴できます。 少人数で考えさせる授業 生徒が教室に入る時はスマートフォン（セルフォーン）を先生に預けます。11歳から13歳が学ぶ科学の授業では教科書を使いません。低学年のカリキュラムには五つのテーマがあります。これらのテーマに基づいてあらゆる授業が行われます。 Adaption（適応力）：語学、数学、科学、地歴、芸術、体育 Discoery（発見）：語学、数学、科学、地歴、芸術、体育 Risk（リスク）：語学、数学、科学、地歴、芸術、体育 Respect（敬意）：語学、数学、科学、地歴、芸術、体育 Traditions（伝統）：語学、数学、科学、地歴、芸術、体育 敬意というテーマの科学の授業では自分の体への敬意について考えます。先生が質問を投げかけ子どもたちは自分をいたわる方法について考えます。 知識を詰め込むのではなく、自分で考え問題を解決する力を身に着けるため です。子どもたちは健康な食事、8時間寝る事、など自分で考えて答えを見つけていきます。子どもたちはスナック菓子を火であぶり水を温め水...
続きを読む