2015年3月30日月曜日

[reveal.js] 艦これ風テーマを作った

作りました。こんな感じです。


サンプルはこちら→ http://srz-zumix.github.io/slide/kancolle/#/

css は github から取得できます。ご自由にお使い下さい。
https://github.com/srz-zumix/slide
https://github.com/srz-zumix/slide/tree/gh-pages/reveal.js/css/theme/kancolle.css
投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年3月23日月曜日

reveal.js + Markdown のちょっとしたメモ - その３

「ブログズミ: reveal.js + Markdown のちょっとしたメモ」
の３回目です。

前回は、
  • HTML 変換後の表示
  • PDF に出力
  • テーマの作成
  • 背景付きテーマ
  • Notes を使う
  • App::revealup

前々回は、
  • 表題が大文字表記にならないようにする
  • 空行を入れる
  • タグを直接記述する
  • 公開する
を紹介しました。

今回は、fragment とレイアウトのカスタマイズに使えるテクニックを紹介します。

Zoom
発表をしていると、一部分をズームしたくなることがあります。
reveal.js には Zoom.js というのがあり、それを使うことで Alt + クリックでズームができるようになります。

fragment を使う
Markdown で記述した場合に、fragment はどうしたら良いのか。
答えはこちら→ https://github.com/hakimel/reveal.js/#element-attributes

fragment にしたい要素に下記のようにコメント書くだけです。
1
<!-- .element: class="fragment" -->

この記法は他の用途にも使えそうですね。

fragment がどういったものかはこちらをご覧ください→ http://lab.hakim.se/reveal-js/#/fragments

レイアウトのカスタマイズ
一部分だけレイアウトを変えたい場合、例えば直接スタイル指定をしたり、特定のクラス指定をすると思います。
それを reveal.js + Markdown の場合に、どうしているか自分のやり方を紹介します。

fragment を使うで紹介したコメント記法を利用して、以下のように class 指定を追加します。
1
<!-- .element: class="sample" -->
これで、任意の要素だけレイアウトを変えることができます。
また、 class 指定でなく直接スタイル指定しても OK です。
1
<!-- .element: style="font-color: red;" -->

今回は以上です。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年3月16日月曜日

Twilio を使ってみた - その３

前々回「Twilio を使ってみた - その１」では、Twilio トライアルアカウントへの登録と、電話を受けて任意のメッセージを流すところまで、前回「Twilio を使ってみた - その２」では電話の転送をやりました。

今回は、電話を受けたらボタンを押すように促し、押されたボタンごとにメッセージを流してみようと思います。

Gather 動詞
押されたボタンの収集は Gather 動詞を使います。
ドキュメント： https://jp.twilio.com/docs/api/twiml/gather

ドキュメントのサンプルそのままですが、以下のように使用します。
1
2
3
4
5
6
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather timeout="10" finishOnKey="*">
        <Say>Please enter your pin number and then press star.</Say>
    </Gather>
</Response>

発信者がボタンを押すと押した数値をパラメーターに GET もしくは POST （method で指定）リクエストを送信します。
action 属性で送信先 URL の指定もできます。

サーバー
今回から TwiML および アプリケーションをサーバーに配置したいと思います。
なんでも良いのですが、私は Google App Engine（以下、GAE） を使うことにしました。

GAE のセットアップなどは省略します。

アプリケーション
前回、前々回では TwiML を直接指定し処理を指示していましたが、今回はアプリケーションという形で構築をしていきます。
今回は、GAE + PHP で作りました。

PHP のソースコードは以下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
require 'twilio-php/Services/Twilio.php';
 
$response = new Services_Twilio_Twiml();
if( isset($_REQUEST['Digits']) ) {
  $input = $_REQUEST['Digits'];
  switch($input) {
  case '9':
    $response->say('さようなら', array('language' => 'ja-jp'));
    break;
  default:
    $gather = $response->gather(array('numDigits' => 1, 'timeout' => '10'));
    $gather->say($input . 'を押したな', array('language' => 'ja-jp'));
    break;
  }
} else {
  $gather = $response->gather(array('numDigits' => 1, 'timeout' => '10'));
  $gather->say('なんかボタン押して。', array('language' => 'ja-jp'));
}
 
print $response;
 

require 'twilio-php/Services/Twilio.php';
こちらのファイルは、Twilio のライブラリーです。本家サイトよりダウンロードしたものを、アップロードしています。
Twilio Docs - Php Install
https://github.com/twilio/twilio-php/archive/master.zip

コードは 「ゼロからはじめるぜ! Twilio - Twilio for KDDI Web Communications」を参考に…というかほぼそのまんまです。

上記コードの else 節の部分が電話をかけた時に最初に通る部分です。
if( isset($_REQUEST['Digits']) ) {
...
} else {
  // ここ
}
そこで、Gather が処理され Digits パラメータ付きで同じ URLが叩かれます。
すると、今度は if 節の部分が実行されます。

こちらの PHP を実行できるように GAE の app.yaml を編集してアップロードして下さい。
これで、アプリケーション側の設定が終わりです。

アプリケーションの登録
アプリケーションを Twilio に登録します。
Twilio のダッシュボードから「ツール」→「TWIML APPS」を選択します。すると、下図のような画面が出てくるので「TwiMLAppを作成する」ボタンを押します。


アプリケーション作成ページが開くので、フレンドリーネームと Request URL を設定します。
今回は音声通話に Request URL (GAE の URL)を記入します。

記入したら、保存ボタンを押して下さい。

次に、電話番号にこのアプリケーションを割り当てます。
「電話番号」から電話番号を選択し、音声通話のところの「Configure with」をアプリケーションに設定し、コンボボックスから先ほど作成したアプリケーションを選択して下さい。


これで Twilio 側の設定も終わりです。

電話かけて、ボタン操作に反応することを確認しましょう。

最後に
今回の内容は、ゼロからはじめるぜ! Twilio の以下の回に相当する内容です。
ゼロからはじめるぜ! Twilio - 第3回 - Twilio for KDDI Web Communications
ゼロからはじめるぜ! Twilio - 第4回 - Twilio for KDDI Web Communications
ゼロからはじめるぜ! Twilio - 第5回 - Twilio for KDDI Web Communications
ゼロからはじめるぜ! Twilio - 第6回 - Twilio for KDDI Web Communications

また、ソースコード等は github で公開しています。
https://github.com/srz-zumix/twilio
投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年3月9日月曜日

iutest v1.11.1 をリリースしました

C++ テスティングフレームワーク iutest v1.11.1 をリリースしました。
変更点は以下の通りです。

  • 修正
    • IUTEST_REGISTER_TYPED_TEST_CASE_P でテスト名の後ろの空白が名前に含まれてしまう不具合を修正
    • バグ修正

今回は大きな修正はなく、バグフィックス版という感じです。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2015年3月4日水曜日

AppVeyor でC++ の CI 環境構築


AppVeyor は .NET 用だと思ってましたが、C++ でも使えると知ったので使ってみました。

Travis CI などの CIサービスと違い、AppVeyor は Windows 環境です。
自作のテスティングフレームワークである iutest のテストを Travis CI や Shippable で行ってましたが、Windows 環境でのテストができてませんでした。（一応 Visual Studio Online でしてはいる。）
その辺の話は、ブログにも書いているのでそちらを参照してください。

ブログズミ: Shippable + Wandbox で C++ の CI 環境構築
ブログズミ: Visual Studio Online を使ってみた

今回、記事を書くにあたって参考にしたところ：
VisualStudio - AppVeyorでVisual C++プロジェクトのCI環境 - Qiita

SIGN UP
まずは、SIGN UP します。
PRO と FREE プランがありますが、オープンソースであれば FREE が使えるので今回はそちらで登録。
特に難しいところはないので、次行きます。


（Visual Studio Online とも連携できるんですね）

プロジェクトの作成
PROJECT ページから「+NEW PROJECT」を選択します。
リポジトリ選択画面になるので、目的のリポジトリを選択、「+ADD」を押します。


以上です。

ビルド/テスト設定
AppVeyor も他のCIサービスと同様に yaml で動作を指定しますが、Web ページ上で設定も可能です。
今回は簡単に Web ページ上で設定してみました。

ビルドはデフォルトの設定に、ソリューションファイルのパスを設定しました。


テストはビルドした実行ファイルを実行するだけですので、スクリプトで呼び出すようにしました。
コマンドプロンプトだけでなく、PowerShell も使えます。


これらの設定は yaml にエクスポートすることもできます。


実行
設定ができたので試しに実行してみました。
以下の URL から実行結果が見れます。
https://ci.appveyor.com/project/srz-zumix/iutest

バッジを付ける
AppVeyor でもバッジが付けられます。
プロジェクトの SETTINGS に Badges があるので、そこでバッジの URL がわかります。




まとめ
今回 Web上で設定をしたこと、また、ほぼデフォルトで設定できたこともあり、かなり簡単に導入ができました。
Windows 環境のテストができる CI サービスは貴重なので、今後も使っていきたいと思います。

投稿者 時刻: 0 件のコメント:
ラベル: , , ,
登録: 投稿 (Atom)