売買掲示板kjbyby.netのブログ https://ameblo.jp/kjbybynet/ 売買掲示板kjbyby.netのブログです。cakephpとangularjsについて調べたこと書いてます。 ja ペンギンアップデートの影響を受けているのはロングテール狙いのサイトでは？
影響は軽微であった

という見方が一般的なようです。


が、

ロングテールキーワードに焦点をあてたサイトが今回のペンギンアップデートで被害を受けている可能性があると私はみています。

たとえば、

「洋服　通販　安い」

で検索した場合、


10件表示で38ページ目までしかページのリンクが表示されなくなっています。38ページ目に到達すると検索結果の下部に、

最も的確な検索結果を表示するために、上の 380 件と似たページは除外されています。
検索結果をすべて表示するには、ここから再検索してください

と表示されており、再検索をﾕｰｻﾞｰに求める状態になっています。

検索クエリとしてはマイナーかもしれませんが、

「ハナレイ キュロット」

だと、6ページ目（10件表示）までしか表示されません。

ほかのキーワードでもこの現象は確認できますが、この状態だとロングテールに焦点をあてたサイトは

影響大

なはずです。


上の事例と関連しているかはわかりませんが、

site:～

で検索を行うと10件表示で3ページ目までしか表示されなくなっています。この件については、すでに認識されたバグのようです。


siteコマンドの件だけでなく、検索結果の深い部分のページが表示されない件も同じ理由だとよいかなと思います。

深い部分まで検索しているﾕｰｻﾞｰはたくさんいるはずだし、昨今ロングテールの重要性を唱えるSEOの専門家やそれに習いブログを日々更新しているサイト管理者も大勢いるはずです。

様子をみようと思います。
]]> https://ameblo.jp/kjbybynet/entry-11537428337.html Sat, 25 May 2013 05:22:07 +0900 angularjsのdirectiveとi18n(国際化)
やることは前回までとほとんど同じ内容です。

javascriptやcssなどの静的ファイルをcakephpのwebroot配下にコピーして、viewのlayoutでそれらを読み込んだ後、コンテンツ部分をコピーしてブラウザを更新する

という方法でcakephpで表示することができます。


Create Componentsの例では、components.jsに

tabs
pane

という二つのhtmlタグをdirectiveというangularjsの機能を利用して拡張しindex.htmlで使いまわすという例のようです。

さきの例と同じようにcreate componetもcakephpで試しました。表示は問題なくできたのですが、BeerCounterの中で

$locale.id

による言語設定の条件分岐が行われており、デフォルトで

en-US

になっていたのでどこで設定しているのかを調べてみました。どうも、angularjsを読み込むと標準で「en-US」になっているようです。変更する場合はi18nのファイルを読み込めば可能のようです。具体的には、


上のurlから国際化したい言語ファイルをダウンロードして読み込めば言語設定を変更することができる模様。

echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'), array('inline' => false));
echo $this->Html->script(array('i18n/angular-locale_ja-jp'), array('inline' => false));

上の2行目のようにしてja-JPの言語ファイルをよませるようにすれば、日本語化が可能らしいです。



components.jsについては、

var ameba = angular.module('components', []);
ameba.directive('tabs', function() {

});
 
ameba.directive('pane', function() {

});

というように変更してためしてみたりしました。create componetの例では、チェーンメソッドみたいな感じで.（ドットで）directiveを連結した記述をしますが、上のように書いても大丈夫みたいです。

paneのdirective記述を以下のようにしたりして、directiveの定義の仕方を調べてみました。

ameba.directive('pane', function() {
  return {
  require: '^tabs',
  restrict: 'E',
  transclude: true,
  scope: { title: '@' },
  link: function(scope, element, attrs, tabsCtrl) {

//console.log(attrs.title);

 if( attrs.title == "Pluralization" )
 {
 console.log("Ameba");
 }
 
 else
 {
 tabsCtrl.addPane(scope);
 }
  },
  template:
  '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  '</div>',
  replace: true
  };
});

returnの中でangularjs固有の設定を行うことができます。上の例では、linkの部分に変更をくわえてあります。linkとはinitializeのような感じの機能で、この場合だとtabを最初によんだときに実行される機能です。

console.log(attrs.title);

をしてみたところ、HTMLのtitle属性の値ということがわかりましたので、そのままattrs.titleで条件分岐して一方のタブを表示せずにconsole.logしてみました。

表示結果は以下のとおりです。


売買掲示板kjbyby.netのブログ-i18n


言語ファイルを読み込んであるため、曜日と通貨マーク、金額のカンマの位置が日本語化されています。
また、firebugのコンソールにはja-ＪＰと出力されています。

Pluralizationタブが非表示となり、かわりに

Ameba

とcosole.logされています。

angularjsのdirectiveは重要な機能のようですが、どういう使い方がベストなのかいまひとつ分かりませんでした。次回以降phone gapチュートリアルをやってみますのでそこでdirectiveがでてきたら再度調べてみることにします。


※create componetを試すにあたり、beers.jsの以下2行でエラーになったため、

  //few: '{} piva'',
  //other: '{} pi'v'

コメントアウトしてためしました。

出品無料売買掲示板
]]> https://ameblo.jp/kjbybynet/entry-11528522881.html Sat, 11 May 2013 19:16:44 +0900 Wire up a Backendにbootstrap.cssを適用する
project
description
[編集ボタン]

になっているのに、cakephpに適用した例では編集ボタンが現状ありません。これはbootstrap.cssというスタイルシートを読み込んでいないことが原因です。angularjsのトップページはbootstrap.cssを使ったページになります。

bootstrap.cssについては以下の公式ページを参照ください。


twitter bootstrapで効率よく見た目の良いサイトを作ることができます。


早速、twitter bootstrapをダウンロードし、展開し

bootstrap.min.css

を

C:\xampp\htdocs\vhost\cakephp2.3.2\app\webroot\css

にコピーします。また、

img内の画像

glyphicons-halflings-white.png
glyphicons-halflings.png

の２つを

C:\xampp\htdocs\vhost\cakephp2.3.2\app\webroot\img

にコピーします。

あとはいつもどおりlayoutにbootstrapを読み込むための設定をします。

layout/angularjs.ctp

のcss設定の部分を以下のようにします。

 //echo $this->Html->css('cake.generic'); //コメントアウト
 echo $this->Html->css('todo');
 echo $this->Html->css('bootstrap.min'); //追記

cakephpの標準cssをコメントアウトして、bootstrapの読み込みを追記してみました。この状態でブラウザを更新します。


売買掲示板kjbyby.netのブログ-javascript project

＋マークをクリックで新規登録、鉛筆マークをクリックでプロジェクトの編集をすることができます。

]]> https://ameblo.jp/kjbybynet/entry-11520393464.html Mon, 29 Apr 2013 08:12:57 +0900 angularjsのWire up a Backendでcakephpに入門 
angularjsのトップページ３つ目の例はWire up a Backendです。

この例では、angularjsのテンプレートの概念が登場するほか、validationやmongodbのapiを利用してhttpベースでデータをやり取りする方法を学ぶことができます。人気のcssフレームワークbootstrap.cssも利用されています。

project.js
mongolab.js

の双方を

C:\xampp\htdocs\vhost\cakephp2.3.2\app\webroot\js

にコピーします。

list.html
detail.html

の2つはangularjsの部分テンプレートです。index.htmlの

<div ng-view></div>
の間に埋め込まれるような感じになります。
部分テンプレートは静的なファイルなので、
C:\xampp\htdocs\vhost\cakephp2.3.2\app\webroot
にlist.htmlとdetail.htmlの双方をコピーしておきます。
index.htmlはまず、
<html ng-app>
を
<html ng-app="project">
に変更します。
次にindex.htmlのheadタグ内のjs読み込み設定は以下のようになります。
echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js'), array('inline' => false));echo $this->Html->script(array('project'), array('inline' => false));echo $this->Html->script(array('mongolab'), array('inline' => false));
上の行を追記します。
viewは、
<h2>JavaScript Projects</h2><div ng-view></div>
末尾に上の2行を追記します。

売買掲示板kjbyby.netのブログ-javascript project

ブラウザを更新すると表示されます。検索ボックスにanと入力すると絞り込みが行われます。
]]> https://ameblo.jp/kjbybynet/entry-11519775242.html Sun, 28 Apr 2013 09:20:42 +0900 console.logを使ってAdd Some Controlのデータを確認
htmlのheadでtodo.jsを読み込みました。todo.jsがコントローラのようで、

<div ng-controller="TodoCtrl">
のようにして指定しているようです。
cakephp側のviewを
<div ng-controller="Todo2Ctrl">
のように変更して、todo.js内に以下のような標準で読み込む値のみを変更した
Todo2Ctrl
を追加することができます。

    function Todo2Ctrl($scope) {    $scope.todos = [    {text:'test', done:true},    {text:'テスト app', done:false}];     //以下省略
    };    }

ブラウザをリロードするとtodoのリストが変更されます。ベストプラクティスではないかもしれませんが、ng-controllerの設定をcakephp側で動的に変更することができそうです。確認したら一応ng-controllerの設定を元に戻しておきます。
console.log()でデータを見てみようと思います。console.logはphpのver_dumpやechoで変数をみるようにjavascriptの変数のデータを確認するための機能です。
    $scope.archive = function() {                //中略    };console.log($scope.todos);
最初に、上のように$scope.archiveの下に
console.log($scope.todos);
を追記してみます。データを見るにはブラウザをリロードし、firebugのコンソールで確認することができます。firebugは右上のほうにある虫マークをクリックすれば起動します。

売買掲示板kjbyby.netのブログ-firebug

すこし分かりにくいですが、画像の一番下がconsole.logの結果です。Objectというデータ型で初期値が表示されているのが確認できると思います。

次に、

console.log($scope.archive);

でを確認してみます。

function()

と表示されました。これは先ほど結果がObject型だったのに対し、function型であることを示しているのだと思います。$scope.archiveはangularjsのng-clickに関連付いているので以下のように変更しブラウザをリロードします。


  $scope.archive = function() {
  var oldTodos = $scope.todos;
  $scope.todos = [];
  angular.forEach(oldTodos, function(todo) {
   if (!todo.done) $scope.todos.push(todo);
  });
console.log(oldTodos);
console.log($scope.todos);
  };

リロードしたら

[archive]

のリンクをクリックしてみます。

oldTodosのconsole.logとして、初期値が表示され、クリック後の$scope.todosとして一つtodoが削除された結果が表示されます。

console.logとfirebugでいろいろ確認することができます。firebugはfirefoxの機能ですが、ほかのブラウザ（chromeなど）にも似たような機能があります。
]]> https://ameblo.jp/kjbybynet/entry-11517978250.html Thu, 25 Apr 2013 11:51:18 +0900 angularjsのAdd Some Controlをcakephp
http://angularjs.org/

２つ目の例（Add Some Control todoの例）をcakephpでやってみたいと思います。


Add Some Controlでは、

index.html
todo.js
todo.css

の３つのファイルを使うことになっています。今回は前回のthe basicsと同様に、

http://test.local/

にthe basicsの下側に表示されるようにしてみます。

まず、

todo.js
todo.css

の２つをcakephpのwebroot下に配置し、layoutで読み込むようにします。layoutのangular.ctpは以下のようになります。

echo $this->Html->css('cake.generic');
echo $this->Html->css('todo'); //←追記
 
echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'), array('inline' => false));
echo $this->Html->script(array('todo'), array('inline' => false)); //←追記

これでtodoのjavascriptとcssが読み込まれました。次にviewを編集します。

index.htmlのbodyタグ内のコンテンツを

C:\xampp\htdocs\vhost\cakephp2.3.2\app\View\Pages

の

angularjs.ctp

に追記します。そして保存、ブラウザでページをリロードすると、以下のようになります。


売買掲示板kjbyby.netのブログ-angularjs add some control

上のようになります。the basicsのhtmlは見出しタグを追加してあります。

htmlのul（リスト）の●マークが変な風に表示されているので消してみます。

.unstyled{
 list-style-type: none;
}

todo.cssに上のスタイルを追加することで消すことができます。




]]> https://ameblo.jp/kjbybynet/entry-11516379254.html Mon, 22 Apr 2013 19:06:56 +0900 angularjsのCDNをcakephpで設定する
http://e-words.jp/w/CDN.html

前回のエントリーでは

public function angularjs() {
 
}

というangularjsアクションを追加して、the basicsを表示しました。その際、cakephpの機能でlayoutやviewを明示的に指定しなくても表示することが出来ました。今回のエントリーではCDNを設定するにあたりlayoutを明示的に設定する方法を試してみたいと思います。

angularjsのCDNは以下のurlで確認できます。


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

上のhtmlをcakephpで設定するには以下のようにします。

echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'), array('inline' => false));

cakeでは上のように書けばangularjsのCDNを利用できます。設定する場所はhtmlのheadが記述されているcakephpのlayoutになります。前回までのエントリーでは、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\View\Layouts

の

default.ctp

を利用してきましたが、今回は別のlayoutを設定するのでした。なので、default.ctpを同じ階層にコピペして、

angularjs.ctp

にリネームします（ファイル名の変更）。そして、

//echo $this->Html->script(array('angular.min'), array('inline' => false));
echo $this->Html->script(array('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'), array('inline' => false));

上のようにCDNを追記して、CDNでないほうはコメントアウトか削除します。

最後に、contorollerのangularjsアクション

public function angularjs() {
 
}

にてlayoutを明示的に指定します。

public function angularjs() {
$this->layout = 'angularjs';
}

上のようになります。

http://test.local/

をブラウザでリロードするとthe basicsがCDNで動作することが確認できます。

]]> https://ameblo.jp/kjbybynet/entry-11513241843.html Wed, 17 Apr 2013 19:20:10 +0900 angularjsのThe Basicsのみを表示する
前回のエントリーでRelease Notes for CakePHP 2.3.2.の上部にthe basicsを表示することができました。今回は、Release Notes for CakePHP 2.3.2.のコンテンツ部分のみを消して、cakephpのヘッダーとフッター、そしてthe basicsのコンテンツ部分のみを表示させます。

目的を果たすだけであればRelease Notes for CakePHP 2.3.2.のコンテンツを削除すれば達成できますが、それではあまり意味がないので、viewを新設する方法でやってみたいと思います。


まず、新規にviewを作っておきます。

C:\xampp\htdocs\vhost\cakephp2.3.2\app\View\Pages

に

angularjs.ctp

を用意します。内容はthe basicsの以下のhtmlをコピペします。

<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>

viewの作業は以上で終わりです。

続いて、contorolloerを編集します。

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Controller

の

PagesController.php

を以下のように編集します。

 public function display() {
 $path = func_get_args();

 $count = count($path);
 if (!$count) {
 $this->redirect('/');
 }
 $page = $subpage = $title_for_layout = null;

 if (!empty($path[0])) {
 $page = $path[0];
 }
 if (!empty($path[1])) {
 $subpage = $path[1];
 }
 if (!empty($path[$count - 1])) {
 $title_for_layout = Inflector::humanize($path[$count - 1]);
 }
 $this->set(compact('page', 'subpage', 'title_for_layout'));
 $this->render(implode('/', $path));
 }
 
//ここから

 public function angularjs() {
 
 }

//ここまで

function displayは、Release Notes for CakePHP 2.3.2.を表示するために必要なcakephpにデフォルトで記述されている関数です。それとは別に、function angularjsを追加しました。内容が空になっていますがこのままで大丈夫です。

ここまで追記したら、

http://test.local/pages/angularjs

にアクセスしてみます。するとthe basicsのみが表示されます。

viewのファイル名とcontrollerの関数名がcakephpによって対応しているため少ない記述でこのような結果になります。

ルートで表示したい場合には、cakephpのルーターを設定します。ルーターは、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Config

の

routes.php

で行います。

Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));

もとから設定されている上の一行をコメントアウトし、


//Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
Router::connect('/', array('controller' => 'pages', 'action' => 'angularjs'));

上記のようにします。「/」はルートでアクセスすることを意味しています。ルートとPagesControllerのangularjsファンクションを対応づけることができます。

http://test.local/

でアクセスしなおすとthe basicsが表示されます。


]]> https://ameblo.jp/kjbybynet/entry-11512563750.html Tue, 16 Apr 2013 17:35:53 +0900 AngularJSのThe Basicsをcakephp 本番 前回でRelease Notes for CakePHP 2.3.2.の赤と黄色のエラーを消すことができました。

最もベーシックな

AngularJSのThe Basics

をcakephpでやってみたいと思います。

http://angularjs.org/

からangularjsをダウンロードして、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\webroot\js

にコピペします。

webrootのフォルダは、画像やスタイルシートやjavascriptなどの静的ファイルを格納するフォルダになります。

今回は、Release Notes for CakePHP 2.3.2.のページの上のほうにAngularJSのThe Basicsの結果を表示するようにしてみたいと思います。

Release Notes for CakePHP 2.3.2.のEditing this Pageという見出しがあるかと思います。そこに

To change the content of this page, edit: APP/View/Pages/home.ctp.
To change its layout, edit: APP/View/Layouts/default.ctp.
You can also add some CSS styles for your pages at: APP/webroot/css.


と書いてあります。


ダウンロードしたangularjsを読み込ませるためには、上の2行目に書いてあるように、


APP/View/Layouts/default.ctp.


を編集します。


具体的には、


C:\xampp\htdocs\vhost\cakephp2.3.2\app\View\Layouts\default.ctp


の先頭付近のhtmlタグにangularjsの属性


ng-app


を追加します。



<!DOCTYPE html>

<html ng-app> //←ここを編集

<head>



また以下の一行を追加します。



 <?php

 echo $this->Html->meta('icon');


 echo $this->Html->css('cake.generic');

 

 echo $this->Html->script(array('angular.min'), array('inline' => false)); //←この行を追加


 echo $this->fetch('meta');

 echo $this->fetch('css');

 echo $this->fetch('script');

 ?>



上の一行によりangularjsが読み込まれangularjsへの指示的な記述（ディレクティブ）が実行されるようになります。


次に、


To change the content of this page, edit: APP/View/Pages/home.ctp.


に従いコンテンツを記述します。具体的には、



if (!Configure::read('debug')):

 throw new NotFoundException();

endif;

App::uses('Debugger', 'Utility');

?>


//ここから


<div>

<label>Name:</label>

<input type="text" ng-model="yourName" placeholder="Enter a name here">

<hr>

<h1>Hello {{yourName}}!</h1>

</div>


//ここまで追記


<h2><?php echo __d('cake_dev', 'Release Notes for CakePHP %s.', Configure::version()); ?></h2>


上の範囲のhtmlをangularjsのThe Basicsからコピペします。そして保存。


Release Notes for CakePHP 2.3.2.のページを更新すると、以下のようになります。



kjbyby.netのブログ-angularjs the basics

テキストを編集するとリアルタイムで反映されます。




]]> https://ameblo.jp/kjbybynet/entry-11511414389.html Sun, 14 Apr 2013 20:59:49 +0900 AngularJSのThe BasicsをCAKE

Release Notes for CakePHP 2.3.2.

のページをみるといくつか赤や黄色になっている項目があるのでつぶしておこうと思います。


Please change the value of 'Security.salt' in app/Config/core.php to a salt value specific to your application

Please change the value of 'Security.cipherSeed' in app/Config/core.php to a numeric (digits only) seed value specific to your application


上の２つの赤色英語メッセージは、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Config\config.php

の

Configure::write('Security.salt', 'aaaaaaaaaaaaaaaaaaa');
Configure::write('Security.cipherSeed', '3333333333333333333');

を変更することで消すことができます。

続いて、

Your database configuration file is NOT present.
Rename APP/Config/database.php.default to APP/Config/database.php

は

database.php.default

のファイルを

database.php

に変更することで消すことができますが、同時にdb接続の設定をする必要があります。

今回は、

 public $default = array(
 'datasource' => 'Database/Mysql',
 'persistent' => false,
 'host' => 'localhost',
 'login' => 'dbadmin',
 'password' => ''test,
 'database' => 'angularjs',
 'prefix' => '',
 //'encoding' => 'utf8',
 );

データベースをmysqlで、login, password, database の箇所を変更しました。

残るエラーは一つです。

DebugKit is not installed. It will help you inspect and debug different aspects of your application.

You can install it from github

と書いてあるのでgithubへ行きDebugKitをダウンロードします。

ダウンロードしたら、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Plugin

に

DebugKit

としてコピーします。

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Plugin\DebugKit

上のような階層にします。

そして、

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Config\bootstrap.php

の末尾に

CakePlugin::load('DebugKit');

を追加。

C:\xampp\htdocs\vhost\cakephp2.3.2\app\Controller\AppController.php

に

public $components = array('DebugKit.Toolbar');

を足します。

これですべての項目が緑色になりエラーが表示されなくなっているはずです。


次回こそは、anglarjsのチュートリアルに取り掛かりたいと思います。
]]> https://ameblo.jp/kjbybynet/entry-11510026513.html Fri, 12 Apr 2013 18:38:07 +0900