Facebookのいいねボタンを設置する方法

こんばんは、こうちゃんです。

おそらくサイト作りをする方には大切な情報、
サイト上にFacebookのいいねボタンを設置する方法、です。

昨今SNSメディアの流行はすごいものがあり、個人のサイト・ブログを駆逐せんばかりの勢いです。
となると、必然的に個人のサイトなども生き残りをかけて、ある程度SNSなどとからめて流行らせていく必要もありまして、そんな技術のひとつに、サイトの中に、そのサイトへのSNSでの投票を意味する、いいねを送れるようにする、というものです。
その代表例が近年大流行のFacebookのいいねでして、ここではそれを可能にする、
ボタンの設置の技術的な解説を行います。

Facebookイイねボタン作成方法

必要なもの
facebookアカウント
facebookデベロッパーアカウント
facebookアプリID
（古いサイトだと誰でも作れるように書いてあるが、最近のバージョンは不特定多数が使えないように登録時にfacebookアプリIDが必要なように）

１．facebookにログイン

２．
https://developers.facebook.com/docs/plugins/like-button/?locale=ja_JP
にアクセス、まず右上メニュー、マイアプリから、新しいアプリを作成、を選択

３．この時点でデベロッパーアカウントを持ってないと、登録画面に、
facebookを持ってて、あとはいくつか規約に同意するだけでデベロッパーアカウント登録はすぐにできる

４．その後、新しいアプリ作成続行、
アプリ名を適当に、イイネAPP、とかつけて登録する

５．画面中央の、いいねボタン構成ツールで必要情報、対象URLや、幅、タイプなどを選択してコードを取得ボタン押下
ボタンのタイプは、
standard　ボタンが表示され、横に文字で〇人がいいねしました　の文字
box_count　いいねボタンの上にいいねされた数表示
button_count　いいねボタンの右にいいねされた数表示
button　シンプルにいいねボタンだけ表示

６．画面に、プログラム用コードと、iframe用があるので、iframe用タブを押して、アプリIDを選択、のところで先ほど登録したアプリIDを選択して、下のコードをコピーして使う

７．コードでは対象URLが固定で決まってしまうのでサイトの中で使う際には、サイトのURLなどに合わせて変わるように変数等で動的に割り当て

これで、自身のサイトなどのページ中にいいねボタンを埋め込むことが可能になります。
よろしければ参考にしてぜひ埋め込みチャレンジしてみてください。

こうちゃん

スマホ向けのファビコン設定の方法

こんばんは、こうちゃんです。

今回はサイト作りの際に見栄えに役立つ、
ファビコン（favicon）の情報紹介です

ファビコンとは、元々パソコンのブラウザ上でブラウザ上部のタブに表示されるアイコン画像のことで、ブックマークした時などにも表示されます。
こちら、スマホでも、仕様は異なりますが、
ホーム画面にお気に入りでショートカットを登録した際などにはスマホ向けファビコンが表示されることとなります。
ファビコンは通常のWebサイトとは別に、スマホ向けの指定をすることができます。

画像は、PC向けですと、.icoの拡張子で指定した画像ファイルになりますが、
スマホ用でしたら、.pngのファイルで用意することになります。
そして、今のメジャーなスマホ用OSですと、iPhone、Androidがありますが、
それぞれに対して、ファビコンの指定は以下のようなタグをhead要素内に記載する方式になります。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="android-touch-icon.png" sizes="192x192">

記載はこのようなタグを書き、画像は参照できれば大丈夫ですので、
href以降のパスは好きなようにサイト内に配置して構いません。

このようにすれば、それぞれのスマホでお気に入りした時に、
指定の画像がアイコンとして表示されます。
ブラウザのタブ表示やブックマーク時など、ファビコンが目に触れる機会は意外と多いものですので、各種設定やっておくとよいです。




こうちゃん

新時代の画像規格webp

こんばんは、こうちゃんです。

せっかくの技術系のITエンジニアでマニアックな研究オタクでもあるので、
ちょっと最近出てきたファイルの種類でひとつご紹介。

webpファイル

こちら、googleが提唱する新規格の画像ファイルでして、

WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している。

とのことで、google開発による画像フォーマットで、主にweb重視のgoogleらしく、画像ファイルのサイズの低容量化ができているようです。
まだ既存のwebサイトを見る限りは低容量で高速表示を目指すサイトで使われているのはjpgファイルが多いですが、今後普及も進むかもです。

ただ、他の画像とのフォーマットの違いで、混在している現在では若干不便なところも否めません。

今のところ、例えばwebpファイルをjpgファイルに変えて使う場面などでは、単に拡張子を変えるだけでは対応できず、技術的に変換する必要があり、各種ソフトウェアや、

https://convertio.co/ja/

のようなオンラインの変換サービスなどを使う必要があります。

まだこれから広がりゆく技術だと思われますので今の内に把握、チェックしておくことをオススメします。

こうちゃん

スポトラローンチ

こんばんは、こうちゃんです。

いつもお仕事で各種webサイトを作成しておりますが、
趣味で指導員もやるほどハマっているトランポリンに関わるサイトを作りたくって、
このほど、全国のトランポリン場を探せるポータルサイト、

スポトラ

を作成、ローンチいたしましたー。
最近テレビ等で時折見かけるようになったため、ちょいちょい知名度も上がってきているスポーツで、徐々に街中にフリーのトランポリン場や、トランポリンパークが登場するようになってきております。
そんなトランポリンの、できる場所や料金、利用できる時間等を、
写真や地図付きで細かくご紹介するサイトになっています。

まだまだ一部テレビでやっている場所くらいしか人々には認識されていませんが、
こうして全国捜索すると、かなりの数のトランポリンを楽しめる場所というのがあるものでして、
ぜひお近くの練習場などの門をたたいてみてはいかがでしょうか。

リリースはしましたが、これからさらなる飛躍、成長を続けていくつもりですので、
どうかよろしくお願いいたします。


あとちょっと雑談、雑記も


ついに自衛隊の新規部隊

水陸機動団

が創設されることに！！？？
http://blog.livedoor.jp/corez18c24-mili777/archives/36137427.html

政府が昨年１２月に策定した「防衛計画の大綱」で新設方針を打ち出した「水陸機動団」の全容が２日、明らかになった。機動団は離島防衛の専門部隊「西部方面普通科連隊」（約７００人）を置く長崎県佐世保市などに配置し、３連隊を整備。新設する「陸上総隊」の直属部隊とし、計２千～３千人規模の大部隊とする。 政府は平成３０年度までの編成完了を想定しており、中国による尖閣諸島（沖縄県石垣市）への威嚇と挑発をにらみ、不測の事態に対処できる態勢整備を急ぐ。

－－－
ようは、
陸上自衛隊から構成する
水際戦闘用部隊で

いわば海兵隊なのですね（米軍でも海軍と海兵隊は別物）

新設だから注目度も高いのもあり、
確実に優秀めの人材で構成するはず

ちょっとしたワクワク部隊になりそうですね。

厳密に結成の日取りは発表されてないみたいですが、
これは気になる話題です。

４年以内くらいには実戦配備されるかな。

http://world-fusigi.net/archives/9571812.html
なんすかこの、厨二秒みたいな名前の古代生物はｗ
てか、デカ過ぎませんか。


http://blog.livedoor.jp/rbkyn844/archives/9571809.html
とんでもないバッタをアヒルで撃退！？
なかなか斬新な作戦ですねえ。
効果あるといいんですけど。


http://www.watch2chan.com/archives/20200223161351.html
まあここまで金かけてきてしまっててなんですが、
歴史上最悪と言っていいような、賄賂と不正にまみれたオリンピックですもんねえ。
予算も嘘、国民にも迷惑かけまくり、
暑過ぎて選手からも嫌がられ、
何一つやる価値のない大会、まあ中止が妥当でしょう。

こうちゃん

スポスポリリースしました☆

こんばんは、こうちゃんです。

このたび、システムエンジニアでweb系が専門の、わたくしこうちゃんが、
技術の粋を尽くして作成しましたサイト、

全国のスポーツスポット検索サイト「スポスポ」

リリースいたしました☆
こちら、全国にあるたくさんのお出かけスポットのうち、筆者も大好きな、運動、スポーツ関連の人気施設の数々をご紹介するサイトとなっております。
各サイトの、場所や連絡先、公式サイトURL、料金などの案内に加え、
さらに、twitterやfacebookのような公式のSNS関連の紹介、動画などの紹介等、
ただのポータルサイトにとどまらず、
その施設に実際に行きたくなるような、あふれんばかりの情報を特集しております。

特徴情報でお子様連れ向きか、や、駐車場があるか等、
休日のファミリーお出かけなどに大事な情報がたくさんありますので、
お休みのお出かけレジャーなどの参考に、ぜひお使いくださいませ。

こうちゃん

コメントアウト

こんばんは、こうちゃんです。

こうしたブログをはじめ、最近では趣味で多くの人がサイト、ブログ、SNS等、自身の情報を発信できるメディアを持っている時代になりました。
そうしますと、サイトやブログですと、完全にではありませんが、ある程度ソースを書く知識もあると便利です。
ソースというのは、htmlソースといって、言わばネット上で見るページを作るプログラミング部分です。
最近は便利なツール等で、一切知識がなくても見たままでマウス操作と文字入れるだけでサイトが作れたり、ブログもほぼ与えられた機能とデザインだけでも作成できますが、
そこはやはり自分で色々カスタマイズできる方がきれいなものが作れるものです。

そんな時に、htmlの知識、というのはあると便利で、具体的には、
HTMLタグリファレンス
こうしたサイトなどで解説しておりますが、
各種構文などを覚えて自分で書けますと、楽しいサイト作りができます。
そんな中でひとつ、自身も活用するのでメモしておきますと、
基本的にはhtml中に書いた文字は全部ページに表示されますが、
コメントアウトといって、書いても見えない、そのページのソースを見た時しか見えない文字、というのも入れることができます。
これは、意味がなさそうに聞こえてしまうかもしれませんが、自分でサイトを作る際に、
「ここはお知らせ表示部分」みたいに自分に対しての付箋のようにも使えますので、
実は大変便利です。
※このブログなども、ソース編集といって、htmlを入力するモードがあるので使える

具体的には、ソースを書いている時に、
<!--　と　-->　とで囲めば、その間に書かれている内容はすべてただのメモ扱いで、実際には表示されません。
ですので、先ほどのような自分あての付箋のように使うのならば、
お知らせを書く部分に、

<!-- ここはお知らせ表示部分 -->
などを書いておけば、後日見た時などにも振り返りやすくて便利です。

こんなちょっとした小技ですが、使いこなせば便利です。
なお、これは、ソース上には書いてあるのは誰でも見れますので、あまり重要機密などは記載しないように注意しましょう。

こうちゃん