2017-11-09

jQuery でHTMLの操作 1

jQuery

jQueryでHTMLの操作について記載いたします。

1.テキストの変更

HTML要素に含まれるテキストを変更または取得するためにtext()を使います。

HTML

<p id="first">変更前</p>

f:id:nonaka-katuma-hal:20171109173709j:plain

text()を使ってテキストを変更するにはtext(...)の内側に変更後のテキストを記述します。テキストはダブルクォーテーションで囲みます。

jQuery

$("p#first").text("変更後");

f:id:nonaka-katuma-hal:20171109175432j:plain

2.テキストの取得

text()のかっこ内に何も記述しない場合はセレクターで指定した要素に含まれるテキストを取得できます。

jQuery

$("p#first").text();

id属性に「first」が設定されているp要素のテキストを取得できます。

HTML

    <p id="first">取得する文字列</p>
    <p id="second">変更前</p>

f:id:nonaka-katuma-hal:20171109175738j:plain

jQuery

$("p#second").text($("p#first").text());

$("p#first").text()　で　

<p id="first">～</p>

内のテキストを取得して $("p#second").text(...)で

<p id="second">～</p>

内を取得したテキストで買い換えます。

f:id:nonaka-katuma-hal:20171109180448j:plain

3.HTMLの変更

HTMLを変更するには、html(...)の内側に変更後のHTMLを記述します。

HTML

<p id="first">変更前</p>

f:id:nonaka-katuma-hal:20171109180831j:plain

jQuery

$("p#first").html("<h3>変更後</h3>");

id属性に「first」が設定されているp要素の内容が

<h3>変更後</h3>

に変更されます。

f:id:nonaka-katuma-hal:20171109181331j:plain

といった形で今後も引き続きjQueryで試したことをまとめてブログに記載したいと思います。

2017-11-07

Atomの便利なパッケージ minimapの紹介

Atom

Atomでいくつかのパッケージを入れてみて便利なものがあったので記載いたします。

minimap

前々から気になっていたのですが、スクロールバーが小さくて使いにくかったので「minimap」というパッケージを入れてみました。

f:id:nonaka-katuma-hal:20171107172914j:plain

右側の赤い枠の中の半透明部分がスクロールバーになっていてこれだけでだいぶ助かりますまたコードを縮小表示しているのでそちらも便利です。これがミニマップということでしょう。

この「minimap」の機能を増やすパッケージもあります。

minimap-find-and-replace

右側のミニマップに検索文字列を強調して表示します。

f:id:nonaka-katuma-hal:20171107173402j:plain

「FORMAT」という検索文字が存在する部分がミニマップで白く塗りつぶされています。

minimap-bookmarks

Atomでブックマークした場所がミニマップで表示されます。ちなみにブックマークは「ctrl」＋「alt」＋「F2」になります。

f:id:nonaka-katuma-hal:20171107174526j:plain

minimap-autohide

スクロールしている時以外はじゃまなので非表示にしたいときは「minimap-autohide」を入れればスクロールしていないときはミニマップが消えるようになります。

minimap-cursorline

カーソルの位置をミニマップで表示することができます。早速入れてみますと

f:id:nonaka-katuma-hal:20171107181238j:plain

この赤い枠の中の半透明のバーがカーソル位置なのですが、、、このままでは分かりにくいのでカーソルに色をつけます。

「minimap-cursorline」のパッケージにも書いてあるのですが以下のcssをユーザーのスタイルシートに記述します。

.minimap .cursor-line {
  background: green;
}

Settingsの「Themes」を選択して一番上の「Choose a Theme」の下に記載されています [You can also style Atom by editing your stylesheet] の[your stylesheet]がリンクっぽくなっているので押します。ファイルが開くので末尾にでもコピペすればカーソル位置が色付きで表示されます。

f:id:nonaka-katuma-hal:20171107182158j:plain

これで先ほどよりは見やすくなりました。

Atomのショートカットキーやスタイルシートの表示方法は以下のサイトを参考にしました。

Atomショートカットキー一覧（for Windows） | パソラボ

Atomエディタのスタイルシート - Qiita

2017-11-02

CakePHPで PHPUnitの導入

CakePHP

CakePHPでPHPUnitをインストールするまでに色々と苦労をしたので手順等を記載します。

1.とりあえず実行して何が足りないのか調べる

まずはルートディレクトリで

lib/Cake/Console/cake test app

を実行します。すると

include(PHPUnit/Autoload.php): failed to open stream
: No such file or directory in [CORE/Cake/TestSuite/CakeTestSuiteDispatcher.php, line 150]

といったエラーが出ました..

PHPUnitが用意されていないというような意味だと思い調べてみますと PHPUnitとcomposerが準備できていないことが原因なのでは？という記事が出てきました。なのでcomposerのインストールをします。composerとはPHPのパッケージ管理システムのことです。

# curl -sS https://getcomposer.org/installer | php 
# mv composer.phar /usr/local/bin/composer

続いてPHPUnitをセットアップしていきます。アプリケーションのルートディレクトリに移動します。

$ sudo vi composer.json

composer.jsonに以下を記載します。
----------------------------------
{
    "require-dev": {
        "phpunit/phpunit": "3.7.*"
    }
}
----------------------------------

$ sudo composer update

vendorディレクトリ内にautoload.phpが作られているはずなのでそのパスをbootstrap.phpに記述します。以下の一文を追記します。

require '/hoge/huga/vendor/autoload.php';

こちらで一応はテストコマンドが動くようになります。（エラーがまだありますが）

以下の記事を参考にしました。

phpunitのインストールで躓く - Qiita

2.Xdebugのインストール

先ほどのテストコマンドを実行すると

lib/Cake/Console/cake test app

以下のようになると思います。

Welcome to CakePHP v2.4.5 Console
---------------------------------------------------------------
App : app
Path: /home/vagrant/dev/hoge/app/
---------------------------------------------------------------
CakePHP Test Shell
---------------------------------------------------------------
App Test Cases:
[1] All
～
～
～
What test case would you like to run?

[q] >

適当な番号を選ぶとXdebugがインストールされていないというエラーが出ます。 Xdebugをインストールしていきます。 XdebugとはPHPのデバッグ用の拡張モジュールのことです。

以下のコマンドでXdebugをインストールします。

pecl install xdebug-2.2.7

が、[checking for gcc... no]というエラーが出ている場合は別途必要なものがあるのでインストールします。

# yum install gcc

(なぜかCやC++のコンパイラが必要なようです、、)

Xdebugのインストールが出来たと思うので次に設定ファイルを作成します。

# vi /etc/php.d/xdebug.ini

xdebug.iniに以下を記載します。
----------------------------------

zend_extension=/usr/lib64/php/modules/xdebug.so

----------------------------------

apacheを再起動します

# /etc/init.d/httpd restart

以下のサイトを参考にしました。

PHP5.3系にxdebugをインストールする際のあれこれ | Skyarch Broadcasting

xdebug インストール時の error: no acceptable C compiler について - Qiita

3.テスト用のDBを用意する

ここまで来て問題なくテスト出来る人もいるかと思うのですが、テストコマンドで番号を選んで

Error: Database connection "Mysql" is missing, or could not be created.

というエラーが出た場合テスト用のデータベースを作成する必要があります。

phpMyAdminを開きまして既に利用しているDBがある場合はそれをコピーしてもよいのではないでしょうか DB名をクリックして「操作」タブを選びます

「データベースのコピー先:」というものがあるので名前を入力して「実行」を押します。データ量が多いと少し待ちます。

出来上がったDB名をdatabase.phpに記載して再度テストコマンドを実行します。番号を選んでテストを実行出来れば完了です。

2017-10-31

CakePHP Hash::extractについて

CakePHP

cakephpのコードでHash::extractという記述を見つけまして、以前もどこかで見たような気がするのですがしっかり理解できていなかったので使い方等記載していきます。

まず説明の前に以下のようなデータを持っているとします。

$results = array(
    0 => array(
        'book' => array(
            'title' => 'ワンピース',
            'auther' => '尾田栄一郎',
            'category' => array(
                'id' => 3,
                'name' => '漫画'
            )
        )
    ),
    1 => array(
    'book' => array(
        'title' => 'ゴールデンスランバー',
        'auther' => '伊坂幸太郎',
        'category' => array(
                'id' => 2,
                'name' => '小説'
            )
        )
    )
);

CakePHPでのデータはもっと複雑になっていくと思うのですが、複雑になった配列から特定の要素だけを取り出して新たな配列にするのがHash::extractになります。

では実際の使い方になります。例えば本のタイトルのみを配列にまとめたい場合は以下のように記述します。

$temp = Hash::extract($results , "{n}.book.title");

debug($temp);


Array
(
    [0] => ワンピース
    [1] => ゴールデンスランバー
)

カテゴリーのidのみを配列にしたい場合は以下になります。

$temp = Hash::extract($results , "{n}.book.category.id");

debug($temp);


Array
(
    [0] => 3
    [1] => 2
)

第二引数で取得したい要素を指定するのですが{n}というものが出てきましたこちらは数値キーを意味します。どんな文字列キーでも数値型のキーでも取得します。

使い方は色々とあるかと思います。

以下のサイトを参考にしました。

CakePHPのarray地獄をHashクラスで生きのこる - ハウテレビジョン開発者ブログ

2017-10-26

jQuery でセレクターの指定など3

jQuery

jQueryでセレクター指定について記載していきます。

　間接セレクター

特定のセレクターの後に出現する要素を選択できるのが「間接セレクター」です。セレクターと要素を~(チルダ)で結びます。

HTML

<ul>
  <li id="first">テキストテキスト</li>
  <li id="second">テキストテキスト</li>
  <li id="third">テキストテキスト</li>
  <li id="fourth">テキストテキスト</li>
</ul>

f:id:nonaka-katuma-hal:20171026170444j:plain

jQuery

$(function() {
    $("#second ~ li").css("color","red");
});

id属性に「second」が設定された要素の後ろに登場するli要素、3番目以降のli要素が赤色になります。

f:id:nonaka-katuma-hal:20171026170503j:plain

否定疑似クラス

セレクター内の要素で特定の条件以外の要素を選択できるのが否定疑似クラスですセレクターの後ろに:not( )を付けて( )内に除外する条件を記述します。

HTML

<ul>
  <li id="first">テキストテキスト</li>
  <li id="second">テキストテキスト</li>
  <li id="third">テキストテキスト</li>
  <li id="fourth">テキストテキスト</li>
</ul>

f:id:nonaka-katuma-hal:20171026173812j:plain

jQuery

$(function() {
  $("li:not(#second)").css("color","red");
});

idがsecond以外のli要素、つまり2番目以外のli要素が赤色になります。

f:id:nonaka-katuma-hal:20171026174101j:plain

empty疑似クラス

子要素やテキストを含まない要素を選択できるのがempty疑似クラスです。セレクターの後ろに:emptyと記述します。

HTML

<ul>
  <li>テキストテキスト</li>
  <li></li>
  <li>テキストテキスト</li>
  <li><a></a></li>
</ul>

f:id:nonaka-katuma-hal:20171026175412j:plain

jQuery

$(function() {
    $("li:empty").css("color","red");
});

空の要素である2番目のli要素が赤色になります。

f:id:nonaka-katuma-hal:20171026175452j:plain

nth-child疑似クラス

セレクターの要素から任意の番号の要素だけを選択できるのが「nth-child疑似クラス」です。セレクターの後ろに:nth-child(番号)と記述します。

HTML

<ul>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
  <li>テキストテキスト</li>
</ul>

f:id:nonaka-katuma-hal:20171026180136j:plain

jQuery

$(function() {
    $("li:nth-child(3)").css("color","red");
});

3番目のli要素だけが赤色になります。

f:id:nonaka-katuma-hal:20171026180648j:plain

番号だけでなく、偶数奇数や任意の倍数でも指定できます。

jQuery

$(function() {
    $("li:nth-child(even)").css("color","red");
});

偶数番目はevenを使います。

f:id:nonaka-katuma-hal:20171026180934j:plain

jQuery

$(function() {
    $("li:nth-child(odd)").css("color","red");
});

奇数番目はoddを使います。

f:id:nonaka-katuma-hal:20171026181101j:plain

jQuery

$(function() {
    $("li:nth-child(3n)").css("color","red");
});

3の倍数番目は3nと書きます。

f:id:nonaka-katuma-hal:20171026181321j:plain

といったところになります。

2017-10-24

gitで間違えてpushしてしまったときの対応など

Git

gitを使ったチーム開発で間違えてpushをしてしまい、githubを確認したら案の定「Compare & pull request」が出ている、、そんなときの解決方法を調べたので記載いたします。

まずは「branches」を押します

f:id:nonaka-katuma-hal:20171024171550j:plain

続いて消したいブランチを探してゴミ箱マークを押します

f:id:nonaka-katuma-hal:20171024171742j:plain

以上でgithubからブランチを削除することができます。

あとコマンドで不用意なコミットを打ち消す方法も記載します。

まず消したいコミットのIDを取得します。

$git log

commit abcdeXXXXXXXXXXXXXXXX
Author: name <hoge@huga>
Date:   Tue Mar 15 10:26:14 2017 +0900

revertを使ってコミットを打ち消します

$git revert abcdeXXXXXXXXXXXXXXXX

revertをしたのでリモートへpushします

$git push origin <ブランチ名>

以上になります。gitに関しては引き続き勉強していきますがまずはそもそもミスをしないように注意していきます。

2017-10-19

vagrant内のプロジェクトをatomで開く

vagrantを使ってアプリ開発をしていましてatomでコードを書いているのですがいちいちFTPを開いてファイルを選択するのが面倒なので、サイドにプロジェクトのツリービューを出す方法を調べました。

まずパッケージのインストールが必要になります。 atomで「remote-ftp」を検索してインストールしてください。

Packages→「Remote-FTP」というのが追加されているので「Create SFTP config file」を選択してください .ftpconfigというファイルが生成されるので設定をしていきます。

設定内容に関しましてはwindows powershellを開いて「vagrant ssh-config」で下記のように接続に必要な情報が表示されます。

PS C:\Users\user\MyVagrant\MyCentOS> vagrant ssh-config
Host default
  HostName 127.0.0.1
  User vagrant
  Port 2222
  UserKnownHostsFile /dev/null
  StrictHostKeyChecking no
  PasswordAuthentication no
  IdentityFile C:/Users/user/MyVagrant/MyCentOS/.vagrant/machines/default/virtualbox/private_key
  IdentitiesOnly yes
  LogLevel FATAL

.ftpconfigは以下のようになっているのでssh-configの内容を参考にして記載していきます。

{
    "protocol": "sftp",
    "host": "127.0.0.1",
    "port": 2222,
    "user": "vagrant",
    "pass": "パスワード",
    "promptForPass": false,
    "remote": "/home/vagrant",
    "local": "",
    "agent": "",
    "privatekey": "/Users/user/MyVagrant/MyCentOS/.vagrant/machines/default/virtualbox/private_key",
    "passphrase": "",
    "hosthash": "",
    "ignorehost": true,
    "connTimeout": 10000,
    "keepalive": 10000,
    "keyboardInteractive": false,
    "remoteCommand": "",
    "remoteShell": "",
    "watch": [],
    "watchTimeout": 500
}

Packages→「remote-ftp」から「Toggle」を選択するとサイドバーが表示されます。「Connect」を選択しますとサイドバーにディレクトリが表示されるので完了になります。

情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

jQuery でHTMLの操作 1

1.テキストの変更

2.テキストの取得

3.HTMLの変更

Atomの便利なパッケージ minimapの紹介

minimap

minimap-find-and-replace

minimap-bookmarks

minimap-autohide

minimap-cursorline

CakePHPで PHPUnitの導入

1.とりあえず実行して何が足りないのか調べる

2.Xdebugのインストール

3.テスト用のDBを用意する

CakePHP Hash::extractについて

jQuery でセレクターの指定など3

間接セレクター

否定疑似クラス

empty疑似クラス

nth-child疑似クラス

gitで間違えてpushしてしまったときの対応など

vagrant内のプロジェクトをatomで開く