2014年11月30日日曜日

様々な世論調査結果を紹介している「Pew Research Center」

様々な世論調査結果を紹介している「Pew Research Center」 調査結果を参考にするだけでなく、投票時参加することも可能です。英語サイトですが、なかなか興味深い調査結果が公開されています。

日本の経済減速、6つの事実(6 facts about Japan’s downbeat economy)」なども紹介されていて、国際的でもあります。

2014年11月29日土曜日

ネーミングで困ったら「Naminum」

ネーミングで困ったら「Naminum」 様々なネーミングの候補を表示してくれます。残念ながら、日本語では使えません。言葉の末尾を変えたり、置き換えたり、先頭に加えたりと、色々なバリエーションを提示してくれます。横文字のカッコイイ、オリジナルな名前を考えたい場合は、是非、どうぞ。

2014年11月28日金曜日

JavaScriptで、数字の先頭に0を追加して桁揃え

JavaScriptで、数字の先頭に0を追加して桁揃えです。基本的なことですが、よくわかっていないので備忘録。

// 数値の桁揃え(numは、元の数字、digitは、出力したい桁数)
function digitFormat(num, digit) {
  var len = String(num).length;
  if(digit > len) {
    return (new Array((digit - len) + 1).join(0)) + num;
  } else {
    return num;
  }
}

参考サイト
数値のゼロ埋め(桁を揃える)(ShanaBrianさん)

2014年11月27日木曜日

jQueryで、特定要素タグ間のオブジェクトを取得する「.nextUntil()」と「.andSelf()」

jQueryで、特定要素タグ間のオブジェクトを取得する「.nextUntil()」と「.andSelf()」です。

例えば、下記のようなHTMLがあったとして、
<div id="item1">...</div>
<p>...</p>
<p>...</p>
<div id="item2" >...</div>
<p>...</p>
<p>...</p>
<div id="item3" >...</div>
<p>...</p>
<p>...</p>

item2とitem3の間のオブジェクトにアクセスできます。
$("#item2").nextUntil("#item3").andSelf().css("background", "red");

参考サイト
selectors - How to select all content between two tags in jQuery(Stack Overflow)
.nextUntil() (jQuery 1.9 日本語リファレンス)
.andSelf()(jQuery 日本語リファレンス)

2014年11月26日水曜日

Idiorm & Parisで、更新系の直接クエリを実行したい場合は「raw_execute」

Idiorm & Parisで、更新系の直接クエリを実行したい場合は「raw_execute」でした。ハマったので、メモ。プライマリーキーの設定されていないテーブルなどでは、raw_executeを利用すると、うまく処理できます。

更新系は「raw_execute」を使う
ORM::raw_execute(
  'UPDATE person SET name = :name WHERE number = :number',
  array('number' => $number, 'name' => $name)
);

ちなみに、参照系は「raw_query」を使う
$people = ORM::for_table('person')
  ->raw_query('SELECT p.* FROM person p JOIN role r ON p.role_id = r.id WHERE r.name = :role', array('role' => 'janitor'))
  ->find_many();

参考サイト
Configuration Idiorm documentation

2014年11月25日火曜日

クロスドメインのサイトに、AjaxでPOST

クロスドメインのサイトに、AjaxでPOSTです。コツは、受け取り側のサーバーレスポンスヘッダーに「Access-Control-Allow-Origin」を追加すれば良いらしいです。

サーバーサイドのPHPヘッダーを追加
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
クライアントサイドのJavaScript
jQuery.ajax({
  type: 'POST',
  url: 'http://yoursite/post',
  data: {
    "name" : "apple",
    "age" : 20
  },
  dataType: 'json',
  success: function(json){
    alert('送信されました。');
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('送信できませんでした。');
  }
});

参考サイト
続クロスドメインで使うXMLHttpRequestとCORSの話(日頃の行いさん)
How do I send a cross-domain POST request via JavaScript?(Stack Overflow)
How to Send Cross Domain AJAX Request with jQuery(HayaGeekさん)

2014年11月24日月曜日

Windows用シェルスクリプト言語「PowerShell」

Windows用シェルスクリプト言語「PowerShell」 こんなものがあるなんて、今まで気づきませんでした(笑)。Windowsのメニューを探ってみると、確かに、アクセサリメニューの中に存在していました。賢く使えば、作業効率が上がること、間違いなし。





参考サイト
Windows PowerShell(Wikipedia)

2014年11月23日日曜日

インタラクティブなグラフィックを実現するJavaScriptライブラリ「p5.js」

インタラクティブなグラフィックを実現するJavaScriptライブラリ「p5.js」 サンプルのページを覗いてみると、どんなことが実現できるのかが、よくわかります。テキスト、入力、ビデオ、ウェブカメラ、音声など、HTML5オブジェクトが制御可能と説明されています。複雑で、激しい動きのあるグラフィックが実現可能。サウンドも巧みに制御できるようです。

使い方例
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.0.0/p5.js"></script>

2014年11月22日土曜日

ビデオチュートリアルを見ながらHTML5、CSS3、Javascriptが学べる「TheCodePlayer」

ビデオチュートリアルを見ながらHTML5、CSS3、Javascriptが学べる「TheCodePlayer」 言葉は要らないでしょう。チュートリアルのビデオを眺めているだけで、勉強になります。コーディングの結果がすぐに画面右側に反映されるので、非常にわかりやすいです。しかも、ビデオの再生速度が選択できるので、自分にあったスピードで学習していけます。

2014年11月21日金曜日

CORS(Cross-origin resource sharing)って何?

CORS(Cross-origin resource sharing)って何? ということで調べてみました。

CORSはJSONPよりも多くのHTTPメソッドを(GET、PUTは、POST、DELETE)をサポートしています。

JSONPはGETリクエストメソッドをサポートしています。

しかし、JSONPのDR ConnectのAPI実装は、追加のメソッドタイプがクエリパラメータを経由して(POST、PUT、DELETE)ができます。

JSONPはCORSより多くのブラウザでサポートされています。

CORSは、それがクロスオリジンデータアセスメカニズムを提供するという点でJSONPよりも安全です。

一方、JSONPは、クロスオリジンコードインジェクション経由で動作します。

CORSにはJSONPよりも優れたエラー処理が用意されています。

というわけで、POSTするなら、CORSを利用すべしということなんでしょう。



参考サイト
Cross-origin resource sharing(Wikipedia)
Why use CORS versus JSONP for cross-domain requests?(Digital River Connect)
So, JSONP or CORS?(Stack Overflow)

2014年11月20日木曜日

JavaScriptで、文字列を配列に分割する「split()」、配列要素を文字列に結合する「join()」

JavaScriptで、文字列を配列に分割する「split()」、配列の要素を文字列に結合する「join()」 はて、どうやって実現するのかなと首をひねることになったので、メモです。

split()の例
var str = "How are you doing today?";
var res = str.split(" ");
↓
How,are,you,doing,today?
join()の例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
↓
Banana,Orange,Apple,Mango

参考サイト
JavaScript String split() Method(W3Schools)
JavaScript Array join() Method(W3Schools)

2014年11月19日水曜日

Yahoo! JAPANデベロッパーネットワークの「郵便番号検索API」

Yahoo! JAPANデベロッパーネットワークの「郵便番号検索API」を利用してみました。郵便番号データから、住所や経度、緯度などが取得できます。これ良いです。何が素晴らしいって、住所以外に、最寄り駅のデータが得られます。最寄り駅の出口まで取得できてしまいます。スゴイ。

サンプルリクエストURL
http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/zipCodeSearch?query=105-0011&results=10&detail=full&output=xml&appid=yourappid

2014年11月18日火曜日

郵便番号から、都道府県、市区町村名を取得できる「郵便番号-住所検索API」

郵便番号から、都道府県、市区町村名を取得できる「郵便番号-住所検索API」 「個人・法人・商用・非商用問わず無料でご利用頂けます。」とありますので、商用利用もOK。結果は、JSON形式のデータで返されます。ありがたいサービスです。

2014年11月17日月曜日

JavaScriptで、月の日数を取得する

JavaScriptで、月の日数を取得する方法です。Stack Overflowにサンプルがあります。エレガントすぎて、何をやっているのか、よくわかりません(笑)。それでも、見事に動いてくれています。

function days_in_month(month, year){
  return month == 2 ? (year % 4 ? 28 : (year % 100 ? 29 : (year % 400 ? 28 : 29))) : ((month - 1) % 7 % 2 ? 30 : 31);
}

$(document).ready(function() {
 $('#mm').change(function(){
  var mm=$(this).val();
  var yy=$('#yy').val();
  $('#dd').val(days_in_month(mm,yy));
 });
});

参考サイト
Jquery get year and month in separate selectbox(Stack Overflow)

2014年11月16日日曜日

オンラインでプレゼンテーションを作成、編集できる「Google Slides」

オンラインでプレゼンテーションを作成、編集できる「Google Slides」 普通のエディタを編集する感覚で、スライド作成が可能です。作成後は、共有URLが作成されるので、ネットが繋がる環境なら、すぐに綺麗なスライドでプレゼンテーションを行うことが可能です。ネットに繋がらない場合は、パワーポイントやPDF形式でダウンロードも可能。編集は、即座に反映されるので、共同作業も楽。

2014年11月15日土曜日

プレゼンテーションコンテンツを共有できる「SlideShare」

プレゼンテーションコンテンツを共有できる「SlideShare」 今更ながらですが、利用してみました。確かに、簡単にプレゼンテーション用のスライドをを広く公開できるようになっています。しかし、使い方がよくわかっていないためか、一度公開すると、編集できなくなりました。そういうものなのでしょうか?  とにかく、アクセス解析などが完備されていて、よく出来たサービスだなと思います。

2014年11月14日金曜日

「HSTS」って何?

HSTS」って何? ということで、調べてみました。

HTTP Strict Transport Security
エイチティーティーピー・ストリクト・トランスポート・セキュリティ
略称 HSTS

HSTSではユーザーがWebブラウザにスキームがhttpであるURIを入力するなどしてHTTPで接続しようとした時に、予めWebサーバーがHSTSを有効にするよう指示してきたドメインの場合、Webブラウザが強制的にHTTPSでの接続に置き換えてアクセスすることで、この問題を解決する。
というわけで、HTTPSのセキュリティーをより高めたものと理解しました。



参考サイト
HTTP Strict Transport Security(Wikipedia)
HTTPSを使うなら“HSTS”と“HSTSプリロード”でセキュリティを高めよう など10+4記事(Web担当者Forum)
HTTP Strict Transport Security - Security(MDN)

2014年11月13日木曜日

jQueryで要素を丸ごと入れ替えるなら「replaceWith」

jQueryで要素を丸ごと入れ替えるなら「replaceWith」 最初、「.html()」で試していたのですが、どうも思ったとおりの置換えが出来ないなと思っていたら、「.replaceWith()」というのがありました。こちらが、今回探し求めていたものです!

<div id="mydiv">Hello World</div>

$('#mydiv').html('<input type="text" id="mydiv" name="mydiv" value="">');

$('#mydiv').replaceWith('<input type="text" id="mydiv" name="mydiv" value="">');

2014年11月12日水曜日

Chromeブラウザの「デベロッパーツール」

Chromeブラウザの「デベロッパーツール」を使ってみました。Firefoxで言うところの「Firebug」のようなデバッガーです。こんな便利なものがあるということを、今ごろ知ったという開発者としては典型的な落伍者です(笑)。友人に「どこを見てるんだよ」と指摘されて、気づきました。持つべきものは、厳しい友人です(笑)。





参考サイト
Google Chrome版Firebug:デベロッパーツール取扱説明書(技術評論社)

2014年11月11日火曜日

クロスドメインでAjaxを可能にする「jquery.xdomainajax.js」

クロスドメインでAjaxを可能にする「jquery.xdomainajax.js」を試してみました。見事に、クロスドメイン間で、Ajax通信が可能です。ただ、JSON形式を指定して通信したら、エラーが返ってきました。テキスト形式のデータ取得のみが可能なのかもしれません。

$.ajax({
  url: 'http://www.yahoo.co.jp/',
  type: 'GET',
  success: function(res) {
    alert(res.responseText);
  }
});


参考サイト
Javascriptスクレイピング!jquery.xdomainajax.js(ITかあさん)

2014年11月10日月曜日

jQueryのダラーマーク「$」は「jQuery」の文字列で代用できる

jQueryのダラーマーク「$」は「jQuery」の文字列で代用できるんですね。ダラーマークが利用できない環境では、これが役に立つというわけです。「$」は変数として利用される場合がありますからね。

/* Normal jQuery */
$("#some-element").sample();

/* Safe jQuery */
jQuery("#some-element").sample();

参考サイト
Using ‘$’ instead of ‘jQuery’ in WordPress(Digging Into WordPress)

2014年11月9日日曜日

Googleがナノ粒子で癌や心臓発作などを早期発見するプロジェクト

Googleがナノ粒子で癌や心臓発作などを早期発見するプロジェクトを進めているそうです。抗体を含むナノ粒子を血流中に送り込み、癌や心臓発作の兆候などを見つけ出す薬の開発に取り組んでいるとのこと。まさに革命的。Googleは、本当にいろいろなことに挑戦していますね。



参考サイト
グーグルが目指す「医療の革新」:ナノ粒子で癌や心臓発作などを早期発見するプロジェクト

2014年11月8日土曜日

リンク切れをチェックしてくれる「Online Broken Link Checker」

リンク切れをチェックしてくれる「Online Broken Link Checker」 これ便利です。チェックが終わるまでしばらく時間がかかりますが、徹底的にチェックしてくれます。「Processed 528 web pages, found 15 broken links」と、こんな感じです。結果は、リンク切れのURLを一覧表示してくれます。

2014年11月7日金曜日

Fat-Free Frameworkで、変数の割り当て

Fat-Free Frameworkで、変数の割り当てです。「$f3->set('var',value)」といった具合。これは、とりあえずOKでしょう。

$f3->set('num',123);
$f3->set('str','abc');
$f3->set('hash',array('x'=>1,'y'=>2,'z'=>3));
$f3->set('items',array(7,8,9));
setup.cfg
[globals]
num=123

str="abc"

hash[x]=1
hash[y]=2
hash[z]=3

hash.x=1
hash.y=2
hash.z=3

items=7,8,9
$f3->config('setup.cfg');」で、設定ファイルの読み込み。

実際に設定してみたのが、こちら

参考サイト
Framework Variables(Fat-Free Framework for PHP)

2014年11月6日木曜日

Fat-Free Frameworkで、404ページの表示

Fat-Free Frameworkで、404ページの表示です。「$f3->error(404);」で、簡単にNot Foundのページは表示できるのですが、デザインの変え方がわからない。早くも挫折。

$f3->error(404);
404の部分は、他のHTTPステータスコードに置き換えても大丈夫らしい。

/lib/base.php
//@{ HTTP status codes (RFC 2616)
const
  HTTP_100='Continue',
  HTTP_101='Switching Protocols',
  HTTP_200='OK',
  HTTP_201='Created',
  HTTP_202='Accepted',
  HTTP_203='Non-Authorative Information',
  HTTP_204='No Content',
  HTTP_205='Reset Content',
  HTTP_206='Partial Content',
  HTTP_300='Multiple Choices',
  HTTP_301='Moved Permanently',
  HTTP_302='Found',
  HTTP_303='See Other',
  HTTP_304='Not Modified',
  HTTP_305='Use Proxy',
  HTTP_307='Temporary Redirect',
  HTTP_400='Bad Request',
  HTTP_401='Unauthorized',
  HTTP_402='Payment Required',
  HTTP_403='Forbidden',
  HTTP_404='Not Found',
  HTTP_405='Method Not Allowed',
  HTTP_406='Not Acceptable',
  HTTP_407='Proxy Authentication Required',
  HTTP_408='Request Timeout',
  HTTP_409='Conflict',
  HTTP_410='Gone',
  HTTP_411='Length Required',
  HTTP_412='Precondition Failed',
  HTTP_413='Request Entity Too Large',
  HTTP_414='Request-URI Too Long',
  HTTP_415='Unsupported Media Type',
  HTTP_416='Requested Range Not Satisfiable',
  HTTP_417='Expectation Failed',
  HTTP_500='Internal Server Error',
  HTTP_501='Not Implemented',
  HTTP_502='Bad Gateway',
  HTTP_503='Service Unavailable',
  HTTP_504='Gateway Timeout',
  HTTP_505='HTTP Version Not Supported';
//@}

実際に設定してみたのが、こちら

参考サイト
Triggering a 404(Fat-Free Framework for PHP)

2014年11月5日水曜日

Fat-Free Frameworkで、ルーティングとリクエストURLの取得

Fat-Free Frameworkで、ルーティングとリクエストURLの取得です。「$f3->run();」コマンドの前に、ルーティングを設定するとあります。リクエストURLは「PARAMS」の配列で取得でき、「$f3->get()」で、フレームワークで利用される変数にアクセスできるらしいです。まだ良くわかりませんが、徐々に慣れていければと思います。

index.php
$f3->route('GET /brew/@count',
  function($f3) {
    echo "こんにちは、" . $f3->get('PARAMS.count');
  }
);

実際に設定してみたのが、こちら

参考サイト
Routing Engine(Fat-Free Framework for PHP)

2014年11月4日火曜日

PHPの軽量フレームワーク「Fat-Free Framework」をインストール

PHPの軽量フレームワーク「Fat-Free Framework」をインストールしてみました。先日、アカウントを作成した無料レンタルサーバーのホスティンガーさんで試せる、PHP5.3+環境対応のフレームワークです。今回試したのは、Fat-Free Framework 3.3.0。ファイルをダウンロードして、インクルードしてみただけですが、とりあえず。

index.php
$f3=require('lib/base.php');
$f3->route('GET /',
  function() {
    echo 'Hello, world!';
  }
);
$f3->run();

実際に設定してみたのが、こちら



参考サイト
bcosca/fatfree(GitHub)

2014年11月3日月曜日

Googleのフィットネスアプリ「Google Fit」

Googleのフィットネスアプリ「Google Fit」 Googleは、こんな分野にも進出しているんですね。グーグルフィットは、Androidデバイスに組み込まれたセンサーを使用して、利用者の運動量を追跡するアプリです。健康志向で、市場拡大が見込めること、間違いなし。ウェアラブルな端末の普及にも、大きく貢献することでしょう。さすがとしか言いようがありません。





参考サイト
Google、Android/Android Wear向けフィットネスアプリ「Google Fit」とSDKを公開(ITmedia Mobile)

2014年11月2日日曜日

HTML5でモーショングラフィックを作成できる「Google Web Designer」

HTML5でモーショングラフィックを作成できる「Google Web Designer」を試してみました。最初、しばらく手こずりましたが、何とか動きをつけることができました。これ、面白いです。Flashのように動きのあるコンテンツをHTML5で作成し、HTMLコードを作成してくれます。出来上がったコードをサーバーにアップすれば、動きのあるコンテンツをすぐに公開できます。素晴らしい!





参考サイト
チュートリアルで学ぶGoogle Web Designer操作まとめ(ASCII.jp)

2014年11月1日土曜日

Markdownで無料ウェブページ作成「Broadsheet」

Markdownで無料ウェブページ作成「Broadsheet」 ブラウザ一つで、洗練されたデザインのウェブページを作成、すぐに公開することが可能です。無料で利用可能。特徴的なのは、Markdownが利用できること。ログインもパスワードではなく、毎回、メール認証? 洗練されたデザインのテンプレートパターンが複数用意されているので、コンテンツ作成に集中できます。