2017年1月30日月曜日

JavaScript ベスト・オブ・ザ・イヤー 2016

https://risingstars2016.js.org/ja/

#10 静的サイトジェネレータ

#1 Hexo

A fast, simple & powerful blog framework, powered by Node.js.

#2 Gatsby

Transform plain text into dynamic blogs and websites using React.js

#3 Phenomic

Modern static* website generator based on the React and Webpack ecosystem

#4Metalsmith

An extremely simple, pluggable static site generator.

#5Harp

Static Site Server/Generator with built-in preprocessing

静的サイトジェネレータ（"Static Site Generators" 略してSSG）は .html, .css, JavaScriptといったWebサイトを構成するファイル一式を生成してくれるツールです。生成されたファイルは、ApacheやNginxのシンプルなWebサーバーへ悩み無用でデプロイできます。データベースやWebアプリケーションフレームワークのセットアップも不要です。例えば、SGGのひとつである Gatsby は自らをこう表現しています:

1995年ころのようにサイトを構築する。

静的なWebサイトは高速、堅牢で、メンテナンスも容易です。

SSGが人気なのは、静的なWebサイトを無料でホスティングできるサービスが多いことも要因でしょう。

Github pages

Gitlab pages

Netlify

Surge

Now static

Hexo

2016年でもっとも人気のあったSSGがNode.jsでビルドする Hexo です。とてもよくできたSSGで、WordpreessのようなCMSに近く、ブログの構築に利用できます。i18nプラグインを含め、多くのフィーチャを提供しています。

Gatsby

ニューカマーの Gatsby のソリューションは非常に興味深いものです。静的htmlファイルを生成するのにReactのエコシステムを利用しており、競合と一線を画しています。Reactコンポーネントを取り込んでいることからもわかるように、Markdownやサーバーサイドレンダリングをサポートしており、パワフルな仕上がりになっています。

Docker で PHP 開発環境を作る

【超簡単】Docker でモダンな PHP 開発環境を作る (PHP, MySQL, PHP-FPM, nginx, memcached) - koni blog

http://koni.hateblo.jp/entry/2017/01/28/150522

2017年1月29日日曜日

AWS EC2でphpMyAdminを使えるようにする

phpMyAdminの設定ファイルを開き、アクセス許可設定を修正する。

$ sudo nano /etc/httpd/conf.d/phpMyAdmin.conf

このファイルの中に、<IfModule mod_authz_core.c>という要素があるので、これを探し、その更に下の<RequireAny>を探す。

<RequireAny>
#Require ip 127.0.0.1
Require all granted
Require ip ::1
</RequireAny>

※参考：AWS EC2へwordpressを移行する方法。
http://toach.click/wordpress-to-ec2/

Linux MySQLに接続する

$ mysql -u ユーザー名 -D データベース名 -p

-u オプションでは MySQL に接続するユーザー名を指定します。
-D オプションでは接続先のデータベース名を指定します。
-p オプションはパスワードを送信する場合に指定します。

PHP メール受信内容をサーバーに保存する

「Postfixでメール受信時に PHP等のプログラムを実行する方法」

WordPress 「wp-mta」

2017年1月27日金曜日

macOS Sierraへアップグレードする前の注意点まとめ。 | AAPL Ch.

http://applech2.com/archives/macos-10-12-sierra-upgrade-check.html

2017年1月25日水曜日

クラウド契約 CloudSign（クラウドサイン）|無料で契約締結ができるウェブ完結型のクラウド契約サービス

https://www.cloudsign.jp/

HTMLプロトタイプ

ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | perspective｜東京のWeb制作会社｜株式会社ベイジ｜baigie inc.

https://baigie.me/sogitani/2016/04/goodbye-wireframe/

コーシャ（Kosher）認定とは

ユダヤ教の食事規定"コーシャ"

岩手の地酒株式会社南部美人さまのホームページより
今、海外で注目を集める食事規定"コーシャ"とは
http://www.nanbubijin.co.jp/tres_bon_mariage/kosher/

地域経済分析システム（通称：RESAS）

内閣官房（まち・ひと・しごと創生本部事務局）及び経済産業省が、地上自治体による様々な取組を情報面から支援するために、2015年４月より提供している「地域経済分析システム（通称：「RESAS」（リーサス））」を活用することで、訪日外国人旅行客の実態、消費動向等を把握することが可能

RESAS 地域経済分析システム
https://resas.go.jp/

2017年1月24日火曜日

express実践入門 · GitHub

https://gist.github.com/mitsuruog/fc48397a8e80f051a145

Node.js + Express はじめの一歩

ゼロからはじめるExpress + Node.jsを使ったアプリ開発 - Qiita

http://qiita.com/nkjm/items/723990c518acfee6e473

Express + Node.jsで基本を理解した次の一歩 - ディレクトリ構成をルーティング・ミドルウェアを理解して考えてみる - Qiita

http://qiita.com/nkjm/items/2016e331f74f1b8ab465

わかりやすい Deep learning スライド

Deep learningの概要とドメインモデルの変遷

http://www.slideshare.net/ssuser756ec5/deep-learning-71259665

Gitlab CIを使ってSphinxのドキュメントを自動でPDFにビルドする - once upon a time,

http://chezou.hatenablog.com/entry/2017/01/23/123835

Modern JavaScript概観、そしてElectronへ

http://blog.satotaichi.info/modern-javascript_201701/

2017年1月23日月曜日

2017年に注目したいWebデザイン業界の動向やトレンド総まとめ - PhotoshopVIP

http://photoshopvip.net/97736

javascriptライブラリまとめ

javascriptのライブラリを一覧にしてまとめてみた

https://trueman-developer.blogspot.jp/2016/05/javascript.html

iCheck.js チェックボタン・ラジオボタンのカスタマイズ

iCheck.js

チェックボタン・ラジオボタンのカスタマイズ
MITライセンス
http://icheck.fronteed.com/
http://www.tam-tam.co.jp/tipsnote/javascript/post4428.html

https://trueman-developer.blogspot.jp/2016/05/javascript.html

Electron

Re:ゼロからはじめるElectron 〜Electronでゲームを作りたかった話〜 #kyotojs // Speaker Deck

https://speakerdeck.com/potato4d/re-zerokarahazimeruelectron-electronde-gemuwozuo-ritakatutahua-number-kyotojs

2017年1月19日木曜日

Node.js - Base64エンコード画像を画像ファイルとして保存

Node.js で簡単にできた。

save base64 encoded image

https://gist.github.com/madhums/e749dca107e26d72b64d

 base64-image-upload.js

	/*
	* Taken from http://stackoverflow.com/questions/5867534/how-to-save-canvas-data-to-file/5971674#5971674
	*/

	var fs = require('fs');
	// string generated by canvas.toDataURL()
	var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"
	+ "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"
	+ "3gAAAABJRU5ErkJggg==";
	// strip off the data: url prefix to get just the base64-encoded bytes
	var data = img.replace(/^data:image\/\w+;base64,/, "");
	var buf = new Buffer(data, 'base64');
	fs.writeFile('image.png', buf);

AWS EC2 サーバー初期構築設定

これは参考になりました。

AWS　EC2を作ったらこれはやっておけ〜　- サーバー初期構築 –｜ prophet STAFF BLOG

http://blog.prophet.jp/1208

2017年1月18日水曜日

PHP: Base64でエンコードされた画像データを、画像ファイルとして保存

PHPの場合

base64_decode() でバイナリに戻し、それを file_put_contents() で保存

I have a base64 encoded png, how do I write the image to a file in PHP? - Stack Overflow

http://stackoverflow.com/questions/1532993/i-have-a-base64-encoded-png-how-do-i-write-the-image-to-a-file-in-php

AWS EC2/S3 最初の設定

Amazon EC2編～EBSボリュームを追加してみよう！Update～｜AWS EC2 EBS Windows linux ｜ | ナレコムAWSレシピ

https://recipe.kc-cloud.jp/archives/8450

Amazon EC2編～EBSボリュームサイズを変更してみよう！Update～｜AWS EC2 EBS Windows linux｜ | ナレコムAWSレシピ

https://recipe.kc-cloud.jp/archives/8417

Amazon S3 編。S3 バケットの作成をご説明 | 使い方・ナレコムAWSクラウド | ナレコムAWSレシピ

https://recipe.kc-cloud.jp/archives/783

Amazon S3 編。S3 バケットへのアップロードとアクセスについて解説します。 | ナレコムAWSレシピ

https://recipe.kc-cloud.jp/archives/853

Chrome デベロッパーツール便利な機能

[翻訳]Chrome デベロッパーコンソール　意外と知られていない10の機能 - Qiita

http://qiita.com/aosho235/items/f579ffd4d0901017d76b

1. jQueryが入っていなくても$$で同等のことができる

jQueryが入っていなくても$$('.hoge'), $$('#hoge'), $$('tagName')で同等のことができる（$が2個であることに注意）。
$が1個の$('.hoge')も定義されているが、こちらは配列でなく1個の要素を返してくる。

2. ページを編集できる

document.body.contentEditable=true

とすると、ブラウザ上であたかもテキストエディタのようにページを編集できるようになる。
このモードにいるときはページ内の要素がクリックに反応しなくなるので、

document.body.contentEditable=false

で元に戻せる。

3. 要素に結び付けられたイベントリスナを調べる

getEventListeners($('#firstName'))

4. イベント発生を監視してログ出力

monitorEvents($('selector'))で全てのイベントを監視
monitorEvents($('selector'),'eventName')で指定のイベントを監視
monitorEvents($('selector'),['eventName1','eventName3',….])で複数のイベントを指定
unmonitorEvents($('selector'))で監視解除

5. console.timeで所要時間を計測

console.time('myTime'); //Starts the timer with label - myTime    for(var i=0; i < 100000; i++){    2+4+5;  }    console.timeEnd('mytime'); //Ends the timer with Label - myTime    //Output - myTime:12345.00 ms

6. オブジェクトの配列の場合はconsole.logよりconsole.tableの方が見やすい

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

のような場合はconsole.table(myArray)とすると

7. コンソールでもインスペクトができる

要素を右クリックして「検証」を選ぶ代わりに、コンソールでinspect($('selector'))としてもインスペクトできる。

8. dirで要素のプロパティの一覧を表示できる

dir($('selector'))

9. $_で最後に評価した値を取得できる

> 1+2  3  > $_  3

10. clear()でコンソールをクリアできる

clear()

SQLiteでクラスタリング/Web API化を実現する「rqlite」レビュー - さくらのナレッジ

http://knowledge.sakura.ad.jp/knowledge/6120/

不正アクセスからサーバを守るfail2ban。さくらのクラウド、VPSで使ってみよう！ - さくらのナレッジ

http://knowledge.sakura.ad.jp/knowledge/7377/

2017年1月17日火曜日

UXデザイナーが備えておきたいツール・サービス厳選20個まとめ | コリス

http://coliss.com/articles/build-websites/operation/design/valuable-tools-for-ux-designers.html

2017年1月15日日曜日

Git 変更を取り消す

[git] 変更を取り消す - YoheiM .NET
http://www.yoheim.net/blog.php?q=20140201

2017年1月13日金曜日

2017年1月12日木曜日

PHPを学ぶ時、最初に憶えて欲しいvar_dump | Simple Colors

http://www.warna.info/archives/1105/

IE対策：互換表示させない。 - Qiita

http://qiita.com/rico/items/09c896290e218ed2b7c3

<head>内に以下をいれる。

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

IE11以上の表示に強制設定

AWS VPC概要

クラウドだけどプライベートさえあれば関係ないよねっ | サーバーワークスエンジニアブログ
http://blog.serverworks.co.jp/tech/2012/11/27/awsvpcprivatecloud/

LinuxでのFTPサーバー（vsfptd）設定

FTPサーバー設定 | 日本Geeks
https://japanesegeek.wordpress.com/2013/03/01/ftp%e3%82%b5%e3%83%bc%e3%83%90%e3%83%bc%e8%a8%ad%e5%ae%9a/

「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する – lesson me

http://www.lesson5.info/?p=392

2017年1月11日水曜日

PHP4でsimplexml_load_file関数を使うには

simplexml_load_file関数はPHP4で使えなかったので、以下を参考にしたところすぐにできました。
助かります。

参考
PHP4 でsimplexmlを使う方法 | みる米技術部
http://tech.mirukome.com/php4-%E3%81%A7simplexml%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/

手順

１．simplexml.class.php を以下のサイトからダウンロード
http://www.phpclasses.org/package/4484-PHP-Load-XML-files-in-PHP-4-like-SimpleXML-extension.html
※ダウンロードには上記サイトでユーザー登録が必要です。

２．本体のPHPで１のファイルを読み込み

require_once("simplexml.class.php");

３．本体のPHPにファンクションを追加

if(!function_exists("simplexml_load_file")){
function simplexml_load_file($file){
$sx = new simplexml;
return $sx->xml_load_file($file);
}
}

以上でPHP5のsimplexmlと同様に呼び出して使えました！！

PHPで日付関数を使いこなす（date, strtotime） - Qiita

http://qiita.com/shuntaro_tamura/items/b7908e6db527e1543837

GoogleのFeed APIがほんとうに使えなくなった

とりあえず以下で対処しました。

【PHP】外部サイトのRSS情報を取得して表示させる方法。 - ONZE
http://on-ze.com/archives/1615

以下も使えそうです。

「Google Feed API」の代替として「rss-php」でRSSやAtomフィードを取得・表示する
http://www.lesson5.info/?p=392

PHPでデータベースに接続するときのまとめ - Qiita

http://qiita.com/mpyw/items/b00b72c5c95aac573b71

たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita

http://qiita.com/mpyw/items/a816c6380219b1d5a3bf?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=383650bdcf-Qiita_newsletter_242_11_1_2017&utm_medium=email&utm_term=0_e44feaa081-383650bdcf-33160825

2017年1月8日日曜日

Git 直前のコミットに変更を追加する

まだPushしてない場合、以下のようにします。

１．変更したファイルをステージに
$ git add .

２．登録されたインデックスを直前のコミットにまとめる
$ git commit --amend --no-edit

これでOKです。

参考
git commit --amendでaddし忘れたファイルを救済する
http://qiita.com/piruty_joy/items/402b5bf83479f7e3480a