技術研究

twitterでこの番組が紹介された際に気になったので改善

Twitter Card表示について
Twitterで外部サイトを参照すると説明文と画像が合わさったリンクが出る。これがtwitterカードである。
実はコレ、カスタマイズが可能なのだ。初めて知った。画像スペースが有るのにプレースホルダーだけ表示されるのは勿体無いので調べた。

Twitterカードは以下のリンクに調べたいURLを打ち込むと確認できる。
https://cards-dev.twitter.com/validator

カードタイプは4種類。summary cardが一番多く見かけるカードである。ラージタイプのsummaryカードもある。Player cardは動画を再生できるっぽい。YouTubeをリンクすると見かけるやつだろう。
https://dev.twitter.com/cards/types.html

要はメタタグとして埋め込むとそれをTwitterのほうで読み取ってくれるらしい。
仕組みはわかったがHTMLコードに直接埋め込むのは面倒なのでプラグインを探す。

Twitter Cards Meta Options

WordPressの強み、それがプラグイン。ささっと設定して前述のvalidatorで確認した。
画像の反映までに時間差がある場合があるのであせらずに。

マテリアルデザインっぽいデザインテーマに変えた。
2ペイン+メニュー構成に。
スマートフォン/タブレット表示がスムーズになり、メニューはハンバーガーボタン(三ボタン)で表示される。

トップ画像を作った。フリーの背景と「イカモドキ」フォントで構成。
ページの色をカスタマイズした。Chromeで開いてF12押す。ブラウザ上で設定を追加したり書き換えできるので面白い。最近はこのツールでホームページを調べるのが好き。
左上のボタンを押してマウスで調べたい箇所をクリックすると対応するHTMLやCSSを見れる。変えたい部分を調べて、ブラウザ上でいい感じに出来たら設定をCSSに追記していく。カラーチューザーが便利で楽しい。
ソースコードに手を加えたくないのでメインのCSSの後ろに以下のように追記して上書きされるようにした。
WordPressはフォントがダサいと言われることでおなじみ。とりあえずメイリオを入れておく。
こんどgoogle fontsでステキなフォントを探しておこう。
https://googlefonts.github.io/japanese/

header.php内でGoogle Fontsのリンクを読み込んで、CSSでフォントを設定する。Webにあるフォントを持ってきて表示しているため、あまり多用しすぎると重くなるらしい。

/* BACKGROUND COLOR SETTING */

/* top bar */
.site-header{
background-color: #6AB344;
}

/* menubar(left) */
.mdl-layout__drawer {
background: #ffffff;
}

/* background(center) */
.site-content {
background-color: #daecd1;
}

/* wiget(right) */
.widget {
background-color: #ffffff;
}

/* FONT SETTING */

/* Override link/text-color */

/* menu */
.mdl-layout-title{
font-family: “mplus1p”, “Rounded Mplus 1c”, “メイリオ”, “Helvetica”,”Arial”,sans-serif;
}

/* h1, h2 */
h1, h2 {
font-family: “mplus1p”, “Rounded Mplus 1c”, “メイリオ”, “Roboto”,”Helvetica”,”Arial”,sans-serif;
}

/* body */
html, body {
font-family: “mplus1p”, “Rounded Mplus 1c”, “メイリオ”, “Helvetica”,”Arial”,sans-serif;
}

/* link */
a {
color: #6AB344;
}
 

考えているけど実行に移してないこと
・ネット回線の改善
・サーバー構築
・Wiki導入(知識の共有)
・コーナー作成
・応募フォーム再構築
・WordPressを利用したPodcast番組の配信指南
・新規ゲストの勧誘

Podcast
TBSラジオが撤退した。
AppleはもはやPodcastに関心がなさそうだ。

WordPress
CMS(コンテンツマネージメントシステム)の一種。CMSで検索すればWordPress以外にも色々見つかる。
PHPで構成される。ユーザーは細かい点を知らなくても十分使える。PHPやCSSを知っているとより細かいカスタマイズが可能になる。
メリット
・簡単であること
・企業向けにも利用できるほど”見た目”が良い
・プラグインを利用することでできることが増える
・テーマを利用することでデザイン性を一気に引き上げることができる
デメリット
・セキュリティの脆弱性
・多少重い

サーバー構築
・intel core i5-2400
・DDR3 8GB * 1
・SSD 120GB
OSはCentOS
インストールしたところで詰んでる

関心分野
・Python
・HTML, CSS
・JavaScript
・Java
・MySQL
・Androidアプリ
・Raspberry Pi
・Arduino