<div id="wpmem_reg">
    <a name="register"></a>
    <form name="form" method="post" enctype="multipart/form-data" action="[url]" id="" class="form">
        <fieldset>
            <legend>[ページタイトル]</legend>
            <label for="[field-name]" class="text ">[text-name]<span class="req">*</span></label>
            <div class="div_text">
                <input name="first_name" type="text" id="[field-name]" value class="textbox" required="">
            </div>
           
            <!-- 中略 -->

            <div class="button_div">
                <input name="submit" type="submit" value="[Submit]" class="buttons">
            </div>
        </fieldset>
    </form>
</div>

<div id="wpmem_reg">のあたりをセレクタとして考えると良さそう。

タブナビゲーションを挿入。

今回は、タブ部分のHTMLはULで作成。<legend>の下に挿入しました。 jQueryは、タブが増減してもいいようにnumを定義する形で。

// button
     
    var btnnum = 6;
     
// set html

    var setli = "";
     
     for (var i=1; i<=btnnum; i++) {
        setli = setli + "<li class='btn-" + i + "'>書式" + i + "</li>";
     }
     $(baseclass + ' legend').after('<ul class="tablelist">' + setli + '</ul>');

タブ分けのために、任意のタグに任意のクラスをjQueryで差し込む。

WP-membersで付与されるnameなどをあてにしてもよかったのですが、コードが煩雑になるため、単純に「タグの並び順」でクラスを差し込みました。

tab01 loop では、「fieldsetの中の任意の順番のlabel、および、そのラベルの次のdiv」を「最初から16個」選択して、「tab01」「tab-all」というクラスを付与しています。

// base class
    
var baseclass ="#wpmem_reg";
    
// tab01 loop

    for (var i=1; i<=16; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab1 tab-all");
    }

 // tab02 loop

    for (var i=17; i<=40; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab2 tab-all");
    }

// tab03 loop

    for (var i=41; i<=51; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab3 tab-all");
    }

// tab04 loop

    for (var i=52; i<=56; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab4 tab-all");
    }

// tab05 loop

    for (var i=57; i<=66; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab5 tab-all");
    }

// tab06 loop
    for (var i=67; i<=76; i++) {
        $(baseclass + ' fieldset label:nth-of-type(' + i + '),' + baseclass + ' fieldset label:nth-of-type(' + i + ')+div').addClass("tab6 tab-all");
    }

切り替えの動作

    // セレクタ、tab2以降を隠す。
     for (var i=2; i<=btnnum; i++) {
        $(baseclass + ' .tab' + i ).hide();
     }
     
    // タブボタン、btn-1のスタイル
     $(baseclass + ' .tablelist .btn-1').css("background-color", "#eee");
     $(baseclass + ' .tablelist').css("list-style","none")

     // タブボタン全般のスタイル
     $(baseclass + ' li').css({ "display":"inline-block", "padding":"5px 0", "width":"13%", "border":"1px solid #eee", "text-align":"center", "border-radius":"3px", "margin-right":".5%", "cursor":"pointer" })
    
     // タブボタンがクリックされた時の動作
    $(baseclass + ' .tablelist li').on("click", function(){

        // クリックされたボタンのクラスを取得
        var s = '.' + $(this).attr('class');

        // クリックされたボタンのクラスから数字を拾って「.tab」に文字列連結。操作したいタブのクラスを取得
        var t = '.tab' + s.replace(".btn-", "");

        // 「.tab-all」クラスがついたタグを全部隠す。
        $(baseclass + ' fieldset .tab-all').hide();

        // 操作したいタブをfadeinさせる。
        $(baseclass + ' fieldset ' + t).fadeIn();

        // タブボタン全ての背景色を透明にする。
        $(baseclass + ' .tablelist li').css("background-color", "transparent");

        // クリックされたタブボタンの背景色を「#eee」とする。
        $(baseclass + ' .tablelist ' + s).css("background-color", "#eee");

    });

以上です。全部をつなげてjQuery(document).ready(function( $ ){...});に収めればOK。

WordPressなので書き出しは、 $functionとかではなく、 jQuery で始めるようにかく。

おわりに。

きっとかならずもっと良い書き方があると思います。

2017-12-05

cloud9をaptコマンドでphp5.6環境に。

cloud9 php apt

はじめに

子どもの謎作品。

f:id:koyacch:20171205121133j:plain

顔の下にごにょごにょ描いているのはお●んち●、らしいです。はひー。

cloud9のphpが古すぎる。

AWSからの買収の件でやる気がなかったのか、cloud9のphpのデフォルトは5.5.9。主流が7.1になろうとする昨今、これはちょっと古い場合があります。

使おうとしていたWordPress プラグイン、WooCommerce Stripe Gateway は、5.6以上が必須。なのでcloud9のphpをアップデートする必要がありました。

aptコマンドを使って行う方法。

あちこち検索し、試しつつ、まとめました。インストールするにはいろいろなコマンドがありますが、cloud9のOS、Ubuntuで使える、aptで行いました。

sudo add-apt-repository ppa:ondrej/php
sudo apt update
sudo apt-get -y install php5.6 php5.6-mcrypt php5.6-mbstring php5.6-curl php5.6-cli php5.6-mysql php5.6-gd php5.6-intl php5.6-xsl php5.6-zip

sudo apt-get install php5.6 と記されたものも多かったのですが、php5.6-mysqlがないままだと、WordPressに「お使いのサーバーの PHP では WordPress に必要な MySQL 拡張を利用できないようです。」とか怒られます。

そして最後に、モジュールを切り替えてリスタート。これ忘れるとphpはアップデートできても使うことができません。以前これにドハマリしました。

sudo a2dismod php5
sudo a2enmod php5.6
sudo service apache2 restart

おわりに。

深夜作業をしていると子どもがよく咳き込みます。自律神経の関係なのか空気が冷たくなるせいなのか、いつも心配になります。ちなみに僕は喘息持ち、カミさんは気管支炎持ちだったりします。

そんな気管支が弱そうな子どもの咳がきになったらコレですよ。

オムロン　コンプレッサー式ネブライザ NE-C28 【キャラクターアクセサリー付き ※色は選べません】

出版社/メーカー: オムロン
メディア: ヘルスケア&ケア用品
この商品を含むブログを見る

かわいいキャラクターがついてくるのもいい。我が家はゾウさんです。

吸入に使う液剤は病院で処方してくれます。なんといい時代。

2017-12-04

cloud9からherokuに静的ページをuploadする。

heroku cloud9

はじめに

こどもの謎アート。

f:id:koyacch:20171204161633j:plain

はてなってMarkdown使えたんですね。使う機会はほとんどないのですが、これはこれで勉強のためで使ってみます。

cloud9とheroku

開発環境としてのcloud9、プラットフォームとしてのheroku。かの有名なRails Tutorial で初めて知りました。使い方もこの記事での方法がベースとなってます。

railstutorial.jp

なんで静的ページアップすんの？

「テスト環境」が欲しかったから。

静的ページ制作であればDreamweaverで単純にFTPするんだけど、これだと

開発環境（ローカルDreamweaver）
テスト環境（なし！）
本番環境（クライアントのサーバ）

となってしまい、事前のチェックが本番環境というよくないことになってしまう。で、今は。

開発環境（Dreamweaver or cloud9）
テスト環境（heroku）
本番環境（クライアントのサーバ）

ということで、gitを軸に、herokuでテスト環境を作ったり、ローカルレポジトリからftpでクライアントのサーバにあげたりしています。

cloud9からherokuへ

herokuでアプリを作成する。

cloud9からコマンド叩いてます。

heroku create

heroku create [your-name]とかして、サブドメイン名をつけてもいいのだけど、自動でつけられる適当なものでも、クライアントから文句が出たことはないです。

ビルドパックを設定する。

herokuは作成するアプリケーションごとに適切なビルドパックの設定が必要です。この工程が必要ない場合もあるけど、静的ページの場合はいります。

必要はパックはこちら。

GitHub - heroku/heroku-buildpack-static: Heroku buildpack for handling static sites and single page web apps

コマンドインストールなら

heroku buildpacks:set 'https://github.com/heroku/heroku-buildpack-static'

もしくは、herokuのコンパネから設定 Personal > [your-app] > Settings : Add Buildpackをクリック。

f:id:koyacch:20171204153355p:plain

static.jsonを作成する。

最上位の階層に以下のコードを作成します。

{
  "clean_urls": true,
  "root": "./"
}

最低限はこれだけでいいと思います。任意にhtmlディレクトリを置きたい場合は、rootの設定を、

"root": "[your-dir]/"

とすればいいです。僕の場合、index.htmlを最上位階層とし、そのままFTPできる構造を保ちたかったので、

"root": "./"

としました。

pushする。

コミット&レポジトリへのプッシュをし終えたら

git push heroku

で、herokuにプッシュ。

さいごに。

技術ブログというと誰も知らないような知見をアップしないといけない気がしてて遠慮があったのですが、とりあえず日常の作業から発見したことをちょろちょろ書いていきます。

2017-12-01

AWS cloud9 発表で旧cloud9はどうなる。

cloud9 AWS Cloud9

こんにちは。

Twitterを眺めてたら僕のカミさんがこれReTweetしてて。

12月1日。今日は大安で一粒万倍日である。縁起がいい、宝くじ買いにいこう！と思う前に喧嘩はやめとこう、万倍になって返ってくると己を戒める質です。
ちなみに今月の一粒万倍日は14、26、27日。
— ぬえ (@yosinotennin) 2017年12月1日

そうかーなにか始めるのにいい日なのだなと思ってたら、以下のニュースである。

aws.amazon.com

え？え？触らない日はないくらい愛用している開発環境がAmazon傘下になっちゃったよ...。

ちょっと衝撃だし憂鬱になった。

あのAWSの、高機能かもしれないが何があるかわからないパネルに組み込まれてしまうのかと思うとうんざり。（S3しか使ってない）

AWS c9のスタート方法もチェックしたけどなんだかなあ。

c9のシンプルさが感じられない。

面倒臭そう...。

c9コミュニテイもやや紛糾気味。

あまりに突然だもんねえ

community.c9.io

が、いつかは引っ越ししなくてはいけないだろう。

旧c9の環境はあれこれと古くなってるし、新c9であればdeployもたぶんより簡単になってくれる...はず。

AWSのサーバーが単純にWebサービスのproductとして使えるのかなあ。

それができるのなら楽になるけど、よくわからないので、ちょくちょく覗いて詳しくなっとかないと。

引っ越しの模様はちょこちょこ書いていきます。

僕の年払い有料アカウントは来年の夏まで！

（追記）

だったら、愛読しているRails Tutorial はどうなるんだ？と思ってツイートしてたら、このような回答を受けました。

#Railsチュートリアル向けに以前作った Vagrant ファイルがあるので、現在こちらの準備を進めています 🔧 💨

Rails チュートリアルスターターキットhttps://t.co/SG4fvgZhT2

既に Cloud9 のアカウントを持っている場合は特に問題ないので、引き続き Cloud9 を使って読み進めることができます! 🏃💨 https://t.co/SI581o9iOf
— Yohei Yasukawa (@yasulab) 2017年12月1日

よかった。
とりあえずはローカルな開発環境で、となるらしい。

Code Fan 49

中年で開発に目覚めたおじさんの技術ブログ。WordPress・Rails・Cloud9などなど。

Google Search Consle 構造化データをWordpressで実現する。

子どものアート作品

はじめに

構造化データ実現のためのプラグイン

おわりに

WP-Members登録ページをjQueryでタブ分けする。

はじめに。

コード作成

まず構造をチェック

タブナビゲーションを挿入。

タブ分けのために、任意のタグに任意のクラスをjQueryで差し込む。

切り替えの動作

おわりに。

cloud9をaptコマンドでphp5.6環境に。

はじめに

cloud9のphpが古すぎる。

aptコマンドを使って行う方法。

おわりに。

cloud9からherokuに静的ページをuploadする。

はじめに

cloud9とheroku

なんで静的ページアップすんの？

cloud9からherokuへ

さいごに。

AWS cloud9 発表で旧cloud9はどうなる。