2014年4月30日水曜日

正規表現をリアルタイムでテストできる「RegExr」

正規表現をリアルタイムでテストできる「RegExr」 実際にどう働くのか、リアルタイムでハイライト表示され、確認できるので、わかりやすい。実際にテストしたい文章を用意し、画面上にペーストすれば、その文章で動作チェックしてくれます。英語メニューなので、慣れが必要ですが、ヘルプやサンプルなども充実していて、非常に高機能です。



2014年4月29日火曜日

世界中の90以上のサーバーからPing確認してくれる「CA APM Cloud Monitor」

世界中の90以上のサーバーからPing確認してくれる「CA APM Cloud Monitor」 数多くのネットワーク環境を駆使して、サービスが提供されています。Ping以外にも、ウェブサイトの表示タイムTracerouteなども行ってくれます。クリティカルなサイトを運営されている方は、覚えておいて損はないでしょう。

2014年4月28日月曜日

Googleの付箋紙メモ「Google Keep」

Googleの付箋紙メモ「Google Keep」 こんな機能があったのかという感じです(笑)。検索はできるし、アーカイブして整理しておけるし、通知機能を設定し、タスク管理もできるし、便利に使えます。何より、簡単でシンプルなのが良い。ガンガン使わせていただきましょう。



2014年4月27日日曜日

HTML5のリッチUIを提供するJavaScriptライブラリ「Wijmo」を試す

HTML5のリッチUIを提供するJavaScriptライブラリ「Wijmo」を試してみました。グラフを描画してみたのですが、美しい出力にうっとり(笑)。jQueryの拡張のような感覚で扱えます。同じデータを提供するにも、デザインが良いと説得力が違います。グラフ以外にも、スプレッドシートやカレンダーなどのウィジェットが用意され、かなりの充実ぶり。素晴らしい。

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



参考サイト
WebアプリケーションにリッチUIをもたらす高機能JavaScriptライブラリ「Wijmo」(CodeZine)

2014年4月26日土曜日

1ページに全てがまとめられたサイトのデザインギャラリー「One Page Love」

1ページに全てがまとめられたサイトのデザインギャラリー「One Page Love」 1ページに全てを詰め込んでしまうというデザインパターンを、最近、よく見かけます。簡潔で、全体を把握しやすいし、何より、アピールのポイントが明確であるというのが受けているのかもしれません。ランディングページなどに、適しているようにも思います。イメージ重視になると思いますので、その分、デザインのクオリティーは高いものが要求されるのかも。とにかく、参考になります。

2014年4月25日金曜日

JavaScriptで、配列の重複要素を削除する

JavaScriptで、配列の重複要素を削除する方法です。参考にしたソースがエレガントすぎて、よく理解できていないのですが、見事に仕事を果たしてくれています。今回は、node.jsのサーバーサイドで利用しました。良い感じです。

// キーワードの文字列
var keywords = '狸,ヴァイオリン,猫,本,文,公会堂,拍手,風車,markdown,窓,markdown,猫'

// 「,」で区切って配列に
keywords = keywords.split(",");

// 配列から重複削除
keywords = keywords.filter(function (element, index, self) {
  return self.indexOf(element) === index;
});
実際に設定してみたサイトがこちら

参考サイト
配列の重複をはじく、もしくは重複を取り出す(Qiita)
Array.filter(JavaScript MDN)

2014年4月24日木曜日

Express+MongoDB+monkで、特定のフィールドのみデータを取得「Projections」

Expressフレームワーク(3.5.1)+MongoDB(2.4.9)+monkで、特定のフィールドのみデータを取得です。MongoDBの「Projections」という機能を利用するらしい。

/routes/blog.js
// 「tags」フィールドのみを取得
collection.find({},{ fields:{ tags:1} },function(error, tags){

});

// 「tags」フィールドを除き、それ以外を取得
collection.find({},{ fields:{ tags:0} },function(error, notags){

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



参考サイト
Exclude fields from result in MongoDB monk(Stack Overflow)

2014年4月23日水曜日

サイトのSEO対策に点数をつけ、改善点を指摘してくれる「Egosize」

サイトのSEO対策に点数をつけ、改善点を指摘してくれる「Egosize」 該当サイト内のみでなく、ソーシャルサイトのリンクを含めた総合的な視点で判断してくれます。当サイトは、100点満点中、57点。「Your Page Rank is too low. Try to publish original content more often.(ページランクが低すぎるため、より頻繁にオリジナルなコンテンツを公開すること。)」と、厳しいお言葉をいただきました(笑)。改善できるかどうかはわかりませんが、真摯に受け止めましょう。

2014年4月22日火曜日

「humans.txt」とは、何?

humans.txt」とは、何? ということで、調べてみました。robots.txtが検索エンジンのクローラー向けに設置するもので、人間向けにサイトの説明としてhumans.txtを設置しようという試みのようです。SEOに関係するんでしょうか? ブロガーには設置できないような気もしますが(笑)。



参考サイト
[web制作]humans.txt ― webサイトに基本情報を設置しよう(WEBCRE8.jpさん)

2014年4月21日月曜日

ウェブコンテンツをドラッグ&ドロップでブックマークできる「Dragdis」

ウェブコンテンツをドラッグ&ドロップでブックマークできる「Dragdis」 ユーザー登録し、Chrome拡張機能をインストールして利用します。写真や文章の一部をドラッグ&ドロップで、Dragdisのメニュー上に持っていくだけでコンテンツをブックマークしてくれます。動作がちょっと遅いかなと思ったりもしますが、それを補って余りある、きれいなUIと操作性です。Googleのサービスの一つかと思わせるほど、完成度が高いです。



2014年4月20日日曜日

elementary OSにVLゴシックフォントをインストール

elementary OSVLゴシックフォント(Japanese TrueType font from Vine Linux)をインストールしてみました。メニューのソフトウェアセンター(Software Center)を開き「font」と入力すると、インストール可能なフォントリストが表示されます。あとは、適当なものを選んでインストール。ギザギザのフォントから一転、VLゴシックフォントで、清潔で愛着のある印象の文字に変わり、elementary OSの優美なGUIが一層引き立ちます。

2014年4月19日土曜日

Ubuntuを元にし、Mac OSによく似たディストリビューション「elementary OS」を再びインストール

Ubuntuを元にし、Mac OSによく似たディストリビューション「elementary OS」を再びインストールしてみました。何が素晴らしいって、CD-R(670MB程度)でインストールできて、動作が非常に軽いです。ソフトも最小限のものしかインストールされません。GUIのDock(ドック)周りを含め、前回試した時よりも明らかに洗練されています。細かく見ると、メニューが英語のままだったり、日本語フォントがギザギザで、読みにくかったりと、ちょっと抜けている部分はあるのですが、それでも、トータルで見ると、なかなかの完成度。気に入ったので、今回は、長期でテストしてみるつもりです。



2014年4月18日金曜日

2要素認証をまとめたサイト「Two Factor Auth (2FA)」

2要素認証をまとめたサイト「Two Factor Auth (2FA)」 ログインIDとパスワード以外に、電話認証など、2段階以上の認証方式を採用しているサイトのリストです。世界的に見るとメジャーなのでしょうが、知らないサイトが多かったのでメモです。世界は広い。

2014年4月17日木曜日

ソーシャルサイトで、どれだけシェアされているかをカウントしてくれる「Shared Count」

ソーシャルサイトで、どれだけシェアされているかをカウントしてくれる「Shared Count」 URLを入力すると、Facebook、Twitter、Pinterest、Linkedin、StumbleUponと、まとめて調べてくれます。json形式で結果が返ってくるURLも合わせて表記されているので、非常にわかりやすい。



Facebook
http://graph.facebook.com/http://youdomain/

Twitter
https://cdn.api.twitter.com/1/urls/count.json?url=http://youdomain/

Pinterest
http://api.pinterest.com/v1/urls/count.json?callback=&url=http://youdomain/

Linkedin
http://www.linkedin.com/countserv/count/share?url=http://youdomain/&format=json

StumbleUpon
http://www.linkedin.com/countserv/count/share?url=http://youdomain/&format=json

2014年4月16日水曜日

オンライン学習サイト「Udemy」

オンライン学習サイト「Udemy」 コースを受講出来るだけでなく、教える側になるための様々な機能やプラットフォームが用意されていて、誰でも簡単にオンラインコースを構築できます。日本語を含め、複数言語に対応しており、そのコースの数に圧倒されてしまいます。豊かな教育の世界が広がっています。素晴らしい。



2014年4月15日火曜日

各種クラウドサービスを一元管理できる「CloudKafé」

各種クラウドサービスを一元管理できる「CloudKafé」 例えば、クラウドに保存していた目当ての写真を一枚探す場合、Google Driveに保存していたのか、Dripboxに保存していたのか、あるいは、OneDriveに保存していたのか、わからなくなってしまう場合があります。そんな状態を解消し、一元管理してしまおうというサービスが、このCloudKafé。OAuth認証で各種クラウドアカウントを認証することにより、集中管理できる様になります。ちょっと危険な気もしますが、便利であることは確か。



参考サイト CloudKafé YouTube Channel

2014年4月14日月曜日

デザイナーさんの作品紹介ソーシャルサイト「Dribbble」

デザイナーさんの作品紹介ソーシャルサイト「Dribbble」 デザイナーさんでなくとも、眺めているだけで自分の中に眠っているクリエイター魂を刺激してくれること、間違いなし。いろいろとアイディアが膨らみます。自分の好みにあったデザイナーさんとコラボレーションしてみても面白いかもしれません。



2014年4月13日日曜日

WWW(World Wide Web)誕生25周年

WWW(World Wide Web)が誕生して25周年です。わずか四半世紀で、ここまで広がりを見せたわけですから、自動車やテレビにも増して、革命的な発明と言えるでしょう。ただ、WWWの考案者であるティム・バーナーズリーさんは、監視社会に警鐘を鳴らしているようです。更に時が進んで25年後、ウェブがどう進化しているのか。このブログは続いてるだろうか(笑)?





参考サイト
ウェブ誕生25周年、考案者が「ネット権利章典」策定を呼び掛け(AFPBB News)

2014年4月12日土曜日

Youtube動画をレスポンシブ対応表示にするCSS

Youtube動画をレスポンシブ対応表示にするCSS(Responsive Youtube Embed)を試してみました。デザインが崩れず、良い感じです。素晴らしい。

CSS
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
html
<div class="video-container">
<iframe src="http://www.youtube.com/embed/sampleid" frameborder="0" width="480" height="365"></iframe>
</div>

2014年4月11日金曜日

OperaブラウザーのアドオンRSSリーダー「Smart RSS」

OperaブラウザーのアドオンRSSリーダー「Smart RSS」 シンプルで動作が軽快、そして、RSS名、RSSのタイトル、RSS本文と並んだ3列構成の使い勝手も、よく練られているな思います。気に入りました。

2014年4月10日木曜日

Express+MongoDB+monkで、データのカウント取得

Expressフレームワーク(3.5.1)+MongoDB(2.4.9)+monkで、データのカウント取得です。うまく取得できたので、ページネーション(ページ送り)も設定してみました。良い感じだ。

/routes/blog.js
var collection = db.get('blog');
collection.count({}, function (error, count) {

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



参考サイト
Mongo/Monk count of objects in collection(Stack Overflow)
How to paginate with Mongoose in node.js?(Stack Overflow)

2014年4月9日水曜日

Expressフレームワークで、Markdownの「node-markdown」

Expressフレームワーク(3.5.1)で、Markdownの「node-markdown」を設定してみました。

app.js
var md = require("node-markdown").Markdown;
/routes/blog.js
res.render('blog/show', {
  md: md,
  blog : docs
});
/views/blog/show.ejs
<%- md(blog.contents) %>

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



参考サイト
How can I render markdown in express.js jade template?(Stack Overflow)

2014年4月8日火曜日

Expressフレームワークで、バリデーション「validator.js」

Expressフレームワーク(3.5.1)で、入力チェック用にバリデーションの「validator.js」を設定してみました。バリデーションのみでなく、サニタイズにも対応しているらしい。

/routes/blog.js
var errors = new Object();
var name = req.body.name;
var email = req.body.email;
var age = req.body.age;
if ( validator.isNull(name) ) {
  errors["name"] = "お名前を入力して下さい。" ;
}
if ( !validator.isEmail(email) ) {
  errors["email"] = "正しいメールアドレスを入力して下さい。" ;
}
if ( !validator.isNumeric(age) ) {
  errors["age"] = "年齢を数字で入力して下さい。" ;
}

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

2014年4月7日月曜日

node.jsで、オブジェクトの値(empty)をチェック

node.jsで、オブジェクトの値(empty)をチェックするテスト。オブジェクトを連想配列のように利用できるということで、よくわかっていないので、後で再検証すべし。

var errors = new Object();

errors["title"] = "タイトルを入力して下さい。" ;
errors["text"] = "本文を入力して下さい。" ;

if (Object.keys(errors).length) {
  // errorsあり
} else {
  // errorsなし
}

参考サイト
How can I check if a JSON is empty in NodeJS?(Stack Overflow)
配列とオブジェクトと連想配列(Ajax専さん)

2014年4月6日日曜日

Windows1.01を体験できる「pcjs.org」

Windows1.01を体験できる「pcjs.org」 CPUが4.77Mhz、メモリが256Kb、CGAデイスプレイという構成とのこと。ブラウザ上で色々操作することが可能です。ビープ音が、時代を感じさせます(笑)。貴重な経験をさせてもらった気分。

2014年4月5日土曜日

EJSのカスタムフィルター(Filter)

node.jsExpressフレームワーク(3.5.1)で、EJSのカスタムフィルター(Filter)です。文字列短縮の例(mytruncate)です。

app.js
var ejs = require('ejs');

ejs.filters.mytruncate = function(str){
  if (str.length > 100) {
    str = str.substring(0,100) + "...";
  }
  return str;
}
/views/index.ejs
<%=: blog.contents | mytruncate %>

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

参考サイト
ejs で使える filter の作り方(コードを舐める日々さん)
Add plugin to ejs?(Stack Overflow)
Adding a Filter to EJS in Node.ACS(Appcelerator)

2014年4月4日金曜日

Express+MongoDBで、データの並び替え

Expressフレームワーク(3.5.1)+MongoDB(2.4.9)で、データの並び替えです。データベースでいうところの「order by」。 sort を使って並べ替えできるらしい。

/routes/index.js
exports.index = function(db) {
  return function(req, res) {
    var collection = db.get('blog');
    collection.find({},{ limit:10, sort:{ createat : -1 } },
   function(err,docs){
      res.render('index', {
        title: 'ホーム',
        bloglist : docs
      });
    });
  };
};

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



参考サイト
Monk sorting with limit option(Stack Overflow)

2014年4月3日木曜日

EJSのフィルター(Filter)にハマる。

node.jsExpressフレームワーク(3.5.1)で、EJSのフィルター(Filter)に見事なまでにハマりました。文字列置換、replace の例です。先頭のデリミタに続くイコール(=)、あるいはマイナス(-)の後に「:(コロン)」が付きます。見落として、全く気づきませんでした。大きな回り道を強いられました(笑)。

// 誤り
<%- blog.text | replace:/[\n]/g,'<br />' %>

// 正しい
<%-: blog.text | replace:/[\n]/g,'<br />' %>

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

2014年4月2日水曜日

ExpressフレームワークにEJSのビューヘルパー「express-helpers」を組み込む

node.jsExpressフレームワーク(3.5.1)EJSのビューヘルパー「express-helpers」を組み込んでみました。Ruby on Rails のヘルパーのごとく、便利に利用できます。

package.json
{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.5.1",
    "express-helpers": "1.3.1",
    "ejs": "*"
  }
}
app.js
var app = express();
var helpers = require('express-helpers')(app);
/views/index.ejs
<%- link_to('ヘルパー', '/home', {class : "btn btn-default"}) %>

<% form_for("user", function(f){ %>
  <%- f.label_for("ユーザーネーム") %>
  <%- f.text_field("username") %>
  <%- f.submit() %>
<% }) %>

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



参考サイト
mhayashi/express-helpers(GitHub)

2014年4月1日火曜日

node.jsのExpressフレームワーク再び

node.jsExpressフレームワークに再び手を出してみようかと。MongoDBを勉強しようと色々と見返していたら、Expressが見えてきた気がしたので、また挑戦です。一度挫折しているので、失うものはありません(笑)。再びハローワールドから。今回は、テンプレートエンジンにEJSを設定してみました。

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

express --help
-h, --help          output usage information
-V, --version       output the version number
-s, --sessions      add session support
-e, --ejs           add ejs engine support (defaults to jade)
-J, --jshtml        add jshtml engine support (defaults to jade)
-H, --hogan         add hogan.js engine support
-c, --css   add stylesheet  support (less|stylus) (defaults to plain css)
-f, --force         force on non-empty directory

# myapp作成
express -e myapp