Java@Javaを勉強するよ!(入門編)


はじめに

みなさんこんにちは。のぶです。

PlayFrameworkをいざ!
と思ったのですが、
JavaのStaticってなんだっけ?
Javaの書き方・・・忘れてました。。

というわけで少し遠回りにはなりますが、Javaの基本から勉強していきたいと思います。
メモです!めも!!

命名規約

そういやJavaって基本的な命名規約とかあったよね
ということで命名規約から思い出していきます。

// クラス名 
// パスカル記法(先頭大文字、単語の区切りは大文字)
class TestClass {}

// 関数名
// キャメルケース記法(先頭小文字、単語の区切りは大文字)
public int testMethod() {}

// 変数名
// キャメルケース記法(先頭小文字、単語の区切りは大文字)
int testVariable;

一般的な命名規約はこんな感じでしょうか。
ちょっと自信ないです。
プロジェクトによって変わるのかな・・

コンパイル・実行

コンパイルのコマンドも実行の仕方も忘れてた・・・悲しい。

// test.java
class Main {
    public static void main(String args[]) {
        System.out.println("HelloWorld");
    }
}

まずはHelloWorld!

javac test.java
java Main
# HelloWorld

javac でコンパイル。
java <クラス名>で実行。
javac、懐かしいです。

変数型・配列

class Main {
    public static void main(String args[]) {
        // 数値
        int a = 0;
        System.out.println("int :" + a);
        // 文字
        char b = 'a';
        System.out.println("char :" + b);
        // 少数
        float d = 123.3f;
        System.out.println("float :" + d);
        // 真偽値
        boolean e = true;
        System.out.println("boolean :" + e);
        // 配列
        int f[] = {85, 78, 92, 62, 69};
        System.out.println("配列 :" + f[2]);
        // 文字列1
        String g = new String("test");
        System.out.println("文字列1 :" + g);
        // 文字列2
        char h[] = {'n','o','b'};
        String i = new String(h);
        System.out.println("文字列2 :" + i);
    }
}

/**
    int :0
    char :a
    float :123.3
    boolean :true
    配列 :92
    文字列1 :test
    文字列2 :nob
**/

変数の型とかは、C言語がっつりやってたので覚えてました。
ひさしぶりに、型がある言語触ると楽しいですね!

おわりに

ここまでは、調べれば難なく思い出せたので
if文等の制御文も大丈夫そう。。
というわけで、次回はクラス作成とかJavaのクラスを使ってみたり、その辺の勉強をします。

というわけで以上となります。ありがとうございました。

参考にしたサイト

Java@PlayFrameworkを導入するよ!(Mac)


はじめに

みなさんこんにちは。のぶです。
Javaを触りたかったので、
javaのWebフレームワークを探していると
PlayFrameforkをいうものを発見しました。

Railsに似てるんだとか。

Railsに似てる。つまりCakePHPに似てる。
つまり、PHPerの僕にとってはとっつきやすいフレームワーク!
ということでこれから勉強していきたいと思います。

導入方法がバージョンによって変わるみたいなので、
今回はPlayFramework2.4の導入をここにメモしていきます。

Brewダウンロード

今回はMacでの導入なので、最初にBrewコマンドを使えるようにしておきます。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Brewを使わない場合は、直接activatorをダウンロードして、Pathを設定して・・
というやり方もあるのですが、Brewを使ったほうが断然らくなので、こっちでやります。

activatorをダウンロード

brew install typesafe-activator
activator -help

activatorがきちんとインストールされていますでしょうか。
activatorとは、PlayFrameworkを提供しているツール・・らしい・・・?(よくわかってない)

PlayFrameworkアプリケーションの作成

activator new test play-java
cd test
activator
run

アプリケーションを作成します。
PlayFrameworkアプリケーションはJavaかScalaで作ることができるそうなんですが
ここではJavaでPlayアプリケーションを作成しています。
ちなみに、Scalaでアプリケーションを作成したい場合は
『play-java』 の部分を『play-scala』にしてあげましょう。

最後に、作成したプロジェクトのディレクトリに移動し
activatorコマンドを実行で、Playコンソールを起動。
runコマンドを実行で、Playアプリケーションを開発モードで実行します。

http://localhost:9000/

ブラウザから上記URLに接続でPlayFrameworkの画面が見れたでしょうか。
これで構築は完了です。

Eclipseで使えるようにする

test/project/plugins.sbtに以下を追記する

addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "2.4.0")

の後に

activator eclipse

を実行。
その後、eclipseからプロジェクトをインポートして完了です。

eclipseで開発する場合のコマンドは以下になります。

activator -jvm-debug 9999 run

上記コマンドを実行後、
適当にファイルを変更してブラウザを更新してみてください。
変更が反映されましたでしょうか。

おわりに

少し触ってみましたが、
SpringとかStruts等よりもすんなり理解できました。
というか、ほぼほぼCakeみたいな。
JavaなのにCakeみたいな。。
PlayFramework、素晴らしいです。

ということで今回は以上となります。ありがとうございました。

参考にしたサイト

Perl@Perlの基本を勉強するよ! – Part2 –


はじめに

みなさんこんにちは。のぶです。

今日もPerlの勉強をするので、メモです!
いつ書いたものか忘れちゃたけど
書き残しがあったので、投稿しておきます。

配列をソートする

ソートはsort関数を使用する
単に文字コードを小さい順にソートする。
数値をソートしたい場合は、

sort BLOCK LIST

という形式にしてあげる。

my @array = (12,22,34,3,6,126,745,99,9);

my @sorted= sort(@array);
print join(',', @sorted);
# 出力 => 12,126,22,3,34,6,745,9,99
# これだと文字コードサイズ順。

@sorted = sort {$a <=> $b} @array;
print join(',', @sorted) , "\n";
# 出力 => 3,6,9,12,22,34,99,126,745
# 数値のソート

@sorted = reverse (sort {$a <=> $b} @array);
print join(',', @sorted) , "\n";
# 出力 => 745,126,99,34,22,12,9,6,3
# 数値を降順にソート

Grepを使ってみる

配列の中から正規表現に一致する値を引っ張ってこれる。

my @array = ("Perl", "にほんご", "のぶ", "のぶp", "んんん" );

my @found = grep(/p/i, @array);
print join(',', @found), "\n";
# iを付けると大文字小文字を区別しない
# 出力結果 => Perl,のぶp

@found = grep(/ん/, @array);
print join(',', @found), "\n";
# 日本語も出来ました
# 出力結果 => にほんご,んんん

@found = grep(//, @array);
print join(',', @found), "\n";
# 何もしていしないと、全部出力される
# 出力結果 => Perl,にほんご,のぶ,のぶp,んんん

おわりに

今回は短いけどこれで終わりです。
Perlは最近ずっと触っているし、次はJava!!!!
Java!!!Play!!!

Perl@Perlの基本を勉強するよ!


はじめに

みなさんこんにちは。のぶです。
Perlを触ることになったので、
勉強しながらメモしていくことにします。

普通のメモです!メモ!

変数の種類

スカラー変数

スカラー => 数値、文字列 単一の値
『$』を付けて宣言する

my $hensuu;

配列

『@』を付けて宣言する

my @hairetu = (0,1,2);
# 配列をそのまま出力
print @hensu;
# 要素を1つだけ取り出して出力
print $hensu[0];

要素を1つだけ取り出したいときは、その値がスカラー値になるので、『$』を付ける。(忘れそう・・)

ハッシュ

ハッシュ => 連想配列のこと
『%』を付けて宣言する

my %hassyu= ("a" => 0, "b" => 1, "c" => 2);
# ハッシュをそのまま出力
print %hassyu;
# 要素を1つだけ取り出して出力
print $hassyu{"a"};

ハッシュも配列と同じように
要素を1つだけ取り出したいときは、その値がスカラー値になるので、『$』を付ける。
指定するキーは波括弧で囲む。

比較演算子

比較演算子は数値比較と文字列比較で異なる。
数値の比較は 『 == != > < >= <= 』、 文字列の比較は 『 eq ne gt lt ge le 』 100%忘れるので表にしておく

数値比較 文字列比較 意味
a == b a eq b a と b は等しい
a != b a ne b a と b は等しくない
a < b a lt b a より b が大きい
a > b a gt b a より b が小さい
a <= b a le b a より b は大きいまたは等しい
a >= b a ge b a より b は小さいまたは等しい

条件分岐

if文の書き方

my $a = 10;
my $b = 20;

# 普通の書き方
if($a == $b) {
  print "a と b は等しい\n";
}
elsif($a < $b) {
  print "a より b は小さい\n";
}
# 出力結果
# a より b は小さい

# 参考演算子
my $c = 10;
my $d = 10;
my $e = ($c == $d) ? "c と d は等しい\n" : "c と d は等しくない\n";
print $e;

# 出力結果
# c と d は等しい

else if 文は elsif と書く。(慣れない・・)

配列のループ処理

my @hairetu = (0,1,2,3,4,5);

foreach my $a (@hairetu) {
  print $a;
}
print "\n";

foreach (@hairetu) {
  print $_;
}
print "\n";

for (@hairetu) {
  print $_;
}
print "\n";

# 出力結果は全部一緒
# 012345
# 012345
# 012345

foreach文とfor文は大体一緒で同じような使い方が出来る。
『$_』という変数に自動的に出力を格納する。

ハッシュのループ処理

my %hassyu = ("a" => 0, "b" => 1, "c" => 2, "d" => 3);

foreach my $key(keys(%hassyu)) {
    print $hassyu{$key} . "\n";
}

# 出力結果
# 2
# 0
# 1
# 3

keysでハッシュのキーを引っ張ってきて
出力時に引っ張ってきたキーを指定して出力。
結果は配列もハッシュも順不同。

おわりに

初歩的なことをメモしていきましたが
これ以外にもPerl特有の書き方だったり、処理の動きだったり
覚えなきゃいけないことがたくさんあります。

ハッシュのリファレンスとかなんだろ・・・笑

ドットインストールで一通り勉強を終えたので、これから本読みです。

以上。ありがとうございました。

参考にしたサイト

CentOS@jenkinsを導入するよ!


はじめに

みなさんこんにちは。のぶです。
今回はジェンキンス(jenkins)です。

ジェンキンスは仕事でも使用しているのですが、何かと便利ですよね!
ボタンをぽちっとクリックすると、gitに置いてあるソースコードを自動でテストしてくれて
サーバーに自動でデプロイ。
そのまま動作確認ができるという・・・
なんと便利な!

しかも、プログラミングを書いて、gitプッシュをするだけでデプロイが出来るようにも設定できるんだとか。
なんと便利な!

ということで自前のCentOSに構築したいと思います。

jenkinsのインストール

jenkinsを動かすためには、java6以上が必要なんだとか。
というわけでまずはjavaをインストールしておきます。 今回はjava8!なういですね。

Java8をインストール後、yumでジェンキンスをインストールできるようリポジトリ情報を追加しておきます。

yum install wget java-1.8.0-openjdk
wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key

jenkinsのポートを変更する

自前のCentOSちゃんでは、いろいろとポートがかぶってしまっているので、
jenkinsのポートを変更します。

vi /etc/sysconfig/jenkins


JENKINS_PORT="(使用したいポート番号に変更)"
JENKINS_ARGS="--prefix=/jenkins"

JENKINS_PORTを変更することで、使用するポートを変更できます。
JENKINS_ARGSは、ジェンキンスにアクセスするURLを変更することができます。
上記のように書くと、アクセスするURLが http://自分のドメイン:指定したポート/jenkins になります。

あとは、自動起動の設定をして
ジェンキンスを起動するだけ!!

chkconfig jenkins on
service jenkins start

http://自分のドメイン:指定したポート/jenkins

にアクセスできましたでしょうか。
めちゃくちゃ簡単ですよね!!!!
これで構築は完了です。

おわりに

ジェンキンスを構築することはできましたが、便利に使いこなすにはまだまだ設定等が必要です。
少し長くなりそうなので、一旦ここで終わりにして、次回に持ち越したいと思います。

gitプッシュでデプロイを夢見て、まだまだジェンキンス構築は終わらない!!

以上です。ありがとうございました。

参考にしたサイト

独身必見!婚活のためのWebAPI!!


この記事は、株式会社バルテック アドベントカレンダー用の記事となります。よろしくお願いします。

はじめに

みなさんこんにちは。
バルテック入社2年目の前原(のぶ)です!

最近、WebAPIについて調べる機会があり
おもしろいAPIを発見したので、紹介したいと思います。

そもそもWebAPIとは??

WebAPIって、聞いたことあるけどどんなものかわからない。。
という方もいるのではないでしょうか。

ざっくり説明すると

Web上で使用できる、誰かが作った便利な機能

のことです。
はい、ざっくりすぎますよね。

詳しく知りたい方は下記リンクか、グーグル先生に問い合わせましょう。すみません。。
Web API 【 Web Application Programming Interface 】

合コンサーチAPI

今回紹介するAPIは、合コンサーチAPIというものです。
これは、リクエストをURLに送ると
婚活パーティーがどこで・何時に・予約状況は?・内容は?等のデータを返してくれるという、WebAPIとしては非常にシンプルなAPIです。

簡単に使えて、婚活パーティー情報を取得できる!!
独身の身ならこれは使うべき!

ということで簡単にプログラムを組んで、実際に合コンサーチAPIを使用したWebアプリケーションを触ってもらいたいと思います。

合コンサーチAPIデモ

・・・
・・

Jquery + Ajaxでかっこつけて意気揚々とプログラムを組んでいたのですが
クロスドメイン制約というものに引っかかってしまったので
急きょPHPで実装しました。
下記リンクにデモを置きましたので、使ってみてください。

 合コンサーチAPI demo 

おわかりいただけたでしょうか。
都道府県を選択して、検索するボタンをクリックすると、婚活パーティー情報が表示されるはずです。

今回使用したPHPのソース(一部省略)はこちらです。

// POSTでデータが送信されたら
if(!empty($_POST['pref'])) {
  $pref = $_POST['pref'];

  // GETパラメータで都道府県を指定する
  $url = "http://goucon.jp/top/api/get?results=3&pref=" . $pref;

  // PHPで送信するcurlの準備
  $curl = curl_init();
  curl_setopt($curl,CURLOPT_URL,$url);
  curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);

 // curlを実行・レスポンスを受け取る
  $response = curl_exec($curl);

  // 返却されたxmlを格納する
  $result = simplexml_load_string($response);
}

GETパラメータで取得したいデータを指定してあげて(ここでは都道府県)、その後、curlコマンドを実行しAPI側にリクエストを送信 → レスポンスを受け取っているのがわかります。
これが一般的で、最もシンプルなWebAPIの使い方となります。

JqueryとAjaxで作ってみる

かっこつけてJquery + Ajaxで実装しようとすると、以下のようになります。(*注意* きちんと動作しませんがイメージとしてはこんな感じ)

<script>
$(document).ready(function($){
  $pref = $('[name=pref]');
  // セレクトボックスが変更されたら
  $pref.change(function() {
    // 選択された値を取得
    var prefVal = $pref.val();
    var url = "http://goucon.jp/top/api/get?results=3&pref=";
    var result = "";

    // 非同期通信でリクエストを送信
    $.ajax({
      type: "GET",
      url: url + prefVal,
    }).done(function(data) {
      result = data['result'];
    }).fail(function(data) {
      alert("データを取得できませんでした!");
    });
  });
});
</script>

こちらも、PHPで実装したやり方と同じで
GETパラメータを設定し、その後リクエストを送信 → レスポンスを受け取っています。

簡単ですね!!!!!!!!!

おわりに

今回紹介した合コンサーチAPIの他にも、ネット上にはいろいろなWebAPIが転がっています。
自分が興味のあるWebAPIを探し出し、それを使用してWebアプリケーションを作ってみるのもいいかもしれません。

また、WebAPIを使用する際は
各API毎に、守るべき注意事項がありますので、それに従って使用しましょう。(大体APIのドキュメントに書いてあるはず)

と、いうわけで今回は以上となります。
ここまで読んでくれた皆さま、ありがとうございました!

参考にしたサイト

Vagrant@WindowsでCentOS6.6の環境を構築!


はじめに

さあ開発を始めよう!!!
と、思い立ってごりごりプログラミングを書いていたのですが
コードを書く → サーバーにアップする → 動作確認 → エラー発生 → 修正 → サーバーにあpp.....

このループがめんどくさくなりました。
やっぱりローカルで1度確認したほうが効率いいですね。

ということでVagrantを構築したいと思います。
ローカル確認をするだけならXamppでもよかったのですが、
Vagrantなら一緒に開発をしている仲間と簡単に開発環境を共有できるメリットがあるので今回はVagrantにします。

って言ってもぼっち開発なんですけどね!

Vagrantを構築

必要なものをダウンロード

以下のサイトからVagrantと、VirtualBoxをダウンロード・インストールしておきます。
DOWNLOAD VAGRANT
Download VirtualBox

その後コマンドプロンプトを立ち上げ、作業フォルダまで移動します。

作業フォルダはvagrantとします。

cd c:\Users\○○(自分のユーザー名)\Desctop\
mkdir vagrant
cd vagrant

Boxの追加

VirtualBoxにBoxを追加します。
githubに、CentOS6.6用のBoxが用意されているので、ありがたく使わせていただきます。

vagrant box add centos66 https://github.com/tommy-muehle/puppet-vagrant-boxes/releases/download/1.0.0/centos-6.6-x86_64.box
vagrant box list

ボックス一覧にcentos66が表示されていれば追加完了です。

Boxの名前を変える

次はBoxの名前を変えます。
centos66のままでもいいのですが、味気ないので・・・
開発現場などではプロジェクト名にしたりするのかなと思います。

cd c:\Users\○○(自分のユーザー名)\.vagrant.d\boxes\
mv centos66 (変更したいbox名)

Vagrantの設定と起動

vagrantフォルダに移動し、VagrantFileを生成します

cd c:\Users\○○(自分のユーザー名)\Desctop\vagrant\
vagrant init (変更したbox名)

生成されたVagrantFileを編集します。
テキストエディタか、もしくはVimが入っていればVimで編集しましょう。

SSH接続の際に使用されるユーザー・パスワードの設定は vagrant/vagrant
使用するメモリサイズの設定は 1024MB、
ローカルネットワークのIPアドレスの設定は 192.168.33.29 で、
仮想マシンに接続するためのIPアドレスを指定しています。

また、今回は設定してませんが
VagrantとWindowsの共有フォルダの場所もVagrantFileに記述することで変更できます。

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure(2) do |config|
  config.ssh.username = "vagrant"
  config.ssh.password = "vagrant"
  config.vm.box = "(作成したBox名)"
  config.vm.network "private_network", ip: "192.168.33.29"
  config.vm.provider "virtualbox" do |vm|
    vm.customize ["modifyvm", :id, "--memory", "1024","--cpus", "2", "--ioapic", "on"]
  end
 
end

その後、vagrant up で仮想マシンを立ち上げます。

vagrant up

はい、立ち上がりましたでしょうか。
僕は、Virtual Box をインストールした後、PCを再起動していなかったためにエラーが出ていました。。。
最後の行にrun とか表示されていたら成功です!

Vagrantのコマンド一覧

無事Vagrantを起動することができたら、vagrant ssh で仮想マシンにssh接続できます。
vagrant sshができない場合は、tera term等で接続しましょう。

以下、Vagrantで頻繁に使用するであろうコマンド一覧です。

コマンド 詳細
vagrant up vagrantを起動する
vagrant halt vagrantを停止する
vagrant ssh vagrantにssh接続する
vagrant reload vagrantを再起動する
vagrant package オリジナルのBoxを作成する

おわりに

Vagrantは、簡単に導入出来るし便利ですよね!
個人で勉強に使ったり、チーム開発するときに使ったり・・・
いろいろな場面で活躍できます。
まだ使ったことがない人は是非!!!

というわけで今回は以上となります。
ありがとうございました。

参考にしたサイト

CentOS@CentOS6.7にGitを構築してみる


はじめに

みなさんこんにちは。のぶです。
そろそろ開発を始めたいなーということで、まずはその地盤づくり。
CentOSにバージョン管理システムであるGitを導入してみます。
基本ぼっち開発の予定ですが、Gitを使ってソースコードを管理するのは何かと便利ですよね。

Gitの構築

必要なものをインストールする

yum install git git-deamon git-all xinetd
chkconfig xinetd on
/etc/init.d/xinetd start

git-deamonとは、認証がいらないGitプロトコルでリポジトリにアクセスできるようにするもの。
xinetdとは、指定されたポートにアクセスがあると、あらかじめ設定しておいた情報をもとに対応したサービスを起動するもの。

インストール後、xinetdを起動する。

xinetdの設定

vi /etc/xinetd.d/git-daemon

service git
{
        disable         = no
        socket_type     = stream
        wait            = no
        user            = nobody
        server          = /usr/libexec/git-core/git-daemon
        server_args     = --base-path=/var/lib/git --export-all --user-path=public_git --syslog --inetd --verbose
        log_on_failure  += USERID
}

/etc/rc.d/init.d/xinetd restart

/etc/xinetd.d/にgit-daemon用の設定ファイルを作成し、再起動します。

リポジトリの作成

cd /var/lib/git/
mkdir public_git
mkdir public_git/test.git
cd public_git/test.git
git --bare init --shared

groupadd git
usermod -G wheel,git user(ユーザー名)
chown -R root:git /var/lib/git/

git用ディレクトリを作成し、そこにテストリポジトリを作成します。
その後、git操作用のグループを作成、git用のユーザーをgitグループに追加します。

Windows側の準備

以上でgitサーバーの構築は完了したのですが、今度はローカルの開発環境であるWindowsでgitを使用できるようにします。
今回は「私家版 Git For Windowsのインストール手順」のサイトを参考に、Git For Windowsを入れました。

Git For Windowsをインストール後

Git For Windowsをインストール後、ローカルの設定を行います。

mkdir gitProject
cd gitProject
git init
echo "Git Test." > test.txt
git add test.txt
git commit -m "First Commit"
git remote add test ssh://[user]@nobserver.net:[port]/var/lib/git/public_git/test.git
git push test master

Test用のディレクトリ、ファイルを作成し、コミット・プッシュまでを行います。
が、、いろいろつまりました。

  • ローカル側に ~/.ssh ディレクトリを作成、秘密鍵を登録しないと!
  • git remote add を間違えた!! → gitProject/.git/config の編集。
  • git push origin master コマンドでつまづく。。。 git push test master に変更

等です。。。
普段からGitを触ってないとてんぱりますね。

これでなんとか、Gitサーバー構築&ローカルからプッシュまでができました。
実践的に使用していく上でいろいろ設定等変えないといけない気がします。

ということで今回は以上です。ありがとうございました。

参考にしたサイト

SEO対策@静的ページを本気で検索上位にもっていく!


はじめに

みなさまこんにちは。のぶです。
今回は、僕の友人である「梛」のバンドのHPを検索上位にもっていこう作戦!ということで、まだまだSEOの初心者ではありますが本気でSEO対策を考えてみたいと思います。

対象となるHPはこちら
おはようございますOfficial Web Site
おはようございますOfficial Web Site

このサイトはすべて静的ページで、レンタルサーバーを使用している。との事。
それを踏まえてSEO対策を考える。
本気で考えるから、梛はすべて実施すること!

というわけではじめていきたいと思います。

1.TDKを設定する

サイトのソースを見ると、TOPページのKeywords以外はDKが設定されていないみたいなので、全てのページにDKを設定します。
TDKはHTMLのtitle,metaタグで設定することができる。

TDK@metaタグの書き方

この記事のTDKを書くならこんな感じです。

<head>
<title>SEO対策@静的ページを本気で検索上位にもっていく! | NobMemo</title>
<meta name="description" itemprop="description" content="超初級プログラマーのぶが、友人である「梛」のバンドHPを検索上位にするために本気で考えたSEO対策とそのやり方集!静的ページ・レンタルサーバーでHPを構築している方の参考になれれば幸いです。">
<meta name="keywords" itemprop="keywords" content="seo,seo対策,おはようございます,梛,hp,html">
</head>

このTDKを設定すると、以下のような検索結果が表示される。

TDK表示例

注意すべきこと

  • TDKはheadタグ内に書くこと
  • TDKの内容は、ぐぐって効果が高そうな内容にすること(上の例は適当なので)
  • TDKはすべてのページに書くこと
  • TDKのSEO効果については調べてね

2.パンくずリストの作成

パンくずリストは、SEO対策において重要視されているそうです。
現在のページがどのカテゴリのどのページなのかをリンク付きで表示することで、クローラー(グーグルボット:サイトのランキングを決めるロボット)がクロールしやすくなり、SEO効果が高いといわれています。
サイトを利用するユーザーがわかりやすい。という効果もあります。

パンくずリストの例

パンくずリストはこのサイトでも採用していて、下のような感じなものです。

NobMemo > SEO > SEO対策@静的ページを本気で検索上位にもっていく!」

おはようございますのニュースのページで実装するなら

<a href="http://ohayoband.com/" target="_blank">トップ</a> > <a href="http://ohayoband.com/news.html" target="_blank">ニュース</a>

こんな感じ・・・?と思ったけど、そもそもページ数がそんなにないので、SEO的に効果は薄いかも・・・?
とりあえずやっとこ!!!!!

3.404エラーページを設置する

これもページ数がそんなにないと効果が薄いかもしれない。。けどやっておきましょう。
404エラーページとは、ユーザーがアクセスしたURLの先にファイルが見つからなかった時のエラーページのこと。
これをデフォルトのままにしておくと、クローラーが404ページに来てしまった場合、そこでサイト内の巡回が終了してしまい。他のページにクロールすることができなくなってしまう場合がある。とのこと。

設置してみよう

404エラーページをオリジナルのものにするには、.htaccessファイルで「存在しないURLの場合、このページに飛ばします。」という記述をする。
.htaccess ファイルはおそらくドキュメントルートディレクトリにあるはず。
そこに、下記の記述を追記する。

ErrorDocument 404 /404.html

そして、そのディレクトリに404.htmlファイルを設置するとオリジナルのエラーページにいけるはず。。

404.htmlの内容は・・・

404.htmlの内容はクローラーがそこで巡回を終了してしまわないようにしておく必要があるので、サイトと同じヘッダー・フッターを設置しておくといいかもしれません。
おはようございますのサイトならトップページへのリンクのみでもいいのかな。。
また、サイト利用者がわかりやすいように、404.htmlのコンテンツ内に「指定されたURLは見つかりませんでした。もう一度URLを見直してください。」的な文言も入れておきましょう。

あと、エラーページのデザインはサイトのデザインと同じ感じにした方がいいらしいです。

4.Googleウェブマスターツールを使おう

Googleウェブマスターツールとは、グーグルと相性のいいサイト作りに役立つツールです。
下記リンクをクリックし、ログイン後、プロパティを追加ボタンからおはようございますのサイトを登録しましょう。

ウェブマスター – Google

登録のしかたはグーグル先生に聞いてね・・

ウェブマスターツールに登録後、いろいろいじくりまわしていくと、「http://www.nobserver.net/ の検索パフォーマンスを改善できます」とツールから言われるので、そのリストをこなしていくだけでSEO対策につながるみたいです。

5.sitemap.xmlを設置しよう

sitemap.xmlとは、クローラーにどんなページがあるのかを知らせて、効率的にクロールしてもらうためのファイルです。
これもページ数が少ないと効果は薄いかもしれないが、やっておきましょう。

おはござのサイトのsitemap.xmlはこんな感じになるはず。

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>
<url>
<loc>http://www.ohayoband.com/</loc>
<lastmod>2015-09-01</lastmod>
<changefreq>never</changefreq>
<priority>1.0</priority>
</url>

これをベースにきちんと全ページを記述し、sitemap.xmlファイルを作成後、ドキュメントルートに配置しましょう。
その後、Googleウェブマスターツールにログインし、サイトマップを追加してあげましょう。

6.robots.txtを設置しよう

robots.txtとは、クローラーにアクセスして欲しくないファイル・ディレクトリを記載したりすることができます。
これは、設置するだけでSEO効果が少し上がるとか聞いたような聞いていないような・・・

というわけでrobots.txtファイルを書いていきます。

User-Agent:*

Sitemap: http://ohayoband.com/sitemap.xml

これだけで多分大丈夫。
あとはこれをドキュメントルートに設置しておきましょう。

また、ウェブマスターツールを見ると、たまにクローラーが予期しないURLを巡回している場合があるので、それをブロックしておくといいかもしれません。

7.Googleアナリティクスを使おう

Googleアナリティクスとは、主にサイトへのアクセス数・CVR・どんな検索ワードで来たのか・・・等、サイト運営・改善する際に便利なデータを表示し、分析できるツールです。
下記リンクからおはござのサイトを登録しましょう。

google.com - Google アナリティクス‎

Googleアナリティクスの活用

Googleアナリティクスを使用するとサイトに関するいろいろなデータを見ることができます。
その活用方法の1つが「検索キーワード」!

例えば、サイト利用者がどの検索キーワードで来たのかを調べて「おはようございます 梛 使っているギター」でめちゃくちゃアクセスされてる!!!とします。
それを見た梛が、「僕の使用しているギターはこれです!」というコンテンツを作成し、サイト利用者が求めている情報を適切に追加することでアクセス数のアップを図ることができます。

Googleアナリティクスは 分析 → 対応 → 結果 → 分析 → 対応 を繰り返していくことでよりよいサイト作りをしていこう!というツールです。多分。。。

7.ツイートするボタンを配置しよう

おはようございますのバンドの方々はおもにツイッターでファンとかとやりとりしているっぽい?と思ったので、ツイートするボタンを設置しましょう。
狙う効果としては、アクセス数アップ、被リンクの効果です。

被リンク効果は、
aタグにrel="nofollow"(クローラーにこのリンクはスルーしてください。と命令するもの。多分)がついているのでSNSサイトからの被リンク効果はないだろうと思うのですが、「SNSからの被リンク効果はあり?ノーフォローと検索エンジン評価について」のような記事もちょくちょく見るので一応・・・・

ツイートするボタンの設置方法はTwitterボタン | About このページにいき、いろいろな設定を入力後、作成されたソースをサイトのページに張り付けるだけです。

簡単なのでぜひ!

これは別件ですが、他にも、ツイートのタイムラインを自分のサイトに埋め込めたりするので、「バンドのTwitter」をリンクじゃなくてタイムラインで表示させたりして、見栄えをよくするのもありかも。

8.その他細かいSEO対策

その他の細かいけど効果があるかもしれないSEO対策として

見出しをきちんと設定する

今、おはござのページの見出し(ニュース・ディスコグラフィ等)はh3タグが使用されていますが、適切に設定することでクローラーにわかりやすいサイトにしよう!というもの。
詳しくはこちら「見出しタグの使い方と絶対に知っておくべき注意点

リンクを適切に

これはこれからサイトを改造していくときに注意しておくべき点として、aタグを適切に設定しようというもの。

例えば、
 「詳しくはこちら」 というリンクと 「詳しくはこちら -> Yahoo Japan!
というリンクでは、前者は「こちら」という文言にリンクが張られているので、リンク先がどういうサイトなのかがクローラーが判断しづらくなる。後者は「Yahoo Japan!」という文言にリンクが張られているので、このリンク先はYahooであるとクローラーが判断でき、どういうサイトなのかがわかる。

少し細かいけど、クローラーにもユーザーにもわかりやすいサイト作りをしよう。という作戦でSEO効果を狙っていく。

どこかで見た気がする情報だけど思い出せないので信憑性は薄い。。。。。。

おわりに

自分が持っている知識を本気で振り絞ってSEO対策をつらつらと書いていきました。
これ全部やって、結果が何も変わらなかったらごめんなさい。検索順位が落ちたらもっとごめんなさい。
ていうかここに書いてある情報がガセだったらさらにごめんなさい。

みなさま「おはようございますOfficial Web Site」をよろしくお願いします。

ということで以上です。ありがとうございました。

参考にしたサイト

WordPress@SEO対策!TDKを設定しよう!


はじめに

みなさまこんにちは。のぶです。
今回は、SEO対策実践編。ということで、前回の記事

WordPress@SEO対策について考えてみよう!

で調べたSEO対策を実際に施してみたい思います。
WordPressではSEO対策のプラグインとして「All in One SEO Pack」という優秀なプラグインがあるそうなので、それをインストールしておきます。

TDKを設定しよう!

・ そもそもTDKとは?

T Titleの略 検索エンジンで検索をしたときに表示される サイトのタイトル
D descriptionの略 検索エンジンで検索をしたときに表示される サイトの説明
K keywordsの略 主要キーワードを目立たせるために用いるもの
あまりよくわかってないです・・

つまり、TDKを設定することで、このサイト(ページ)がどういう内容のものなのか、どういう情報を持っているのかを検索エンジンや、検索者に教えるものです。

これを適切に設定すると、サイト利用者はわかりやすいですよね!

わかりやすい! = 優良サイトだ! ということで検索結果で上位になるんだと思います。。(適当ですみません。)
TDKはHTMLのmetaタグで設定することができます。
ページ毎にきちんと設定してあげることが大切らしいです。

・ 実際にやってみる

WordPressのダッシュボードから All in One SEO → General Settings を選択します。
ホームタイトルの欄でTDKのTを設定
ホーム詳細(description)欄でDを設定
ちなみに、僕が設定したのは以下の通りです。

T(タイトル):
NobMemo@初級プログラマー「のぶ」のてきとーな技術メモ

D(説明):
初級プログラマー「のぶ」がプログラミングや、ITスキル、その他いろいろな技術について学習したメモです。PHP、JAVA、インフラ回り、SEO対策などについて書いていく予定です。みなさまの参考になれますように。

K(キーワード):
NobMemo,PHP,SEO,サーバー,WordPress,ブログ,IT,プログラミング

何を設定したらいいのかよくわかりませんが、それっぽくしてみました。
時間をかけ解析・分析し、改良していくことが大事かもしれませんね!

さいごに

今回はTDKだけのSEO対策になってしまいましたが、
All in One SEO Pack の設定方法と使い方このサイトのページに乗っていることを1から順にやっていくとたいていのSEO対策ができました!SNS連携、サイトマップ・・・
All in One SEO Pack めちゃくちゃ優秀!さすがオールインワン!
次回は上記サイトに載っていないSEO対策をしようかな

というわけで以上です。ありがとうございました。

参考にしたサイト