H T M L
勉強した内容
HTMLについて勉強しました。
HTMLについて今日やった課題は二つです。
- ごく簡単なHTMLの説明を読む
- ドットインストールのHTML入門をやる
せっかく勉強したのでこの記事はhtml編集で書いています。
ごく簡単なHTMLの説明を読む
htmlの基礎について学んで行きました。
htmlの目的は文書を構造化を目的としたものであって、見た目を編集するものである。
この事をこれまで誤解していました。
今htmlで編集をしながらプレビューを見たりしていますが、プレビューで見る事が出来る見た目は、htmlによって出来ているのではありません。
はてなブログの機能あるいはブラウザの機能として、html文書を解釈しています。
そう考えるとhtmlがマークアッップランゲージと呼ばれるのも不思議ではありません。
プログラミング言語と同じで、それを解釈実行する環境によってどう結果（見た目）表示されるのかが変わってきます。
とても面白いと思いました。
ドットインストールのHTML入門をやる
ごく簡単な説明で勉強した内容の復習になりました。
特にフォームにつけるラベルの使い方に関して、どう使ってよいのか疑問だったので、その事が解決できてよかったです。
感想
最初は抵抗があったのですが、htmlで文書を書いてみると、とても面白いです。
自分自身で、これは重要とか、もっと重要とか書いてゆくのは、自分が何を伝えたいのかを意識する事が出来てとても勉強になります。
残りの課題はgistに書く必要があるみたいなので早めにgit-hubについて勉強してやろうと思います。
サクラのサーバでワードプレス（４）
タスク
今回の作業タスクです。
- 自分のプロフィールを書いた自己紹介ページオを作る（ページで作成）
- ブログ記事の末尾に関連記事を表示する（プラグインでOK）
- Googleアナリティクスを実装してみる（タグを埋め込むんじゃなくてfunction.phpに記述していれる）
- ソーシャルボタンを設置する（プラグインを探して導入）
自分のプロフィールを書いた自己紹介ページを作る
まずはもっと小さいタスクに分割します。
- 自己紹介ページを作成する方法を考えるor調査
- 自己紹介ページを実装する
自己紹介ページを作成する方法を考えるor調査
Wordpressの最初のページにサンプルページへのリンクが表示されているので
これをプロフィールのページにしてしまうのが速そう。
自己紹介ページを実装する
ダッシュボードに固定ページの編集項目があるので
そこでサンプルページをプロフィールページに書き換えました。
ブログ記事の末尾に関連記事を表示する（プラグインでOK）
小タスクに分割します。
ブログの末尾に関連記事を表示するプラグインを探す
調べてみるといくつかプラグインがあるみたいです。
- Wp-Thumbie
- linkwithin
- Similar Post
三つとも試してみて良い方を選んぶ事にします。
プラグインを実装&適切に関連記事が表示されているかテスト
まずWp-Thumbieを実装してみました。
プラグインなので簡単に実装できました。
（実装というほどのものではないかな）
関連記事が上限五つまで表示されるようになります。
タイトルと内容が似ているかどうかで関連記事を出してくれるらしいです。
linkwithinとSimilar postをプラグインの新規追加で探してみましたが
見つかりませんでした。。。
どれを使うか選ぶ
結局インストールできたのはWp-Thumbieだけでした。
とりあえずは関連記事を表示してくれるので
Wp-Thumbieでよしとしました。
Googleアナリティクス（GA）を実装してみる
まず小タスクに分割です。（毎回の最初の作業になってきた）
- GAとは何かを調べる
- function.phpでGAを導入する方法を考えるor調べる
- GAを実装する
- GAが実装できているかテストする
GAとは何かを調べる
GAの初心者用講座があったのでここでお勉強です。
初心者講座にGAで出来る事の基本があったので手打ちで写してみました。
|
リアルタイムレポート
サマリー
リアルタイムメニューのそうまとめ。
訪問者数、どこから来たか、参照もとなどなど。
地域
どこの国からアクセスが来ているのか
何経由でサイトに来たのか
コンテンツ
訪問者がどのコンテンツを見ているのか
イベント
アクセス数の多いイベントやアクションの値
ユーザー
サマリー
ユーザーレポートのそうまとめ。
ユーザーの分布
訪問者の言語、国、地域ごとの計測
ユーザーの行動
初訪問、リピーター、訪問回数
ユーザーの環境
ブラウザやOS、ネットワーク環境ごとの計測
モバイル
PCかモバイルやタブレットか。機種、ブラウザごとの計測。
カスタム
条件を定義してカスタム
ユーザーフロー
訪問者のページごとの移動
サマリー
トラフィックレポートのそうまとめ
どのサイトから来たか。どんな検索ワードでやってきたか。
検索エンジンの最適化
SEO対策に有効なデータ
ソーシャル
SNSからの訪問、いいねボタンなどのアクション
コスト分析
GoogleAdWordsからの訪問、費用、収益に関するデータ
広告
GoogleAdWordsのデータを反映
コンテンツ
サマリー
コンテンツレポートの概要
サイトコンテンツ
多く表示されたディレクトリ、ページ
最初に読まれるページ、離脱したページ
サイトの速度
サイトの表示速度
サイト内検索
サイト内検索を利用した訪問者の動向
イベント
PDFのダウンロードなどのアクションを計測
アドセンス広告のクリック数•率
ウェブテスト
効果的なページデザインのシミュレーション
ページ解析
クリックされたリンクの割合が％表示
コンバージョン
目標
商品購入やメルマガ登録などの目標の達成率
eコマース
ECサイトで商品購入がおこった際に売り上げや住所などのデータを収集
マルチチャンネル
コンバージョンした訪問者が初回訪問からコンバージョンした訪問までの
期間や毛色、参照元などのデータを得る事が出来る。
|
GAを使えばサイトにどのような要因で集まってきているかが分かるみたいです。
大体GAとは何かが分かったと思います。
ざっくり言えばGAをもとにサイトを作れば人が集まりやすいってことでしょう。
function.phpでGAを導入する方法を考えるor調べる
GAの申し込みの方法がありました。
まずはgoogleアカウントでGAを申し込む必要があります。
その後、全てサイトのトランザクションを埋め込んでやる必要があります。
たぶん全てのサイトに埋め込むのが大変なのでfunction.phpで
自動で埋め込むようにしなければいけないという事でしょう。
ここに導入方法が書いてありました。
簡単に実装できそうです。
GAを実装する
実際にGAから取得したjsのコードをfunction.php内に書き込んでみました。
function 関数名() { ?>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)
[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47865851-1', 'okami6.net');
ga('send', 'pageview');
</script>
<?php }
add_action('wp_head', ‘関数名');
head.phpに関数を埋め込んでくれるんですね。
これはお手軽です。
GAが実装できているかテストする
反映されるまでに時間がかかるらしいので確認は明日以降にします。
ソーシャルボタンを設置する
タスクを分割です。
どのショーシャルボタンを設置するのか決める
とりあえずfacebookのボタンを追加したいです。
twitterは使ってないし。。。
目的のソーシャルボタンを設置するためのプラグインを探す
http://netaone.com/wp/wordpress-sns-plugin/
facebook公式のプラグインがあるらしいのでこれを使う事にしました。
ただ、全ての機能を使うためにはdevelopers登録がいるらしいです。
プラグイン設置
実際に検索してプラグインを有効にしてみました。
developer登録を迫られたので登録しました。
あとは設定画面でどこに設置するかをせっていして、
とりあえず全部に表示するようにしました。
うまく設置されているかテスト
記事の上と下にちゃんと設置されていました。
今後の課題
- 自分でプラグインを書けるぐらいの力をつける。
感想
wordpressのカスタマイズは結構簡単に出来るんだなと実感できました。
ただ、プラグインとかは英語で説明してあるのでもっと英語力をつけないと。
初めてのインターン作業週が終わりました。
色々分からない事が多かったですが、ずっと楽しんでやれていたと思います。
再来週の内容はもっと実践的になるので楽しみです。
サクラのサーバでワードプレス（３）
タスク
- wordpressの構造理解とカスタマイズ
サブタスクに分割
まずタスクを次のように分割しました。
- 参考文献（http://kachibito.net/wordpress/theme-customizing-1st-step.html）を読む
- 自分なりに構造をまとめる
- wordpressのカスタマイズファイルを知る
- wordpressをカスタマイズする
- htmlとcssを必要なところだけ勉強←これは実装中に必要なところだけ調べればいい
前回分けてみたらどこまで進んでいるかなど分かりやすかったので
これからも分けて行きます。
文献を参考に手を動かしながらwordpressのテンプレートの構造を勉強しました。
今ある環境を壊すと恐いのでMAMPでローカル環境を作っていじってみました。
wordpressの構造は結構シンプルみたいです。
て最初のページが作られています。
ページに必要なページを読み込むような感じです。
読み込みの関数は
<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_template_part();?>カスタマイズテンプレート
という感じです。
実際に
/wordpress/wp-content/themes/twentyfourteen
にアクセスしてどういうファイルが入ってるかなどを見てみました。
最初の画面がどのように作られているのかを実際に知りたくて
index.phpの中身をいじります。
header.phpを消してやると急にページが貧相になってしまいました。
header.php内にタイトルがあったので色々打ち込んでみるとサイトのタイトルに
反映されます。
一方index.phpに文字を打ち込んでみても反映されまん。
<div·id="primary"·class="content-area”>
の内側に書いてやるとうまく反映されました。
記事を単一で表示するためのsingle.phpの中身もみて行きました。
get_template_part(‘content’, ‘page’);
を使ってcontent_page.phpの内容を取ってきて
whileloopで表示させているみたいでした。
content_page.phpの中でthe_titleやthe_contentという
関数を使いページの内容を取得しているみたいである。
参考文献の例に習ってsingle.phpのコードを変更してみました。
<?php
$post=$wp_query->post;
if·(·in_category('1'))·{
include(TEMPLATEPATH.'/single01.php');
}·elseif·(in_category('2'))·{
include(TEMPLATEPATH.'/single02.php');
}·elseif·(in_category('3'))·{
include(TEMPLATEPATH.'/single03.php');
}·elseif·(in_category(‘4'))·{
include(TEMPLATEPATH.'/page.php');
}·else·{
include(TEMPLATEPATH.'/single-others.php');
}
?>
カテゴリーのIDごとにリンク先を変更する事が出来ます。
このやり方を使えばページごとにデザインを変える事も出来そうです。
自分なりに構造をまとめる
核となるページは
これに対して
を組み合わせて行きます。
さらに核となるページやヘッダーなどの中身を書き換えてやる事で
リンク先のページなどをカテゴリーなどの属性ごとに書き換えてやる事も出来ます。
テンプレートの構造に関してボンヤリとつかめたので
次は実際にカスタマイズをしながら構造がどうなっているか勉強して行きます。
wordpressのカスタマイズファイルを知る
カスタマイズファイルがあるのでは無く上記のファイルを書き換えて行く事が
wordpressのカスタマイズをするという事であると思います。
wordpressをカスタマイズする
これだけではタスクが大きすぎると感じたので小さいタスクに分けました。
- 何がカスタマイズできるのかを調査する
- 実際にカスタマイズしたい事を考える
- カスタマイズをどのような方法で実装するのかを考える（あるいは調べる）
- カスタマイズを実装してみる
何がカスタマイズできるのかを調査する
まずオリジナルのテーマを追加したいのでtwentyfourteenをそのままcustumという 名前にコピーし作業用のテーマを作成しました。
管理画面を見ると
Twenty Fourteen/custum
という名前で作業用のテーマが出来ていました。
調べてみるとwordpressカスタマイズのためのTIPsのリンク集が見つかりました。
ここに沢山wordpressのカスタマイズのコードが落ちているらしいので
探りを入れてみました。
ソーシャルボタンを付けたり、ファビコンを表示したり
記事によって独自のCSSを使ったりも出来る模様。
特に気になったのは記事ごとの独自のCSSです。
これを応用してやる事でブログに接続する端末によって
表示を最適化してやる事が出来そうです。
になっていました。)
実際にカスタマイズしたい事を考える
実装してみたいものをピックアップしてみました。
という事で、今日実装するのは抜粋表示に決定！
ここに抜粋方法が載っていると思ったら違いました。
抜粋には
the_excerpt
を使うみたいだという事だけ分かりました。
さらにcordedでthe_excerptの使い方を調べてみると
the_excerpt();
と書く事で抜粋の文字列を表示してくれるらしいです。
カスタマイズを実装してみる
そして実際に書いてみたコードは次のような内容です。
print('<div align="center">');
print('<font color="blue"><b>');
echo the_title();
print('</b></font>');
print('</div>');
print('<div align="center">');
the_excerpt();
print('</div>');
print('<div align="center"> <a href="');
echo get_permalink();
print('"> 全文を読む</a></div>');
print('<br />');
print('<br />');
print('<br />');
しかし抜粋の最後に[…]とついてしまいます。。。
最初に書いたサイトにfunction.phpに次のコードを追加すればいいらしいです。
function new_excerpt_more($more) {
return ‘ ‘;
}
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
恐らくexcerpt_moreという関数をthe_excerptが使っていて、
new_excerpt_moreがexcerpt_moreの返り値を受け取って代わりに
the_excerptに渡すようにしているのだと思います。
function.php自体にはthe_excerptが無かったので後で調べてみる必要ありです。
また、記事の抜粋が横幅一杯に広がってしまう問題が残りました。
これもなんとかしたいです。
残った課題
雑用的にした事•調べた事
ユーザーエージェント
webサイトへのアクセスの際に使用されるプログラムのこと。
pcだけではなくスマホなどのモバイル端末からのアクセスなど
それぞれの端末に対して動的にユーザがみやすいデザインにしてやる必要がある。
CMS（Contents Management System）
webコンテンツを構成するテキストや画像、レイアウト情報などを
一元的に保存•管理し、サイトを構築したり編集したりするソフトウェアの事。
wordpressのテーマの編集方法
テーマファイル群を最初はTerminalからssh接続で行っていましたが、
管理画面から出来る事を発見しました。
今後は特別な編集（ファイルの削除とか、追加とか）以外はブラウザ上で
行っていくと思います。見やすいので。
感想
今日もwordpressと格闘の日々でした。
wordpressの構造がおぼろげながら見えてきました。
見た目や機能のカスタマイズはテーマによって実装できるみたいです。
抜粋表示を実装してみましたが中々大変でcordexを見たり、
先達のサイトを参考にしたりしてなんとか機能だけは実装できたと思います。
次はfacebookのいいねボタンを付けてみたいです。
サクラのサーバでワードプレス（２）
タスク
内容
タスクが大きすぎると感じたので小さいタスクに分けてやる事にしました。
ドキュメントルートの設定をする
今の設定だとhttp://okami/wordpress/にアクセスしないとブログが見れないので
ドキュメントルートの設定をしました。
ついでに独自ドメインの取得設定までやりました。
まず、サブタスクをさらに分割
- http://www5283uo.sakura.ne.jpにアクセスするだけでブログが見れるようにしたい
- 独自のドメインに変更したい
http://www5283uo.sakura.ne.jpにアクセスするだけでブログが見れるようにしたい
ルートディレクトリを設定しようとしたらwordpress自体に
アクセスできなくなってしまったので、がおかしくなったので
最初からインストールし直しました。（こういうのが無駄な時間なのか。。。）
まぁ、いいさ！
まずデータベースを削除する : MySQL でいこう！データベースを削除しました。
次にWordPress推奨構成とMySQLデータベースの作成 - WordPressの使い方と
cordexを参考にして、ワードプレス復活！！
cordexにドメインで直接wordpressに飛ぶように設定もありました。
独自のドメインに変更したい
さくらのVPSに独自ドメインを設定してみた - VPS比較のカルマ
を参考に独自ドメインを設定しました。
大体２０分ぐらいで反映されました。
サイトの編集を著者だけに限る
この問題についてはログインしないと編集できない事が分かったので
すぐに解決しました。
はてなブログからデータを移行する方法
カスタマイズとプラグインの知識が必要
データの形式を知りたいと思い次のサブサブタスクを設定しました。
データを移行する方法の調査
エクスポートできない…だと！？
はてなブログでは公式にはエクスポートをサポートしていないらしいです。
いくつか方法があるみたいなので調べてみました。
はてなブログ用のツールでエクスポートも出来るのですが
windowsアプリでした。
覚えよとは思えませんでした。
力技でえいやっとhtmlをコピーするのが良い気がしてきました。。。
wordpressのデータ形式
とりあえずcordexのブログのインポートを参照。
はてなダイアリーはあったが、ブログは見当たらない。。。
しかし、RSSフィードからインポートと書いてある！
実際に移す作業
が、ftpサーバがどうたらこうたら。。。
持ってないので回避策を調べてみるとありました。
ここに書いてある通りにやってみるとうまく導入できました。
無事rss importerをインストールして使う事が出来ましたが
反映がされないという。。。
結局力技でコピペという方法をとりました。（はぁ。。）
という事で次のサブサブタスクを設定。
カスタマイズで検索するとテーマについての記事が沢山出てきました。
テーマを使えば簡単にデザインを変更できるらしいです。
テーマのインストール方法はこちらに書いてあります。
今日出来た事はここまででした。
残った課題
雑事でやった事
linux でユーザーの切り替えのコマンド
su ユーザーネーム
evernoteで消し線が欲しかったので調べたらありました。
evernoteでフォントパネルを開くと素早く消し線を引けます。
command + t
パーマリンクを変更したところブログ内のリンクが出来なくなりました。
すごく困ったので調べてみると、
mod_rewriteの設定をすればいいらしいのでやりました。
感想
今日はもらったタスクをいくつかに分けるところから始めてみました。
そうすることで、今自分が何をやっているかや小さい達成感を
持ちながら進める事が出来よかったです。
機能の自動送信フォームの件が今日まで持ち越してしまいましたが、
人に説明するのってすごく難しいと感じました。
自分と他人はそもそもの前提が違ったりするのできちんと理解して
説明しなければいけないと感じました。
サクラのサーバでワードプレス（１）
タスク
- サクラのサーバにワードプレスをインストールする。
内容
まず、久しぶりにサクラのサーバにログインをしようとしたらできません。
パス変えたっけ？
複数のパスを試した後、失うものは無いので解約→再契約しました。
まず、最初詰まったのはport22から拒否されてしまう事。
これはwebコンソールでパスを設定することで解決しました。
その後emacsが入ってなかったのでまず入れました。
そしてemacsの設定をちょこちょこと。
新しく作り直したので
を参考に環境を構築して行きました。
ssh公開鍵を設定しようとしたのでうまく行きません。
時間がかかりそうで必須では無いのでスルーしました。
今後ファイルを送ったりするのに役に立ちそうだったので
を参考にしてfilezillaをインストールしました。
ただ、パーミッションが許されていないフォルダにはファイル転送できませんでした。
そんなこんなでなんとかワードプレスをインストールしデータベースを設定し
ダッシュボードまでたどり着く事が出来ました。
ローカルで一度ワードプレスをインストールしといてよかったです。
残った課題
感想
サクラのサーバにログインできないのは予想外でした。
これで結構時間をとってしまった。。。
しかし、改めてサーバの構成がよくわかってない事が分かりました。
これは復習のしがいがありそうです。
google app scriptでフォームの自動返信
タスク
- google app scriptを用いてフォームの内容をメールで自動返信•転送する
作業内容
http://news.mynavi.jp/series/apps_script/004/index.htmlを参考に
スクリプトを書いて行きました。
jsは少々だけれども触った事があったので分かりよかったです。
jsはブラウザで動き、gasはサーバで動くところが新鮮でした。
テンプレートがあるので楽にかけるかなと思ったのですが、
作ってみると全然メールが送られてきません。
何でかなと思いレシピのまんまで自分でフォームを作ってみたところ動きます。
メールが届きます。
原因が分からないのでエラーがあったらフィードバックが来るように設定。
するとreference errorをいただきました。
ああなるほど、データのキーを[kywd]としてしまっていました。
[“kywd”]と書き直すとすぐにメールが返ってきました。
メールの送信者を設定する必要があったので
を参考に設定した。
丁寧に書いてあったので良かったです。
感想
最初はフォームの自動送信と言われて「え？できるのかなぁ？」と思いました。
でもやってみれば出来るものです。
出来た要因はタスクが明確だったことと解決策が提示されていた事だと思います。
まさに自分がやったのは作業でした。。。
問題が提示されてタスクの設定から解決法の選択まで出来るようになりたいです。
なります。
