2015年5月31日日曜日

2015年5月30日土曜日

Fedora 22がリリース

Fedora 22がリリースされました。パッケージマネージャがYumではなく、DNFに変更されているとのこと。Fedoraの開拓者魂を感じますね。



参考サイト
Fedora 22登場 - パッケージマネージャをYumからDNFへ変更(マイナビニュース)

2015年5月29日金曜日

PHP ORM Spot2で、リレーション(Eager Loading)

PHP ORM Spot2で、リレーション(Eager Loading)です。クエリービルダーでは、JOINをサポートしていないらしいので、モデルに定義する必要があります。「->with()」で、リレーションデータを取得してくれます。

モデル
namespace Entity;

use Spot\EntityInterface as Entity;
use Spot\MapperInterface as Mapper;

class Stations extends \Spot\Entity {
  (省略)
  public static function relations(Mapper $mapper, Entity $entity)
  {
    return [
      'route' => $mapper->belongsTo($entity, 'Entity\Routes', 'route_id'),
    ];
  }
}

リレーションを取得。Stations(駅)とRoutes(路線)を結びつけています。
$stationMapper = $spot->mapper('Entity\Stations');
$stations = $stationMapper->all()->with('route');

実際に設定してみたサイトがこちら

2015年5月28日木曜日

PHP ORM Spot2で、クエリーログ

PHP ORM Spot2で、クエリーログです。「toSql()」これで実際のクエリーを確認できます。

$stationMapper = $spot->mapper('Entity\Stations');
$stations = $stationMapper->all();

print $stations->toSql();

実際に設定してみたサイトがこちら

参考サイト
vlucas/spot2(GitHub)
PHPのDoctrine系ORM「Spot DataMapper ORM」

2015年5月27日水曜日

Mustacheでページネーション(ページ送り)

Mustacheでページネーション(ページ送り)です。Mustacheは「logic-less」なテンプレートエンジンということで、if文が使えません。というわけで、慣れが必要です。テンプレート側ではなく、プログラム側でつくり出してしまった方が賢いかもしれません。

<div class="pagination">
  <ul>
    {{^firstPage}}
      <li class="prev"><a href="{{prevUrl}}">前</a></li>
    {{/firstPage}}
    {{#pages}}
      {{^currentPage}}
        <li><a href="{{url}}">{{page}}</a> </li>
      {{/currentPage}}
      {{#currentPage}}
        <li class="current"><a href="{{url}}">{{page}}</a></li>
      {{/currentPage}}
    {{/pages}}
    {{^lastPage}}
      <li class="next"><a href="{{nextUrl}}">次</a></li>
    {{/lastPage}}
  </ul>
</div>

実際に設定してみたサイトがこちら

参考サイト
badsyntax.co/pagination.mustache(GitHub)
Pagination with Handlebars(Olivier Lalonde's blogさん)

2015年5月26日火曜日

PHPのDoctrine系ORM「Spot DataMapper ORM」

PHPのDoctrine系ORM「Spot DataMapper ORM」を組み込んでみました。ちょっとしか利用していませんが、なかなか使いやすい印象です。注意する点としては、PHP 5.4以上が必要というところでしょうか。

接続
$cfg = new \Spot\Config();
// MySQL
$cfg->addConnection('mysql', 'mysql://user:password@localhost/database_name');
$spot = new \Spot\Locator($cfg);
モデルの定義
namespace Entity;
class Stations extends \Spot\Entity
{
  protected static $table = 'stations';
  public static function fields()
  {
    return [
      'id' => ['type' => 'integer', 'primary' => true, 'autoincrement' => true],
      'name' => ['type' => 'string', 'required' => true],
    ];
  }
}
クエリー
$stationMapper = $spot->mapper('Entity\Stations');
$stations = $stationMapper->all()->order(['name' => 'ASC'])->limit(20);

実際に設定してみたサイトがこちら



参考サイト
vlucas/spot2(GitHub)

2015年5月25日月曜日

Mustache互換のJavaScriptテンプレートエンジン「Handlebars.js」

Mustache互換のJavaScriptテンプレートエンジン「Handlebars.js」を組み込んでみました。Mustacheに慣れた方なら、すぐに利用できるようになると思います。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
  <h1>title : {{title}}</h1>
  <p>body : {{{body}}}</p>
  {{#each people}}
    <li>people : {{firstName}} {{lastName}}</li>
  {{/each}}
</script>

<script>
$(function(){
  var source = $("#entry-template").html();
  var template = Handlebars.compile(source);
  var context = {
          title: "タイトル", 
          body: "マイクのテスト中です。", 
          people: [
            {firstName: "Yehuda", lastName: "Katz"},
            {firstName: "Carl", lastName: "Lerche"},
            {firstName: "Alan", lastName: "Johnson"}
          ]
        };
  var strhtml = template(context);
  $('#output').html(strhtml);
});
</script>

<div id="output"></div>

実際に設定してみたサイトがこちら



参考サイト
wycats/handlebars.js(GitHub)

2015年5月24日日曜日

2015年5月22日金曜日

PHPテンプレートエンジンの「Mustache.php」

PHPテンプレートエンジンの「Mustache.php」を組み込んでみました。バージョンは、2.8.0です。

index.php
$mustache = new Mustache_Engine(array(
  'cache' => dirname(__FILE__).'/tmp/cache/mustache',
  'loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/templates'),
));

$tpl = $mustache->loadTemplate('index'); 
echo $tpl->render(array('name' => 'Taro'));
/templates/index.mustache
{{ name }}
{{{ name }}}

実際に設定してみたサイトがこちら



参考サイト
bobthecow/mustache.php(GitHub)
{{ mustache }}

2015年5月21日木曜日

PHPのルーター「PHRoute」

MOGOKにPHPのルーター「PHRoute」を設定してみました。.htaccess は利用できないらしいですが、URLのRewriteは効いているようです。というわけで、主要なフレームワークは問題なく動作すると思います。

実際に設定してみたサイトがこちら。何もありませんが。。。



参考サイト
PHPのURLルーティング用ルーター「PHRoute」

2015年5月20日水曜日

MOGOKにSails.jsがデプロイできるらしい

MOGOKSails.jsがデプロイできるらしいです。試してみたのですが、エラーが出て、うろたえて挫折しました。根性なしです。笑ってやって下さい(笑)。己の実力を思い知りました。またあとで試そう? そうしよう!

2015年5月19日火曜日

Node.jsのフレームワーク「Sails.js」をインストール

Node.jsのフレームワーク「Sails.js」をインストールしてみました。起動するところまで漕ぎ着けました(笑)。

プロジェクト名は「sample」
$ sudo npm install sails -g
$ sails new sample
$ cd sample
$ sails lift

info: Starting app...

info:
info:                .-..-.
info:
info:    Sails              <|    .-..-.
info:    v0.11.0             |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/path/to`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press  + C at any time.

debug: --------------------------------------------------------
debug: :: Tue May 19 2015 11:11:11 GMT+0000 (UTC)

debug: Environment : development
debug: Port        : 1337
debug: --------------------------------------------------------

2015年5月18日月曜日

Node.jsのフレームワーク「Sails.js」

Node.jsのフレームワーク「Sails.js」に興味が。。。
以下、特徴です。

Sails uses Express for handling HTTP requests, and wraps socket.io for managing WebSockets.


というわけで、Expresssocket.ioを包含しているということになるんだろうと思います。
  • 100%JavaScript
  • 様々なデータベース
  • 強力なモデル連携
  • REST APIを自動生成
  • WebSocketをサポート
  • 宣言型、再利用可能なセキュリティポリシー
  • Angular、Backbone、iOS、Androidなど、様々な連携
  • 柔軟なアセットパイプライン
  • 盤石な基盤

2015年5月17日日曜日

文字列操作のjQueryプラグイン「Blast.js」

文字列操作のjQueryプラグイン「Blast.js」 文章中から、テキストを切り取って、文字列操作できるという優れもの。UTF-8文字をサポートと書かれていますので、日本語でも使えそうな気がします。たぶん?

2015年5月15日金曜日

ドットインストールの「AngularJS入門」

ドットインストールの「AngularJS入門」 (全12回)を発見です! 一筋の光明が見えた気がします。わかりやすいし、実践的。特にフォームの設置やエラーメッセージの表示は、すぐに利用できそうです。我が実験サイトにも組み込んでみよう(笑)!

2015年5月14日木曜日

AngularJSで、アニメーション(Applying Animations)

AngularJSで、アニメーション(Applying Animations)です。angular-animate.jsを組み込んでいます。CSSをガリガリとカスタマイズできる人向けだと思います。何とか動いていますが、よくわかりません(笑)。ただ、プレゼンテーションに凝りたい方には、果てしない可能性の海が広がっていると思います。是非、どうぞ。

実際に設定してみたサイトがこちら


参考サイト
ngAnimate(AngularJS)

2015年5月13日水曜日

AngularJSで、カスタムサービス(REST and Custom Services)

AngularJSで、カスタムサービス(REST and Custom Services)です。何をやっているのかわからなくなってきましたが、ngResourceで、データを抽象化している(?)と理解しました。

app/js/services.js
var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

実際に設定してみたサイトがこちら



参考サイト
ngResource(AngularJS)
AngularJs Service,Factory,Providerなどなど(senta.me/blogさん)

2015年5月12日火曜日

AngularJSで、イベントハンドラー(Event Handlers)

AngularJSで、イベントハンドラー(Event Handlers)です。「ng-click=」で、クリックされた時のファンクション「setImage」が呼ばれる模様。

app/partials/phone-detail.html
<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
</ul>

実際に設定してみたサイトがこちら



参考サイト
ngClick(AngularJS)

2015年5月11日月曜日

AngularJSで、カスタムフィルター(Custom Filter)

AngularJSで、カスタムフィルター(Custom Filter)です。{{ expression | filter }}で、文字列にフィルターをかけて整形できます。既存の組み込みフィルターは、こちら

app/js/filters.js
angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});
app/partials/phone-detail.html
<dt>Infrared</dt>
<dd>{{phone.connectivity.infrared | checkmark}}</dd>
<dt>GPS</dt>
<dd>{{phone.connectivity.gps | checkmark}}</dd>

実際に設定してみたサイトがこちら



参考サイト
filter components in ng(AngularJS)

2015年5月10日日曜日

「広告インジェクション」とは?

「広告インジェクション」とは? ということで、気になるニュースを見つけたのでメモです。
広告インジェクションでは、例えばAmazonやWalmartといった通販ページやGoogleの検索結果ページなどを閲覧した際、本来は掲載されていない広告を挿入したり、本来表示されているはずの広告を別の広告に差し替えるといったことが、サイト運営者に無断で行われる。ブラウザーの拡張機能やアプリケーションソフトによってウェブ閲覧が乗っ取られる仕組みだ。そうした機能を持つ望ましくないソフトウェア(unwanted software)をインターネットユーザーにインストールさせるため、アフィリエイトネットワーク経由でマーケティング、人気オンラインソフトとのバンドル、明らかなマルウェア配布、大規模ソーシャルキャンペーンなどが行われているという。

2015年5月9日土曜日

io.js 2.0がリリース

io.js 2.0がリリースされました。JavaScript実行エンジンであるV8がバージョン4.2にアップデートされるなど、多数の機能強化が図られているとのこと。io.jsには、勢いを感じますね。



参考サイト
Node.jsからフォークしたio.js、バージョン2.0をリリース(SourceForge.JP Magazine)

2015年5月8日金曜日

AngularJSで、テンプレート再び(More Templating)

AngularJSで、テンプレート再び(More Templating)です。Json形式のデータをテンプレートに割り当てて表示しています。

読み込むJson形式のデータ
{
  "id": "motorola-defy-with-motoblur", 
  "images": [
    "img/phones/motorola-defy-with-motoblur.0.jpg", 
    "img/phones/motorola-defy-with-motoblur.1.jpg", 
    "img/phones/motorola-defy-with-motoblur.2.jpg"
  ], 
  "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122"
}
テンプレート
<img ng-src="{{phone.images[0]}}" class="phone">
<h1>{{phone.name}}</h1>
<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}">
  </li>
</ul>
実際に設定してみたサイトがこちら


2015年5月7日木曜日

AngularJSで、ルーティング(Routing)

AngularJSで、ルーティング(Routing)です。ngRouteというモジュールを別途、読み込んで利用するらしいです。ソースを見れば、なんとなくわかるような気もします(笑)。

var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);

phonecatApp.config(['$routeProvider',

function($routeProvider) {
  $routeProvider.
  when('/phones', {
    templateUrl: 'partials/phone-list.php',
    controller: 'PhoneListCtrl'
  }).
  when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.php',
    controller: 'PhoneDetailCtrl'
  }).
  otherwise({
    redirectTo: '/phones'
  });
}]);

実際に設定してみたサイトがこちら



参考サイト
ngRoute(AngularJS)

2015年5月6日水曜日

Ubuntu 14.04に、PHP 5.6をインストール

Ubuntu 14.04に、PHP 5.6をインストールです。PHP 5.6で、phpinfo(); を表示させると、その新しさに感激します(笑)。

sudo add-apt-repository ppa:ondrej/php5-5.6
sudo apt-get update
sudo apt-get install php5

参考サイト
apt-getでUbuntuにphp5.6のインストール(kikukawa's diaryさん)

2015年5月5日火曜日

Dockerコンテナの実行環境に最適化されたコンパクトな「RHEL Atomic Host」

Dockerコンテナの実行環境に最適化されたコンパクトな「RHEL Atomic Host」が発表されています。仮想化とコンテナ(Docker)の違いが、非常によくわかります。
コンテナ技術では、基盤としてのOSは1つだけだ。アプリケーションやアプリケーションが使用するシステムソフトなどをコンテナ化(パッケージ化)しているが、OSとしては1つの基盤を共有している。ハイパーバイザーによる仮想化のように、OSが複数動作することもなくなるため、システム全体としてアプリケーションに割り当てられるComputeリソースが増え、コンテナの方がパフォーマンス的に有利といわれている。

2015年5月4日月曜日

GitHubで、プログラミング言語がどのような割合で利用されているのかを視覚的にまとめた「GitHut」

GitHubで、プログラミング言語がどのような割合で利用されているのかを視覚的にまとめた「GitHut」 大きなプログラミング言語の流れをタイムラインでも追跡確認できます。

2015年5月3日日曜日

Phalcon 2.0がリリース

Phalcon 2.0がリリースされています。最大の特徴は、PHPエクステンションが簡単に書ける言語「Zephir」で書き直されていること。Zephirは、Cを知らなくても、開発者が簡単に独自のエクステンションを記述することができます。PHPも高速化の時代に突入でしょうか?!



参考サイト
Phalcon 2.0 - The future(Phalcon blog)
Zephir Language

2015年5月2日土曜日

LAMPの次は、MEAN(MongoDB+Express+AngularJS+NodeJS)

LAMPの次は、MEAN(MongoDB+Express+AngularJS+NodeJS)だそうです。フルスタックなJavaScript環境での開発のことで、時代は「JavaScript」ということになりそうですね。



参考サイト
MEANスタックで始めるWebアプリ開発入門(@IT)
MEAN.JS

2015年5月1日金曜日

AngularJSで、リンクとイメージ(Templating Links & Images)

AngularJSで、リンクとイメージ(Templating Links & Images)です。たぶん画像表示部分の「img ng-src=」とするところがミソなんでしょう。

「<img src=」

「<img ng-src=」

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" >
    <a href="#/phones/{{phone.id}}"><img ng-src="{{phone.imageUrl}}" class="thumb"></a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

実際に設定してみたサイトがこちら



参考サイト
ngSrc(AngularJS)