2014年7月11日金曜日

Activiti-explorerをtomcatにデプロイ

1. activitiをダウンロード

http://activiti.org/download.html からActivitiをダウンロードする。
ダウンロードされたファイルは任意のディレクトリに解凍しておく。

2. Tomcatをダウンロード

http://tomcat.apache.org/download-80.cgiからTomcatをダウンロードする。
ダウンロードされたファイルは任意のディレクトリに解凍しておく。

3.Activiti-ExplorerをTomcatにデプロイする。

ダウンロードしたAcitivitiを解凍したディレクトリ内の「wars/activiti-explorer.war」を、
Tomcatを解凍したディレクトリの「webapps」にコピーする。

4.Tomcatを起動する。

Tomcatを解凍したディレクトリの「bin/startup.sh」を実行し、Tomcatを起動する。

5.画面を開く

http://localhost:8080/activiti-explorer/ にアクセスする。
以下の様な画面が開けば、デプロイは成功しています。

6.ログインの実行

アカウントは「http://www.activiti.org/userguide/#deploymentWithExplorer」の「Activiti setup」の章に記述されています。

まずは、デプロイして実行出来るところまで。
UI気にしなければこのまま、使えるのかな？もうちょっと調べてみないと。

2014年4月29日火曜日

[AngularJS]ng-initを使用して初期値の設定

ng-initディレクティブを使用して、初期値の設定が出来る。

コード

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>ng-init</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="hello = 'Hello'" >
  {{hello}} World!!<br/>

  <label>入力欄
    <input type="text" ng-model="hello">
  </label>
</div>
</body>
</html>

実行結果

2014年4月2日水曜日

[html5]canvas上に画像を配置

context#drawImageを使用してcanvas上に画像を配置することができる。

以下のように３種類のdrawImageを用途によって使い分ける。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvasに画像を配置</title>
  <style>
    #mycanvas {
      outline: blue 1px solid;
    }
  </style>
</head>
<body>
<!-- canvas上に配置する予定の画像を非表示で用意する -->
<div style="display: none">
  <img src="hoge.png" alt="example" id="myimage" width="592" height="59"/>
</div>
<canvas id="mycanvas" width="800" height="350">
</canvas>
<script>
  !function () {
    var canvas = document.getElementById('mycanvas'),
        ctx;

    if (!canvas.getContext) {
      return;
    }

    ctx = canvas.getContext('2d');
    window.addEventListener('load', function() {
      var image = document.getElementById('myimage');
      // 左上のポジション指定
      ctx.drawImage(image, 10, 10);
      // ポジションと幅、高さ指定
      ctx.drawImage(image,
          10, 90,   // 左上のポジション
          102, 49); // 幅と高さ
      
      // 元画像の描画範囲（切り取り範囲）と幅と高さを指定
      ctx.drawImage(image,
          60, 30,   // 切り取り開始位置（左上の開始位置）
          25, 40,   // 切り取る幅と高さ
          10, 180,  // 画像を配置する左上のポジション
          25, 40);  // 画像の幅と高さ
    });
  }();
</script>
</body>
</html>

2014年3月21日金曜日

[html5]datalistタグ

datalistタグを使用すると、関連付けられたinputタグに入力候補をリスト表示することが出来る。
関連付けは、inputタグのlist属性とdatalistタグのid属性で行う。

テキストフィールドで使用した例

<input type="text" name="n" list="J1"/>
<datalist id="J1">
  <option value="ベガルタ仙台">
  <option value="鹿島アントラーズ">
  <option value="柏レイソル">
  <option value="浦和レッズ">
  <option value="大宮アルディージャ">
  <option value="FC東京">
  <option value="横浜Fマリノス">
  <option value="川崎フロンターレ">
  <option value="アルビレックス新潟">
  <option value="ヴァンフォーレ甲府">
  <option value="清水エスパルス">
  <option value="名古屋グランパス">
  <option value="セレッソ大阪">
  <option value="ガンバ大阪">
  <option value="ヴィッセル神戸">
  <option value="徳島ヴォルティス">
  <option value="サンフレッチェ広島">
  <option value="サガン鳥栖">
</datalist>

Chromeでの表示例

色選択で使用した例

<input type="color" name="color" list="c">
<datalist id="c">
  <option value="#000000">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
  <option value="#ffffff">
</datalist>

Chromeでの表示例

2014年2月15日土曜日

html5の必須入力欄のスタイル定義

cssを使用してhtml5で追加された必須入力欄(required属性が設定されいる項目)のスタイルを定義する方法

例

required擬似クラスに対してスタイル定義をすることで、required属性が設定された入力欄のスタイルを変更出来る。

    input:required {
      background-color: lightcoral;
    }

[html5]日付・時間系の入力欄

日付

input type="date"で日付入力欄になる

例

<input type="date" >

出力例

時間

input type="time"で時間入力欄になる

例

<input type="time" >

出力例

年月

input type="month"で時間入力欄になる

例

<input type="month" >

出力例

2014年2月9日日曜日

[CoffeeScript]オブジェクトのプロパティを一覧表示

オブジェクトのプロパティの値をCoffeeScriptで一覧表示する方法。

CoffeeScriptでは、「for of」を使ってプロパティ数分ループを行って処理をする。
JavaScriptの場合は、「for in」なので微妙に違いがあって間違えやすい気がする。

コード例

for key, value of 変数名で、オブジェクトの全プロパティに対して処理が出来る。

hoge =
  k1: 'v1'
  k2: 'v2'

for key, value of hoge
  console.log key, ' = ', value

class Hoge
  prop1: 'prop1'
  prop2: 'prop2'

for key, value of new Hoge()
  console.log key, ' = ', value

実行結果

オブジェクト、インスタンスともにプロパティ名とプロパティの値が出力される。

k1  =  v1
k2  =  v2
prop1  =  prop1
prop2  =  prop2

登録: 投稿 (Atom)