2016年7月31日日曜日

オーディオ関連のJavaScriptライブラリ「Howler.js」

オーディオ関連のJavaScriptライブラリ「Howler.js」 ライブストリーミングも扱えるところが面白いです。Live Radioのサンプルがこちら



参考サイト
オーディオ関連の再生や操作を実現するJavaScriptライブラリ「Howler.js 2.0」(OSDN Magazine)
goldfire/howler.js(GitHub)

2016年7月30日土曜日

PHP7対応の「Phalcon 3」がリリース!

PHP7対応の「Phalcon 3」がリリースされました。「2.1 is dead, all hail 3.0」と説明がありますので、2.1はお蔵入りとなり、3.0になった模様です。


2016年7月29日金曜日

「Phoenix」フレームワークで「Hello World」

Phoenix」フレームワークで「Hello World」です。なんとか、トップページを表示するところまでできました。嬉しい(笑)。

$ mix phoenix.new web --no-brunch --no-ecto

We are all set! Run your Phoenix application:

    $ cd web
    $ mix phoenix.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phoenix.server

$ cd web
$ mix phoenix.server
[info] Running Web.Endpoint with Cowboy using http://localhost:4000



参考サイト
Installation(Phoenix)

2016年7月28日木曜日

「Phoenix」フレームワークのインストール

Phoenix」フレームワークのインストールです。環境はUbuntu 15.04です。

& wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb
& sudo apt-get update
& sudo apt-get install esl-erlang
& sudo apt-get install elixir
コマンドのパスを通す。anon-proxy をインストールするように促されても無視しましょう。全く、別物です。
export PATH="$PATH:/lib/elixir/bin"
& mix local.hex
& mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
& sudo apt-get install nodejs-legacy
参考サイト
Installation(Phoenix)
mix deps.get , mix local.hex etc not working(elixir-lang/elixir)

2016年7月27日水曜日

Elixirで書かれたハイスケーラビリティの高速フレームワーク「Phoenix」

Elixirで書かれたハイスケーラビリティの高速フレームワーク「Phoenix」に手を出します! 友人が大絶賛して勧めるもので、押し切られるかたちで、ちょっと勉強してみます。また亀の歩みで進めます。どうぞ、よろしく。





参考サイト
Elixir - 次に来る大物Web言語(Qiita)
今、プログラミング言語を選ぶということ: Scala, Go, Elixir(ゆびてく)

2016年7月26日火曜日

CSSの「flexbox」とは?

CSSの「flexbox」とは? ということで調べてみたのですが、どうも、よくわかりませんでした。しかし、CSSも進化しているということだけは、実感できました。

flexbox は、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードです。多くのアプリケーションにおいて、flexible box モデルは、float を使わず、そして flex container のマージンがそのコンテンツのマージンを相殺することも無く、block モデルを超えるための手段を提供します。


参考サイト
これからのCSSレイアウトはFlexboxで決まり!(Webクリエイターボックスさん)
Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します(Scene Liveさん)
A Complete Guide to Flexbox(CSS-Tricks)
CSS flexible box の利用 - CSS(MDN)
CSS3 Flexible Box(w3schools.com)

2016年7月25日月曜日

プログラミング言語構文のハイライト「highlight.js」

プログラミング言語構文のハイライト「highlight.js」を使ってみました。簡単便利で、美しいコードのハイライトが可能です。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


参考サイト
コードのハイライト表示用 JS ライブラリ highlight.js の使い方(Qiita)

2016年7月24日日曜日

アプリやサービスとを自動化されたワークフローで結びつけるMicrosoftのIFTTT「Flow」

アプリやサービスとを自動化されたワークフローで結びつけるMicrosoftのIFTTT「Flow」 多数のテンプレートが用意されており、簡単にはじめられます。



2016年7月23日土曜日

Googleが、Chrome Canaryでポスト量子暗号の実験

Googleが、Chrome Canaryでポスト量子暗号の実験を始めるとのこと。量子コンピュータの時代が、すぐそこに迫っている?!
現在主流の「公開鍵暗号」は「量子ゲート方式」の量子コンピュータによって破られる恐れがある。「ポスト量子暗号」は、量子コンピュータでも破られない暗号だという。
「量子ゲート方式」の量子コンピュータで「ショアのアルゴリズム」を使用すると、大きな数の因数分解が妥当な時間内にできてしまう可能性がある。そのため量子ゲート方式の量子コンピュータが実現すると、現在の公開鍵暗号が解かれてしまうと言われている。


参考サイト
Google、ポスト量子コンピューティング時代の新暗号化アルゴリズムをChrome Canary版で実験開始(TechCrunch Japan)
Googleが「ポスト量子暗号」をChromeの実験版に搭載、量子コンピュータへの備え(ITpro)

2016年7月22日金曜日

Firefoxがユーザーの目には見えない特定のFlashコンテンツを遮断

Firefoxがユーザーの目には見えない特定のFlashコンテンツを遮断するとのこと。Flashも、いよいよ、お役御免ということになるのでしょうか。
Firefoxは、8月からユーザーの目には見えない特定のFlashコンテンツをブロックすると発表した。 Flashを巡っては脆弱性を突く攻撃が耐えないことから、主要ブラウザで脱Flashの動きが加速している。



参考サイト
Firefox、特定のFlashコンテンツを遮断へ 脱Flashを加速(ITmedia エンタープライズ)

2016年7月21日木曜日

1000行以下で開発された超軽量エディタ「Kilo」

1000行以下で開発された超軽量エディタ「Kilo」 ほかのライブラリに依存することなく開発されており、C言語による学習素材やエディタ開発のベースソースコードとして利用できるとのこと。
Kiloのソースコードであるkilo.cにはC言語プログラミングで使われてる基本的で実用的な操作が端的にまとまっており参考になる。ソースコードが短く全体が見通しやすい。ターミナルを使ったUIを開発する際のサンプルとしても利用できるなど興味深い教材と言える。


参考サイト
C言語1000行以下で開発されたエディタ「Kilo」(ニフティニュース)
Kilo - 1000行以下のコードで実装された超コンパクトなテキストエディタ(ソフトアンテナブログさん)
antirez/kilo(GitHub)

2016年7月20日水曜日

PHP、Python、Apacheなどにセキュリティホール「httpoxy」

PHP、Python、Apacheなどにセキュリティホール「httpoxy」 パッチを適用する必要があるようです。
PHP、Go、ApacheのHTTPサーバ、Apache TomCat、PHP実行環境のHHVM、Pythonなどをはじめとするさまざまなサーバサイド関連ソフトウェアが、この「httpoxy」と名付けられたセキュリティホールの影響を受ける。


参考サイト
15年来のセキュリティホール「httpoxy」、PHPやPythonなどCGIアプリに影響(ZDNet Japan)

2016年7月11日月曜日

Electron、一区切り

ネタが尽きてきたので、Electronは一区切りです。

プログラミング的には、ほぼ Node.js です。

あとは、
  • ローカルのファイル操作
  • Notificationメッセージの表示
  • メニューの使い勝手

などを実現したい場合は、非常に有益だと思います。 何より、同じソースで、Windows、Mac、Linux環境に対応したクライアントソフトが書けるのは、感動であります。

ただ、このネットワーク時代、ネットワークの機能がないと何の面白みもないソフトになってしまいますし、 ウェブアプリで、ほとんどのことは実現で出来てしまうようにも思います。 実際、Electronでも、ウェブブラウザの機能を読み込んでの処理が多いです。

クライアントアプリでないといけない場合を除いて、 ネットワーク機能だけで差別化を図るには、なかなか難しいのかなという印象も受けました。メニューの使い勝手を上げてUIを凝ったものにする?

とにかく、想像力を掻き立てられることは、間違いありません! 引き続き、チャレンジしていきたいと思います。

2016年7月10日日曜日

欧州で自動運転ロボットによる宅配サービスが開始

欧州で自動運転ロボットによる宅配サービスが開始されるとのこと。これ、階段などの段差はどうやって越えるのでしょう?
6つの車輪を持つこのロボットは自律走行するが、コントロールセンターにいる人間のオペレーターによって監視される。ロボットは行く手に歩行者を検出すると道を譲る。さらに配達先に到着すると、受取人はスマートフォンをタップするだけで、おいしい積み荷を取り出せる。




参考サイト
Skypeの共同創立者、欧州で自動運転ロボットによる宅配サービスを開始へ(CNET Japan)
Starship Technologies

2016年7月9日土曜日

JavaScriptのフォームバリデーションライブラリ「Parsley」

JavaScriptのフォームバリデーションライブラリ「Parsley」 使ってみたいなと思わせるものが あったので、メモです。「data-parsley-」という属性を組み合わせることで、複雑なバリデーションも可能。

<textarea id="message" 
  class="form-control" 
  name="message" 
  data-parsley-trigger="keyup" 
  data-parsley-minlength="20" 
  data-parsley-maxlength="100" 
  data-parsley-minlength-message="20文字以上入力してください。" 
  data-parsley-validation-threshold="10"></textare>


参考サイト
guillaumepotier/Parsley.js(GitHub)

2016年7月8日金曜日

Electronで、カメラ起動(camera)

Electronで、カメラ起動(camera)です。Electronでと言うよりは、Navigator.getUserMedia APIを利用しての起動ですが、ビデオ表示できました。面白い。

renderer.js
navigator.webkitGetUserMedia({video: true},
  function(stream) {
    document.getElementById('camera').src = URL.createObjectURL(stream);
  },
  function() {
    alert('could not connect stream');
    console.log('could not connect stream');
  }
);
index.html
<video id="camera" autoplay></video>

参考サイト
camera(electron-sample-apps)
HTML5 での映像と音声の取得(HTML5 Rocks)

2016年7月7日木曜日

Electronで、クラッシュレポート(crashReporter)

Electronで、クラッシュレポート(crashReporter)です。 クラッシュしたデータをリモートのURLにサブミットできます。これは便利ですね。

renderer.js
const {crashReporter} = require('electron');

crashReporter.start({
  productName: 'appName',
  companyName: 'companyName',
  submitURL: 'http://www.example.com/error',
  autoSubmit: true
});

document.querySelector('#crash').addEventListener('click', function () {
  // 強制的にクラッシュ
  process.crash();
});

参考サイト
electron/crashReporter(Electron)
crash-report(electron-sample-apps)

2016年7月6日水曜日

Electronで、Notificationメッセージの表示

Electronで、Notificationメッセージの表示です。これは簡単ですね。

renderer.js
let myNotification = new Notification('メッセージ', {
  body: 'こんにちは、世界!'
});

myNotification.onclick = () => {
  console.log('Notification clicked');
};


参考サイト
electron/desktop-environment-integration(Electron)
electron-sample-apps/notifications(electron-sample-apps)

2016年7月5日火曜日

Electronの、desktopCapturer挫折

Electronの、desktopCapturer挫折です。ダメ。streamの扱いが、さっぱり分からない。笑ってやってください。空虚な意味のないブログです。すみません。

const {desktopCapturer} = require('electron');

desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
  if (error) throw error;
  for (let i = 0; i < sources.length; ++i) {
    if (sources[i].name === 'Electron') {
      navigator.webkitGetUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sources[i].id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }, gotStream, getUserMediaError);
      return;
    }
  }
});

function gotStream(stream) {
  document.querySelector('video').src = URL.createObjectURL(stream);
}

function getUserMediaError(e) {
  console.log('getUserMediaError');
}

2016年7月4日月曜日

Electronのサンプルアプリ集(electron-sample-apps)

Electronのサンプルアプリ集(electron-sample-apps)です。機能別にサンプルが並んでいますので、一つ一つ真似していけば、実力アップ、間違いなし。



2016年7月3日日曜日

Ruby on Rails 5.0がリリース

Ruby on Rails 5.0がリリースされました。ものすごく進化している印象です。
「Rails 5.0」は新機能として、接続やサーバサイド処理のチャンネルレイヤー、クライアントサイドのJavaScriptレイヤーの一括管理が可能なWebソケットである「Action Cable」を搭載している。




参考サイト
Webアプリケーションフレームワーク「Ruby on Rails 5.0」正式版がリリース(CodeZine)
「Ruby on Rails 5」には「API mode」やWebSocket用「Action Cable」が加わる(@IT)

2016年7月2日土曜日

2016年7月1日金曜日

Electronで、ファイル編集

Electronで、ファイル編集です。

Step1.
先日作成した「Electronで、ファイルオープン」のファイル表示先を「JavaScriptで書かれたコードエディタの「Ace」」に設定。

Step2.
「Ace」で編集した内容を、「Electronで、ファイル保存」の保存先に指定。

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

// 読み込んだファイル内容をエディタ部分に設定 setValue
//(-1)はカーソル位置の指定で先頭。カーソル位置を文章の最後に持って行きたい場合は1
editor.setValue(data.toString(), -1) 

// 編集後のデータは getValue で取得できる
var data = editor.getValue();
というわけで、Electronで、ファイルを開いて、編集し、保存までできました。嬉しすぎます(笑)。

ICS MEDIAさんの記事には、たいへんお世話になりました。感謝です。

参考サイト
Editor.setValue(ace)
Editor.getValue(ace)
テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門(ICS MEDIAさん)