読者です 読者をやめる 読者になる 読者になる

じゅむてっくブログ

"人力ななぴ"管理人jumのtechblog

railsふかぼり01:railsでWebAPIを叩く

jumtechです。

今回から始まった、ふかぼり企画。

railsとか、一行書いただけで裏側でものすごい処理をしていたりするので、 特に私のような初心者はちゃんと何が起こっているのか理解した上で使わないと、
ついついわかった気になってしまいがちです。

その裏側に光を当てて、 理解を深める企画です。

今回は、 railsでWeb APIを叩く機会があったので、 そのコードを深掘りしてみました。

用語解説

WebAPI

Webの技術を使って、外部サイトの機能や情報を取得するための手段。
GoogleMapをWebサイト上に掲載するときとかに使う。
特定のURLにパラメタ付きのリクエストを送ると、欲しいレスポンスが返ってくる。
Qiita:WebAPIについての説明

JSON

データの形式。
hashと同じく、keyとvalueが並んでいる。 XMLCSVなどと同じレイヤーの言葉。
Wikipedia:JSON

参考にした記事

Qiita:RubyでWebAPIを叩く
この記事を元に、railsで郵便番号から住所を表示するプログラムを作ります。

使用WebAPI

郵便番号検索API
郵便番号をリクエストパラメタに指定すると、
住所を返してくれるAPI
試しにブラウザに
http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060
と入れると、
生のJSON形式で結果が表示されます。

{
    "message": null,
    "results": [
        {
            "address1": "高知県",
            "address2": "南国市",
            "address3": "蛍が丘",
            "kana1": "コウチケン",
            "kana2": "ナンコクシ",
            "kana3": "ホタルガオカ",
            "prefcode": "39",
            "zipcode": "7830060"
        }
    ],
    "status": 200
}

このJSON形式の文字列を、プログラム内でいい感じに処理します。

下準備

  • rails new apitest
    テスト用のrailsプロジェクト作成
  • cd apitest
    ディレクトリ移動
  • rails generate controller address show
    addressコントローラーとshowアクションを生成
  • apitest/views/show.html.erbに結果を表示させるhtmlを書く
<p>
郵便番号: <%= @zipcode %>
</p>
<p>
都道府県: <%= @address1 %>
</p>
<p>
市区町村: <%= @address2 %>
</p>
<p>
町名: <%= @address3 %>
</p>
<p>
<!-- リクエストパラメタを表示-->
リクエストパラメタ: <%= @query%>
</p>
<!-- 生のjsonを表示-->
result: <%= @result%>
</p>
<p>
  <!-- エラーメッセージを表示-->
message: <%= @message%>
</p>

参考元記事のコードを移植

Qiita:RubyでWebAPIを叩く
- apitest/controllers/address_controller.rbに、APIを叩いてインスタンス変数に入れる処理を記述 - ログは取らずに、@messageに格納

# 以下のrequireは、railsの自動require機能により不要になる(!)
=begin
require 'net/http'
require 'uri'
require 'json'
=end
class AddressController < ApplicationController
  def show
    # hash形式でパラメタ文字列を指定し、URL形式にエンコード
    params = URI.encode_www_form({zipcode: '7830060'})
    # URIを解析し、hostやportをバラバラに取得できるようにする
    uri = URI.parse("http://zipcloud.ibsnet.co.jp/api/search?#{params}")
    # リクエストパラメタを、インスタンス変数に格納
    @query = uri.query

    # 新しくHTTPセッションを開始し、結果をresponseへ格納
    response = Net::HTTP.start(uri.host, uri.port) do |http|
      # 接続時に待つ最大秒数を設定
      http.open_timeout = 5
      # 読み込み一回でブロックして良い最大秒数を設定
      http.read_timeout = 10
      # ここでWebAPIを叩いている
      # Net::HTTPResponseのインスタンスが返ってくる
      http.get(uri.request_uri)
    end
    # 例外処理の開始
    begin
      # responseの値に応じて処理を分ける
      case response
      # 成功した場合
      when Net::HTTPSuccess
        # responseのbody要素をJSON形式で解釈し、hashに変換
        @result = JSON.parse(response.body)
        # 表示用の変数に結果を格納
        @zipcode = @result["results"][0]["zipcode"]
        @address1 = @result["results"][0]["address1"]
        @address2 = @result["results"][0]["address2"]
        @address3 = @result["results"][0]["address3"]
      # 別のURLに飛ばされた場合
      when Net::HTTPRedirection
        @message = "Redirection: code=#{response.code} message=#{response.message}"
      # その他エラー
      else
        @message = "HTTP ERROR: code=#{response.code} message=#{response.message}"
      end
    # エラー時処理
    rescue IOError => e
      @message = "e.message"
    rescue TimeoutError => e
      @message = "e.message"
    rescue JSON::ParserError => e
      @message = "e.message"
    rescue => e
      @message = "e.message"
    end
  end
end

実行

  • rails server -b 0.0.0.0
  • http://[host名]:3000/address/showにブラウザからアクセス
郵便番号: 7830060

都道府県: 高知県

市区町村: 南国市

町名: 蛍が丘

リクエストパラメタ: zipcode=7830060

result: {"message"=>nil, "results"=>[{"address1"=>"高知県", "address2"=>"南国市", "address3"=>"蛍が丘", "kana1"=>"コウチケン", "kana2"=>"ナンコクシ", "kana3"=>"ホタルガオカ", "prefcode"=>"39", "zipcode"=>"7830060"}], "status"=>200}
message:
  • apitest/controllers/address_controller.rb内のパラメタを"7830060"以外にして、結果が変わることを確認。
郵便番号:

都道府県:

市区町村:

町名:

リクエストパラメタ: zipcode=9999999

result: {"message"=>nil, "results"=>nil, "status"=>200}
message: undefined method `[]' for nil:NilClass

この例では、
存在しない郵便番号を設定。
HTTPのstatusは200(正常)だが、
存在しないのでresultsがnilで返ってくる。
(その後、nilに対してで値の取得をしようとしてundefined method `' for nil:NilClassのエラーが起きている。)

解説

(参考サイトのコード内コメントがすごく詳しいので、もはやあまり言うことないです)

ライブラリ読み込み

ruby用のコードでは明示的にrequireでライブラリを読み込んでいますが、
railsではなくても動きます。
railsでは未知のクラスが登場したら自動的にライブラリを読み込む仕組みがあるからです。
例えば

params = URI.encode_www_form({zipcode: '7830060'})

の部分でURIクラスが登場します。
このとき、自動でuri.rbの検索が走ります。
まずrubyの$LOAD_PATHを検索し、
なければrails側で設定されているautoload-paths(デフォルトでは、RAILS_ROOT/app/の中のディレクトリ)を検索するようです。
$LOAD_PATHを確認してみると、私の環境では - ruby -e 'puts $LOAD_PATH'

/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/did_you_mean-1.0.0/lib
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/site_ruby/2.3.0
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/site_ruby/2.3.0/i686-linux
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/site_ruby
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/vendor_ruby/2.3.0
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/vendor_ruby/2.3.0/i686-linux
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/vendor_ruby
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/2.3.0
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/2.3.0/i686-linux

となります。
この中の、
/home/vagrant/.rbenv/versions/2.3.1/lib/ruby/2.3.0
を見ると、uri.rb、json.rb、net/http.rbが全て見つかります。
Qiita:Railsの自動読み込みについて
RailsGuide:Autoloading and Reloading Constants

URIを構築

rubyの標準ライブラリのuri.rbを使います。
まず、

params = URI.encode_www_form({zipcode: '7830060'})  

で、郵便番号検索APIのリクエストパラメタであるzipcodeをhash形式で指定し、
"zipcode=7830060"という文字列に変換しています。
今回はパラメタが一つで半角英数なのでURI.encode_www_formを使う恩恵はあまりないですが、
特にパラメタの値に日本語を含んだりすると、
ハードコーディングするのは大変なので必須になります。

その後、

uri = URI.parse("http://zipcloud.ibsnet.co.jp/api/search?#{params}")  

で、郵便番号検索API用のURI文字列をURI::HTTPクラスに変換し、
uriに格納します。

URIモジュール等の詳しい仕様は、以下。
Rubyリファレンスマニュアル:URIモジュール Rubyリファレンスマニュアル:URI::HTTPクラス

WebAPIを叩く

rubyの標準ライブラリのnet/http.rbを使います。

response = Net::HTTP.start(uri.host, uri.port) do |http|

以下で、先ほど構築したURIに対してHTTPリクエストを投げます。
doでブロックを与えている理由は、
Net::HTTPの仕様で、ブロックが終わった時に接続を自動で閉じてくれるからっぽいです。

ブロックを与えた場合には生成したオブジェクトをそのブロックに 渡し、ブロックが終わったときに接続を閉じます。このときは ブロックの値を返り値とします。

「ブロックの値を返り値とします」って言っている割に、returnとかしなくていいのかよと思いますが、
ブロックの仕様で、最後に評価された値(ここでは、"http.get(url.request_url)")が自動で返されるみたいです。
rubyすごい。
というわけで、
無事にresponseに郵便番号検索APIから戻って来たレスポンスが格納されます。
Net::HTTPの詳しい仕様は、以下。
Rubyリファレンスマニュアル:Net::HTTP

取得したJSON形式の文字列を加工する

JSON自体はWebAPIとは直接関係ないですが、
WebAPIのレスポンスはJSON形式であることが多いようです。
rubyの標準ライブラリのjson.rbを使います。

@result = JSON.parse(response.body)

まず、
Net::HTTPResponseのインスタンスであるresponseから、
実データであるbody要素を取り出しています。

{
    "message": null,
    "results": [
        {
            "address1": "高知県",
            "address2": "南国市",
            "address3": "蛍が丘",
            "kana1": "コウチケン",
            "kana2": "ナンコクシ",
            "kana3": "ホタルガオカ",
            "prefcode": "39",
            "zipcode": "7830060"
        }
    ],
    "status": 200
}

JSON.parse()は引数にJSON形式の文字列を取り、
Rubyのhashを返します。

{"message"=>nil, "results"=>[{"address1"=>"高知県", "address2"=>"南国市", "address3"=>"蛍が丘", "kana1"=>"コウチケン", "kana2"=>"ナンコクシ", "kana3"=>"ホタルガオカ", "prefcode"=>"39", "zipcode"=>"7830060"}], "status"=>200}

これで、@resultに郵便番号検索APIの結果がhash化されて格納されます。
あとは、煮るなり焼くなり好きにします。

例えば、

@zipcode = @result["results"][0]["zipcode"]

では、@result内の"key=result"の値(配列[{...}])の、0番目の要素(hash{"address"〜200})の、"key=zipcode"の値を取得しています。
ややこしいですね。。。
ネストの深いhashから値を取得する方法については、
いろいろあるようです。
Qiita:RubyでネストしたHashやArrayから値を取り出す方法いろいろ
JSONモジュールの詳しい仕様は、以下を参照。
Rubyリファレンスマニュアル:JSON

エラー処理

なくても動きますが、
実務ではHTTPリスエストはエラー要因が多いので、
頑張った方がいいのだろう、きっと。
begin-rescueというrubyのエラー処理構文(javaでいうtry-catch)で、
Errorの内容ごとに処理を書いています。
また、HTTPリクエストは返ってきたけど、状態がNet::HTTPSuccessではないケースについては、

case response

で振り分けを行っています。

まとめ

requireしなくてもいい理由をめっちゃ調べたら時間かかった。
WebAPIを組み合わせたら凄いアプリが簡単にできるから頑張ろう(小並感)。

プログラミング学習サイトとしてのpaiza

jumです。

最近、転職サイトをよく読みます。(意味深)

paizaを初めてちゃんと使ってみたら、
プログラミング学習サイトと化していました。

プログラミング初心者とか、特定の言語の初学者が、
とりあえず問題解きまくって手を慣らしたいというときに、
重宝しそうです。

(以下、2016/08/14現在の情報)

paizaのメニュー

ヘッダメニューは以下のような感じです。
プログラミング学習部分が2/3くらいを占めています。

マイページ

オススメ求人、スキルチェックの実績

エンジニア求人

求人検索

気になるリスト

「気になる」をしたりされたりした求人

スキルチェック

S〜Dランクまでの問題が、100問以上ある

動画学習

ちゃんとしたドットインスt(ry

転職ガイド

読み物

「スキルチェック」の特徴

実績とかあってゲームっぽいので、
この週末ずっとやってました。

私でもAとか解けるので、
そんなに難しくないです。

問題形式

AtCoderとかのプログラミングコンテストに近い(

平均回答時間/問(だいたい)

  • ランクD:5分
  • ランクC:20分
  • ランクB:40分
  • ランクA:80分
  • ランクS:90分

対応言語

「動画学習」の特徴

なんと、プログラミング学習用の動画コンテンツがあります。
主に初心者向けで、

  1. paizaで勉強
  2. paiza内でのレベル上げ
  3. paizaで就職

ということができてしまうということらしいです。
す、すげぇ。

無料の入門編がある言語

ドットインストールとの違い

  • デフォルトで女性ボイス(!)
  • 良くも悪くも、動画がスライド形式でちゃんとしている
  • ブラウザ上に開発環境がある
  • 一部、視聴自体が有料の動画がある(600円/月)

paizaを使うべき人

プログラミング始めたいけど、何を作ればいいかわからない人

とりあえず興味ある言語の入門動画を見て、
その言語でスキルチェック問題を解きまくる。

新しい言語に慣れたい人

その言語でスキルチェック問題を解きまくる。

転職したい人

ランクAとかSの中で簡単な問題を選んで、頑張って解く。
その後、物理で殴る。

まとめ

「◯◯のドットインストール見といて」が、
「◯◯でpaizaのランクA問題全部解いてみて」とかに変わるかもしれない。

初心者が苦しんで学ぶためのRails開発環境構築(保存版)

SIerのSE歴1年目のjumです。

RailsでWebアプリを作ろうと、ローカル開発環境の構築を始めて2日、ようやく"Welcome aboard"画面を表示できました。

この苦しんだ2日間を無駄にしないために、初心者におすすめのRails環境構築方法をまとめます。 PCはMacを想定していますが、Windowsの人も得るものはあるはず。

初心者が陥りやすい問題点

"Rails 環境構築"などでググると、"コマンド一発で環境構築できる!"みたいなQiitaの記事がたくさん出てきます。

よっしゃこれ読めば簡単やん、となります。

どっかーとか、しぇふとか、難しい単語を読み飛ばして、掲載されたコマンドを順に実行します。

エラーが出ます。ググってもどのツールで起こったエラーかすらよくわかりません。 情報が古くて、ツールの仕様が変わっていたりもします。 死にます。

初心者が心に深く刻むべき3つの指針

このように、いきなりよく分からないツールを使おうとすると、ライブラリのバージョン違いやホストOSの環境の違いから自分の理解を超えたエラーが発生し、詰みます。

あるいは、偶然上手くいっても何の学びにもなりません。

われわれ初心者は、以下の3つの指針を心に深く刻み付けましょう。

  • なるべく最小構成で構築する
  • 同じ環境をもう一度構築できるようにする
  • わかるコマンドしか打たない

なるべく最小構成で構築する

最近話題だからといって、いきなりDockerとか使い始めると死ぬということです。(自戒)

最低限の機能を持ったツールで始めた方が、出てくるエラーが初心者でも手に負えることが多いです。

同じ環境をもう一度構築できるようにする

再現性がない環境で開発をすると、ちょっと一から環境作り直したい、ということができなくなります。

うろうろと悩みながら環境構築をしつつ、何をしたかのログをしっかりとりましょう。

ログを取ることで、忘れた頃に復習もできますね。

1ヶ月後の自分でも同じ環境が構築できるような環境構築手順メモを作ることを、目標の1つにします。

わかるコマンドしか打たない

Qiitaの記事から、魔法のようなコマンドをコピペし続けても、何の学びにもなりません。

何を目的としたコマンドかが分からなければ、出たエラーの本質的な原因を特定することはできません。

必要なコマンドが何かをググって、その意味をググって、本当に必要だと思ったら実行する、を繰り返しましょう。

手順1. VagrantVirtualBoxをインストール

ローカル開発環境はVirtualBoxVagrant仮想マシン上に構築します。

理由は、ホストOSに直に環境を作ると、再現性が低くなるからです。

環境構築のたびに、毎回OSを再インストールするというなら、止めませんが。

手順2. boxを決める

http://www.vagrantbox.es/で、使うboxを決めます。

良さげなOSとバージョンを調べて、ProviderがVirtualBoxとなっているboxの中からノリで決めます。

私はUbuntuにしました。 CentOSとかもよく聞きますね。

Linaxディストリビューションの系統によってパッケージ管理用のコマンドなどが微妙に違うようです。 yumとapt-getとか。

手順3. Vagrant addからVagrant sshまで

コマンドプロンプトで作業ディレクトリに移動し、Vagrant仮想マシンを立ち上げます。

同じVagrantfileを使い回すなら、今後はvagrant up以降の手順を繰り返します。

手順4. rubyrailsのバージョンを決める

rubyrailsのバージョンを決めます。

rubyrailsもバージョンによって仕様がかなり違うようなので、新しすぎて最新の仕様に基づいた情報がネットに少ないこともありそうです。

ついでに、DBに何を使うか(SQLiteMySQLなど)も気分で決めます。

手順5. rubyrailsのインストールや開発作業に必要なライブラリをインストールする

apt-getとかyumとかgit cloneを使って、必要なライブラリを揃えていきます。

  • 必要なライブラリを調べる/考える
  • そのライブラリのインストール方法や設定方法を調べる
  • 実行する
  • エラーが出たら、エラーメッセージでググる/エラーログを読んで対処を考える

以上の繰り返しに苦しみながら、railsの環境構築について学んでいきます。

まっさらなOSに対して自分はどこにどのように手を加えたのか、evernoteなどに記録していきます。

インストール中の待ち時間は、各ライブラリの役割や、各コマンドの意味を調べてそれもログに加筆します。

手順6. 共有フォルダでrails newする

Vagrantは、ホストOSとゲストOSの間に共有フォルダをもちます。

そこにrailsのソースファイルをおけば、ホストOSの好みのエディタでゲストOS内のソースが編集できるわけです。

そのため、ゲストOSのターミナルで共有フォルダに入り、rails newします。

手順7. 動作確認

無事にrailsのプロジェクトをnewできたら、さっそく動作確認です。

  • rails server --binding=[IP]:Vagrantfileで設定したIPに紐付けてサーバ立ち上げ

ホストOSのブラウザで、"http://[IP]:[PORT]"とアドレスバーに入れれば、Railsのデフォルト画面が表示されるはずです。

手順8. 作業ログを整理する

復習も兼ねて、作業ログを読み直します。

もし順番を変えたくなったり、コメントを書きたくなったら、適宜手を加えます。

1ヶ月後の自分がそれを見て同じ環境を構築できるか?を基準にするといいでしょう。

われわれは想像を超えて忘れっぽいです。

環境構築にはとっとと慣れて楽しいRailsライフを!

偉そうにつらつら書いてきましたが、ここは2日間の苦しみの末にたどり着いた境地です。

環境構築は辛いですが、慣れればやることは単純です。

初心者のうちに十分苦しんで、自分なりに楽な方法を模索していきましょう。

CSSを編集して、オリジナルテーマではてなブログを開設しました!

初めまして、
jumです。

システムエンジニアとして働きつつ、
『人力ななぴ』という生活ノウハウサイトを運営しています。

jinriki-nanapi.net

生活ノウハウサイト『人力ななぴ』

現在の仕事では、
JavaCOBOL(笑)で業務アプリケーションの保守をしています。

このままだと死にゆく技術と心中する気しかしないので、
プライベートなプロジェクトや勉強で細々と技術的なポートフォリオを広げています。

『人力ななぴ』もその一つです。

完全にnanapiにけんかを売ったようなタイトルですが、
けんすうさんのブログ投稿とか好きです(露骨な保身)。

nanapiってスポット的にノウハウを探すにはとてもいいサイトだと思うんです。

ただ、
自分の生活を根本から変えたい!効率化したい!ってなると、
もっと1つの思想の下で、体系化されたノウハウ集みたいなものの方がいいのかなと。

で、探しても見つからなかったので、
自分で作るかーとなって作ったものです。

nanapiはクラウドソーシングで記事を集めて1000人力とかで作られていますが、
こっちは1人力じゃーということで、
1人力ななぴを略して"人力ななぴ"です。

本家nanapiにタイトル変えろと言われたら、
インクリメントして"人力はちぴ"にしますね。

2016年2月にオープンした人力ななぴは、
ほぼ初めて触るwordpressで無謀にも自作テーマのWebサイトを構築し、
今もシンプルすぎて不安になる出来栄えになっています。

まあ、私の成長に合わせて、
数年(数十年?)かけて少しずつ良くしていきましょうねー。

faviconを設定したのになぜか反映されないのが悩みです。

ブログを始めた理由

Webサイト持ってるならそっちで情報発信すればブログなんていらない、
そう思っていた時期もありました。

しかし、
人力ななぴは生活ノウハウサイトなのでそれ以外のことを書くとアイデンティティが薄まるし、
あくまでもブログじゃなくて一般のWebサイトとして運営したかったのです。

ガチガチの教科書みたいな文体なので、
ゆるーく雑に書きたいことを書く感じでもないですし。

でも、日々学んでいく技術的なことを記録、発信したいという欲求もあり、
全くべつのドメインでブログを持つことにしました。

オリジナルテーマのはてなブログ

はてなブログにしたのは、
はてなが好きだからです。

はてブホッテントリは毎日目を通しています。

既存のテーマでもよかったのですが、
どうせ人力ななぴと同様、シンプルなデザインにしようと思っていたので、
オリジナルテーマで始めました。

オリジナルテーマと言っても全然たいしたことはしていなくて、
はてなが公開しているサンプルテーマのCSSを落として、
気になるところをちょこちょこ直しただけです。

他の人が使えるように、はてな上に公開することもできるようですが、
自分だけが使う想定なので、特に公開もしていません。

超初心者向け、はてなオリジナルテーマ作成手順入門

初心者がはてなでオリジナルテーマを作る手順をさっくり説明します。

1. オリジナルテーマ制作の手引きを読む

はてな公式の、制作手引きに目を通します。

help.hatenablog.com

よくわからないところは飛ばして、
「テーマを作成する準備」とかを確認します。

2. はてなでテストブログを開設する

テーマ確認用のテストブログを作ります。

はてなダイアリー

公開範囲を「自分のみ」にし、
たとえCSSをぶっ壊して一時的にグロいデザインになっても、
世界中の人に見られないようにします。

今後も本番用ブログのデザイン変更をしたいときは、
テスト用ブログで試してから、コミットするのがいいのでしょう。

3. サンプルエントリーを投稿する

はてな公式のサンプルエントリー用投稿文をコピーして、
テストブログに新しい記事として投稿します。

サンプルエントリーでは意図的にHTMLの要素が網羅されているので、
CSS変更がどう反映されるかをもれなく確認できるわけです。

help.hatenablog.com

4. サンプルテーマをローカルにコピーする

はてな公式のサンプルテーマがgithubに公開されているので、
ローカルにコピーします。

.cssと.less(cssを構造化したり変数が使えるようにしたやつ)の両方がありますが、
対して大掛かりな変更する予定もないので、
コンパイルが必要な.lessはやめて、.cssを使います。

未熟すぎてgithubとかよくわからないのですが、
CSSが表示された領域の右上のRawボタンを押すと、
生のCSSが表示されます。

それを全選択、コピーし、
適当なテキストエディタを立ち上げて貼り付け、
blog.cssなど適当な名前(以下、blog.cssとする)で、適当な場所に保存します。(適当)

github.com

4. テストブログにサンプルテーマを適用する

テストブログの設定画面を開き、
「デザイン」の項目をクリックします。

すると、デザイン変更用のサイドバーと、
実際のテストブログ画面が表示されます。

サイドバーのスパナマークを選び、
「デザインCSS」をクリックすると、
現在のCSSが表示されます。

f:id:jum_jinrikiNanapi:20160703084333p:plain

ここを変更して、
サイドバー上部の「変更を保存する」ボタンを押すと、
右のテストブログに反映されるという流れです。

blog.cssのサンプルテーマを全選択、コピーし、
テストブログのcssを上書きしてから、「変更を保存する」を押します。

5. cssを編集してオリジナルテーマを作る

いま設定画面に表示されているテストブログ画面が、
サンプルテーマのデザインとなります。

このデザインを見ながら、 1. 変えたいところを見つける 2. blog.cssを編集する 3. テストブログにcssを適用する を繰り返して、自分のイメージするデザインに近づけていきます。

私も含め、初心者が一番難しく感じるのは、
ある場所のデザインを変えたいけど、
cssのどこをいじればいいかわからないという点だと思います。

そんなときは、
Google Chromeでテストブログを表示し、
デザインを変えたい箇所を選択した状態で、
右クリック→「検証」を押します。

すると、
あら不思議、
htmlの該当箇所と、そこに適用されているcssが下に表示されます。

f:id:jum_jinrikiNanapi:20160703090213p:plain

慣れた人には当たり前の機能ですが、
初めて見たときは、こんなことできるんか!?と感動ものでした。

これを見ながら、
class名や要素名でblog.css内を検索し、
修正、反映して、
思った通りにデザインが変わるかを検証します。

地道な作業を繰り返し、
自分の目指すテーマに近づけていきます。

そもそもcssわからん!っていう人は、
ドットインストールでも見ながらポチポチcss書いて慣れましょう。

http://dotinstall.com/lessons/basic_css_v3dotinstall.com

6. 本番ブログにテーマを適用する

テストブログで大体のデザインができたら、
本番ブログを開設して、
作成したcssを適用します。

ブログを運営する中で気になる点も出てくると思うので、
最初に完璧なcssを書こうとせずに、
8割の満足度のものができたら、
とっとと本番ブログを作りましょう。

css適用手順は、
テストブログに適用したときと全く同じです。

ブログの公開範囲を「すべての人に公開」にし、
世界中に公開します。

以上で、
オリジナルテーマではてなブログを開設できました。

簡単ですね!!!
はてなのエンジニア様に感謝です。

これからもこのブログで、
主に初心者向けの技術情報を公開していきますので、
世界中のみなさま、今後ともよろしくお願いします。