2018-01-25

【50歳からのRailsアプリ開発 vol.3】トップページのhtmlを作成。パーシャルで分割。

はじめに。

忘れていませんよRails。早いところ静的要素を仕上げて進みたいのです。今回はセマンティックなHTLを作成して、それをパーシャルを使って分割するところまで進めます。

工程

1. トップページのhtmlを作成する。

作成したいページのワイヤーフレームはこちら。

f:id:koyacch:20180109160809p:plain

これを横目に見ながらカタカタカタカタ。

<header>
    <h1>Name Surname</h1>
    <nav>
      <ul>
        <li>Your-menu</li>
      </ul>
    </nav>
</header>
<main>
  <seciton id="prof">
    <figure><img src="#" alt="Thumb"></figure>
    <h1>John Doe</h1>
    <p>San Fransico. CA</p>
    <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2>
    <dl>
      <dt>qualification</dt>
      <dd>14</dd>
      <dt>experience projects</dt>
      <dd>140</dd>
      <dt>files</dt>
      <dd>240</dd>
    </dl>
    <a href="#">MORE PROFILE</a>
  </seciton>
  <section id="feed">
    <h1>My Feed</h1>
    <section>
      <figure><img src="#" alt="your-feed-img"></figure>
      <dl>
        <dt>LIKE</dt>
        <dd>609</dd>
        <dt>COMMENT</dt>
        <dd>120</dd>
      </dl>
      <h2>Excepeteur sint occaecat.</h2>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
    </section>
    <a href="#">MORE FEED</a>
  </section>
    <section>
      <figure><img src="#" alt="your-feed-img"></figure>
      <dl>
        <dt>LIKE</dt>
        <dd>609</dd>
        <dt>COMMENT</dt>
        <dd>120</dd>
      </dl>
      <h2>Excepeteur sint occaecat.</h2>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
    </section>
    <a href="#">MORE FEED</a>
  </section>
  <seciton id="carrier">
    <h2>Carrier</h2>
    <section>
      <p>
        Excepteur sint occaecat cupidatat non proident, sunt.
      </p>
      <span>1 h ago</span>
      <figure><img src="#" alt="your-carrier-thumb"></figure>
    </section>
    <section>
      <p>
        Excepteur sint occaecat cupidatat non proident, sunt.
      </p>
      <span>1 h ago</span>
      <figure><img src="#" alt="your-carrier-thumb"></figure>
    </section>
    <section>
      <p>
        Excepteur sint occaecat cupidatat non proident, sunt.
      </p>
      <span>1 h ago</span>
      <figure><img src="#" alt="your-carrier-thumb"></figure>
    </section>
    <a href="#">MORE CARRIER</a>
  </seciton>
  <footer>
    <a href="#">CONTACT ME</a>
    <small>&copy;Name Surname</small>
  </footer>
</main>

はい、できあがり。最近5.2になったHTMLですが、最終的には構造的に正しい作りにしたいと思います。

2. ページごとに正しいtitleタグを出力するようにする。

RailsTutorialに従った内容です。

railstutorial.jp

説明を復唱しても意味がないので、結果を貼り付けます。

/app/app/views/static_pages/home.html.erb

<% provide(:title, "Home") %>
<header>
    <h1>Name Surname</h1>
    <nav>
      <ul>
        <li>Your-menu</li>
      </ul>
    </nav>
</header>

// 後方省略

/app/app/views/layouts/application.html.erb

<html>
  <head>
    <title><%= tag_title(yield(:title)) %></title>

// 後方省略

/app/app/helpers/application_helper.rb

// 前方省略

  # title tagを返すヘルパー
  def tag_title(title="")
    base_title = "MyResume"
    if title.empty?
      base_title
    else
      title + " | " + base_title
    end
  end

// 後方省略

この、application_helper の使いどころがいまいちわかっていません。とりあえず「html表示時のメソッドはここに書く」程度の理解です。。。

3. パーシャルでheaderを分ける。

今回のレイアウトでは、<header>``<footer>は使い回し。なのでパーシャルを使って分割します。

/app/app/views/layouts/_header.html.erb

<header>
    <h1>Name Surname</h1>
    <nav>
      <ul>
        <li>Your-menu</li>
      </ul>
    </nav>
</header>

/app/app/views/layouts/_footer.html.erb

  <footer>
    <a href="#">CONTACT ME</a>
    <small>&copy;Name Surname</small>
  </footer>

/app/app/views/static_pages/home.html.erb

<% provide(:title, "Home") %>
<%= render 'layouts/header' %>
<main>

// 中間省略

</main>
<%= render 'layouts/footer' %>

今日はここまでですー。とりあえず、gitにpushして、herokuに公開します。

github.com

Home | MyResume

さいごに

次回はBootstrapなどを用いてもうちょっとレイアウトを作り込みたいと思いますー。

2018-01-23

WordPressのfeedをphpで読みとりjQueryのajaxで静的ページに読み込ませる。

wordpress php jquery

はじめに

もっぱらWP漬けの毎日です。企業ウェブサイトの新着情報にWPのブログ記事を表示、リンクしたいという依頼があったので今回はこれです。

やりたいこと

簡単な図にしました。

f:id:koyacch:20180123112959p:plain

コード作成

1. feed.phpを使ってWPのフィード情報を読みこむ。

WPはフィードという「更新情報」を持っており、投稿またはカテゴリ毎のフィード情報をURLのみで読み出すことができます。

WORDPRESS Codexによると以下のような定義です。

フィードは、フィードリーダーがサイトにアクセスし、新規コンテンツを自動的に探し出し、その情報を別のサイトに投稿し更新できるようにする特別なソフトウェア機能です。

WordPress フィード配信 - WordPress Codex 日本語版

全ての投稿ならhttp://example.com/feed/ 特定のカテゴリならhttp://www.example.com/category/categoryname/feed

とかでOKです。便利ですね！これを使えば他のサイトにコンテンツを表示させることができます。

読み込みに使ったfeed.phpは以下のコードを使わせていただきました。ありがとうございました。改変せずそのまま利用しました。

github.com

2. topic.phpを使って読みこんだフィード情報をhtmlに整形。

フィード情報はxml形式なので、必要な情報を抜き取る必要があります。上記URLに参考があります。

echo 'Title: ', $rss->title;
echo 'Description: ', $rss->description;
echo 'Link: ', $rss->link;

foreach ($rss->item as $item) {
    echo 'Title: ', $item->title;
    echo 'Link: ', $item->link;
    echo 'Timestamp: ', $item->timestamp;
    echo 'Description ', $item->description;
    echo 'HTML encoded content: ', $item->{'content:encoded'};
}

上記を参考にすればうまくいきそうです。

利用方法、改変については、以下のブログを参考にさせていただきました。ありがとうございました。

kana-lier.com

こちらのファイルを、topic.phpとしました。

静的ページのfeed表示に必要な情報は、 [日付][カテゴリ][投稿タイトル][投稿URL]

ということで、合わせて書き換えをしております。コードは以下です。

topic.php

<?php

// wp url
$wp_url = [ your-wordpress-url ];

// feed.phpを読み込む
require_once [ your-feed.php-path ];
$feed = new Feed ;

// topics.jsからの変数
$get_category = htmlspecialchars($_GET['feedurl'], ENT_QUOTES, 'UTF-8');

// RSSフィードURLの取得
if ( $get_category ){
    $url = $wp_url."/category/".$get_category."/feed/";
}
else{
    $url = $wp_url."/feed/";
}

$rss = $feed->loadRss( $url ) ;
$num = 10;//表示させたい件数
$i=0;

foreach( $rss->item as $item )
{
    if($i<$num){
        $title = $item->title ;  // タイトル
        $link = $item->link ; // リンク
        $category = $item->category;
        $timestamp = strtotime( $item->pubDate ) ; // 更新日時
        $description = $item->description ; // 詳細
        $description = strip_tags($description);
        $thumbnail = trim($now_url,"/") . "blog/wp-content/themes/simplicity2/images/no-image.png";//画像がない場合の指定
        if( preg_match_all('/<img([\s\S]+?)>/is', $item->description, $matches) ){
            foreach( $matches[0] as $img ){
                if ($img === reset($matches[0])) {//最初の画像にマッチしたもの
                    if( preg_match('/src=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){
                        $thumbnail = $m[1];
                    }
                }
            }
        }
        // slugタグからカテゴリー取得
        if( preg_match('/<slug>[\w-]+<\/slug>/i', $item->description, $m) ){
            $slug = strip_tags($m[0]);
        }
        
        $list_data .= '<li><a href="'.$link.'"><div class="news_topic_body"><span class="date">'.date( "Y.m.d", $timestamp).'</span><span class="cat"><span class="icon '.$slug.'_icon">'.$category.'</span></span><br class="topic_br"><span class="topic_title">'.$title.'</span></div></a></li>';
        $i++;
    }
}

echo $list_data;

?>

3. フィード情報にサムネイルとカテゴリ情報を含めるようfunctions.phpに追記。

なお、WP標準では、フィードにサムネイルとカテゴリ情報がないため、WPのfunctions.phpでフックする必要があります。

functions.php追記

function rss_plus($content) {
    global $post;

    $category = get_the_category($post->ID);
    $cat_slug = $category[0]->slug;
    $content = '<slug>' .$cat_slug . '</slug>' . $content;

    if(has_post_thumbnail($post->ID)) {
        $content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
    }
    
    return $content;
}
add_filter('the_excerpt_rss', 'rss_plus');

4. 読込をコントロールするjQueryを作成。

url open 以下は、最初にページを読み込んだ時の動作です。

ローディングのためのhtmlを読み込む。
feedはデフォルトとする。
ajaxでfeedをtopic.phpに渡し戻り値を表示させる。

click list 以下は、ボタン(li)をクリックした時の動作です。

ローディングのためのhtmlを読み込む。
htmlのクラス名からfeedを選択する。
ajaxでfeedをtopic.phpに渡し戻り値を表示させる。

func_ajaxでajaxの動作をまとめています。

topics.js

$(function(){

  /////////// url open
  
  // loading html
  var loadhtml = [ your-loading-html ];

  // loading html
  $([ your-list-ul ]).html(loadhtml);
  
// default feed url
  feedset = "";

  // ajax
  
  func_ajax(feedset);

  /////////// click list
  
  // click
  $([ your-list-ul-li ]).click(function(){
    
  // loading html
  $([ your-list-ul ]).html(loadhtml);
   
  // get list class
  var btnclass = $(this).attr('class');
  var feedset = "";
  
  // branch feed
  if(btnclass == [ your-tab-all ]){
    feedset = "";
  }
  else if(btnclass == [ your-tab-cate1 ]){
    feedset = [ your-feed-cate1 ] ;
  }
  else if(btnclass == [ your-tab-cate2 ]){
    feedset = [ your-feed-cate2 ] ;
  }
  else if(btnclass == [ your-tab-cate3 ]){
    feedset = [ your-feed-cate3 ] ;
  }
  
  // ajax
  
  func_ajax(feedset);
  
  });
    
  //////////// function ajax
  
  function func_ajax(x){
    
    $.ajax({
      url: [ yout-topic.php-path ],
      data: {
        feedurl: x
      },
      dataType: 'html'
    })
    .done(function(data){
      $('.topic_list').html(data);
    })
    .fail(function(data){
      $('.topic_list').html('<li>no data</li>');
    });
    
  }

});

さいごに

.ajaxについて詳しく知らなかったので勉強できてよかった。こちらの記事を参考にしました。ありがとうございました。

www.koikikukan.com

js.studio-kingdom.com

ほれほれ、Railsはどうしたよ。とほほ。

2018-01-12

* WordPress Hook * login_head　[ログイン画面のロゴの差し替え]

wordpress action hook

はじめに

年明けの1週間。ほぼほぼ更新作業が続きました。 WordPressのアクション / フィルターフックはよく使いますがあれなんだっけ？となりがちなので、使う機会があれば書くことにしました。

login_head

アクションフックです。 Codex日本語版はこちら。

プラグイン API/アクションフック一覧 - WordPress Codex 日本語版

目的。例えばログインページのCSSデザイン変更

f:id:koyacch:20180112164042p:plain

よくある、この青丸ロゴを書き換えるという作業です。

こちらの構造は、単純にdisplay:blockにしたaタグに`background-image'で背景画像を貼っているだけです。

f:id:koyacch:20180112164305p:plain

なのでここをどうにかして上書きしてしまえば良いということですが、テーマで使っているstyle.cssでここに割り込むことはできません。

なので以下のアクションフックの出番です。

Codexの説明では

login_head　ログインページの head要素の読み込みが完了する直前に実行する。

とあります。なのでこのタイミングでstyleを割り込ませてあげれば良いということです。

functions.phpに記述。

function custom_login_css() {

?>

<style type="text/css">
h1 a {
background-image: url('任意の画像のフルパス')  !important;
width:320px !important;　
background-position:center center !important;
background-size:auto !important;
}
</style>

<?php

 }
add_action('login_head', 'custom_login_css');

割り込ませたいcssをfunction (任意の名称)(){}のカギカッコの中に書く。
ソースとしてして割り込ませたいので、必ずphpタグを終了させ、cssを書いてから再びphpを開始するようにする。echoにしてもいいです。好みで。
cssは、単純にwidth、heightそれぞれ84pxのブロックスペースに背景画像を張り込む、という風に書けば良いです。僕は大きくしたかったので幅も上書きしています。!importantはなくてもいけるかも。都度都度デベロッパーツールでご確認を。
最後の1行。login_headのタイミングでcustom_login_cssを実行、という意味になります。

ソースを確認するとこんな感じになります。

f:id:koyacch:20180112170734p:plain

無事に/headの前に差し込まれています。

さいごに。

特にないです。さむいですねー手がかじかむので仕事用の手袋が欲しいです。

2018-01-10

【50歳からのRailsアプリ開発 vol.2】大まかなルーティングを静的ページで仮作成。

Ruby on Rails cloud9 heroku railstutorial

はじめに

今日はあまり時間もないので、routingだけを作ることに。書き方もRailsTutorialを確認しつつ、進める。

準備

gemfileは、とりあえずRailsTutorialのままです。

Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

普通にbundle install --without productionしておきます。

ブランチもちゃんと分けておきましょう。 git branch -b static-routing

routes.rbの位置

ルーティングを決めるファイル。今回のRailsのアプリはappという名称で作成しました。なので、パスはapp/config/routes.rb

作成するパスを決める。

トップページ　/
マイフィード　/myfeed
経歴（履歴書) /carrier
コンタクト /contact

あとで増えるかもしれないし変わるかもしれないが、これで。

rails g で作成。

リソース作成すべきところばっかりなんだけど、ざっと感じを掴みたいので静的ファイルで作ります。ざっくりとviewを作成します。 home（トップページ）も予め入れて置いたほうがいいかな。

rails g controller StaticPages myfeed carrier contact home

自動的に作成されたroute.rb。

Rails.application.routes.draw do

get 'static_pages/home'
get 'static_pages/myfeed'
get 'static_pages/carrier'
get 'static_pages/contact'

end

意図したパスになるように修正する。

Rails.application.routes.draw do

  root 'static_pages#home'
  get  '/myfeed',    to: 'static_pages#myfeed'
  get  '/carrier',   to: 'static_pages#carrier'
  get  '/contact', to: 'static_pages#contact'

end

testの修正。

rails g controllerした時点で作成されたstatic_pages_controller_test.rbファイルを修正し、グリーンになるようにしておく。

require 'test_helper'

class StaticPagesControllerTest < ActionDispatch::IntegrationTest
  
  test "should get home" do
    get root_url
    assert_response :success
  end

  test "should get myfeed" do
    get myfeed_url
    assert_response :success
  end

  test "should get carrier" do
    get carrier_url
    assert_response :success
  end

  test "should get contact" do
    get contact_url
    assert_response :success
  end

end

簡単なテストなので飛ばしたくなりますが、我慢我慢。いちいちrails t叩くのは面倒なので、これまたRailsTutorialの手法通り、自動化しておく。

Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

きちんとグリーンになるのを確認。。。もちろんrails sで表示まで確認しておく。

さいごに。

コメント、マージ、プッシュしてデプロイまで。

git add -A
git commit -m "静的ファイルで仮ルーティング。テストの自動化。テストの作成と確認。"
git checkout master
git merge static-routing
git push
heroku create
git push heroku master

App

しかしすごいですよね。あっという間に見えるようにできちゃうのはやっぱRailsすげーって思います。

github.com