2016年2月29日月曜日

Oracle Application Expressのご紹介

株式会社Pro-SPIRE
イノベーション推進センターの野口拓馬です。

昨年、DBの最新動向を知るために、
「Oracle DBA & Developer Day 2015」というイベントに
先輩社員のSS第1BUの西村さんと共に参加しました。
イベント参加の最大の目的は、DB最新情報収集でした。

このイベントで最も印象的だったのが、今回ご紹介する
Oracle Application Express(以下、Oracle APEX)というアプリケーション開発ツールです。

実際に使用してみたところ、
以下の点で使い勝手が良いと感じたので、今回ご紹介させて頂きます。
【使い勝手が良いと感じた点】
 ・直感的な操作で使用可能
 ・DBやSQLなど専門知識がない一般ユーザーでも使用可能

(※以降リンクは外部サイトが別ウィンドウで開きます。)

■Oracle APEXの概要

Oracle APEXは、Webブラウザを使用して、
データベースに値の追加、変更、削除といった操作を行うことが出来ます。
また抽出したい列、行を指定して、レポートを出力するといった、
アプリケーションを開発できるツールです。
レスポンシブWebアプリケーション用の総合開発環境+サーバーとして無料で使用できます。
2004年にリリースされ、最新バージョンは5.0となります。(2016年2月28日現在)

※下記URLよりデモサイト「受注管理システム」を使用することができます。
https://apex.oracle.com/pls/apex/f?p=96826:1:10490300860376:::::

【特徴】
1.Webブラウザだけで開発可能
 ⇒マウスの操作だけでアプリケーションが開発できます。

2.日本語対応
 ⇒初期設定は英語なので設定変更が必要となります。

3.容易なデザインとカスタマイズが可能
 ⇒CSSやJavaScriptのコードを書かずに、アプリケーションの見た目をカスタマイズできます。

4.パッケージアプリケーション
 ⇒数クリックで簡単にインストールできるアプリケーションがデフォルトで付属されています。
   アプリケーション開発をしなくても、十分Oracle APEXの便利さを実感できます。
  (パッケージアプリケーション例)
  ・Meeting Minutes
       会議の予定スケジュールを管理するアプリケーションです。
      議事録を書き留めて、格納することが出来ます。
       また、閲覧の権限だけ付与すれば簡単に議事録を共有できます。
  ・P-Track
       プロジェクトのステータスを追跡できるアプリケーションです。
       各プロジェクトはカレンダーまたはガント・チャート形式で表示することができます。
       一人で使用する場合は、タスク管理ツールとして活用できます。

■操作方法

【アカウント作成手順】

Oracle APEXを使用する事前準備として、Oracle APEXのアカウントを作成します。

1.以下にアクセスします。
※画面上部で言語を「日本語」に設定することができます。
https://apex.oracle.com/en/




2.「はじめよう」>「フリー・ワークスペース」>「アプリケーション開発」をクリックします。



3.以下を入力し、「次」をクリックします。




4.以下を入力し、「次」をクリックします。




5.アンケート等に回答した後、条件に同意しますにチェックを入れて、「次」をクリックします。



6.「リクエストの送信」をクリックすると、登録したメールアドレスにメールが届くので、URLをクリックするとワークスペースのリクエスト(設定の申請)が行われます。
画面に沿って進めば、設定は完了です。
以下の画面が表示されれば、
アプリケーション開発、TODO管理、SQL等を実行できるOracle APEXの環境が整います。




【アプリケーション作成手順】

今回は、レポートを出力できるアプリケーションを作成したいと思います。

1.まず、アプリケーション・ビルダータブから 「作成」をクリックします。



2.デスクトップを選択して、次をクリックします。



3.任意に入力して、アプリケーション作成をクリックします。



【レポート作成手順】

1.ページの作成をクリックします。



2.レポート>対話モード・レポートとクリックし、次をクリックします。



3.今回は表をDEMO_PRODUCT_INFO(表)として、レポートを作成します。



4.下記ページが表示されれば成功です。



5.ページの保存と実行ボタンをクリックすると、レポートが表示されます。



【SQLワークショップ】

画面で操作するより、SQLを実行したいという方に「SQLワークショップ」をご紹介します。

1.SQLワークショップをクリックします。



2.SQLコマンドをクリックします。



3.SQLを入力すると、結果が表示されます。



【チーム開発】

機能、To Do、マイルストーン、およびバグの追跡をするソフトウェア開発プロセス管理が出来る「チーム開発機能」をご紹介します。

1.チーム開発をクリックします。



2.マイルストーンをクリックします。



3.マイルストーンの作成をクリックします。



4.マイルストーンの基本項目を入力して、マイルストーンを作成します。



5.マイルストーン以外にも設定すると、次のようにダッシュボードとして、ソフトウェア開発状況が確認出来ます。




■Oracle APEX活用方法のご紹介

Oracle APEXの使用方法を上記でご紹介させて頂きましたが、
ここではOracle APEXで何ができるかという活用方法をご紹介させて頂きます。

1.個人のタスク管理として
Oracle APEXのパッケージアプリケーションを使用して、
ご自身のタスク管理をPCに依存しないクラウドタスク管理ツールとして活用する。

2.部門単位の小規模タスク管理として
ソフトウェア開発管理ではなく、プロジェクト管理ツールとして活用する。
案件管理、顧客管理、課題管理、勤怠管理、スケジュール管理などが可能なアプリケーションを
開発して業務を効率化する。

3.SQLコマンド入力環境の提供
SQLを勉強したいが、実際に入力できる環境が無いとお困りの方は
上記の手順を参考にしてSQLを学習する。


■まとめ

Webブラウザを使用してデータベースに値を追加、変更、削除といった操作が可能で、
レポートを実行できるアプリケーションを短時間で開発できる手法を知ることが出来たのは大きな収穫でした。
また、チーム開発機能を使用すれば自分だけのTODOを管理するだけでなく、
メンバー内のTODO、マイルストーンをまとめることも出来るので、
チームでの開発においての作業漏れを防げると感じました。
私自身はOracle APEXのTODO管理機能を活用して作業効率を上げていきたいと思います。
今後も新しい技術を学び自分の中にインプットし、技術者ブログ等を通じて、
アウトプットとして皆さんに情報を発信できたらと思います。


■参考サイト

・Oracle Application Expressについて
http://www.oracle.com/webfolder/technetwork/jp/apex/108281APEX_pls/f1.htm

・@IT 【Oracle Application Express(Oracle APEX)とは何か。何ができるのか】
http://www.atmarkit.co.jp/ait/articles/1601/12/news014.html

・Oracle Technology Network 【Application Express 概要】
http://www.oracle.com/technetwork/jp/developer-tools/apex/overview/index.html

2016年2月28日日曜日

Swiftを始めてみよう

株式会社Pro-SPIRE SS第1BU荘司まなつです。

今回はSwiftを学び簡単なアプリを作成しました。
Swiftでとにかくアプリを作成してみたいという方向けの記事となっております。
Swiftの文法等は後日ご紹介していきます。

※Swiftとは・・・
 Apple社が開発したiPhoneアプリを作成する為のプログラム言語です。
 特徴は「速い」「モダン」「安全」の3つとなっています。
 Swiftは実行速度が速く、JavaScriptやRubyやPythonなどの言語のいいところを参考にして
 言語に慣れているプログラマーにも分かりやすいモダンな言語です。
 また、エラーが起きそうな書き方をしていると「文法的なエラー」として教えてくれます。
 アプリの実行時のエラーが起きにくい安全なプログラムを書くことができ、この「安全機能」は
 Swiftの一番の特徴となっています。

以下の順番でSwiftのアプリを作成してみます。
【Step1】Hello の表示
【Step2】じゃんけんアプリ作成

用意するもの
・Mac

*....................*....................*....................*....................*....................*....................*
まず始める前に・・・
《Xcodeのインストール》
アプリ開発を始める前に「Xcode」(無料)をApp Storeからインストールします
※Xcodeとは・・・
 Mac,iPhone,iPadアプリを開発するためのIDE(統合開発環境)です
 Swift以外にC言語、C++、Objective-Cなども使用することができます


《プロジェクト作成方法》
1.Xcodeを起動します
2.「Create a new Xcode project」をクリック
3.「Single View Application」を選択し、「Next」をクリック 

4.プロジェクトを作成するにあたり、必要な情報を入力します
  今回は以下のように設定をします
 ・Product Name:Sample
 ・Organization Name:myname
 ・Organization Identifier:com.myname
 ・Language:Swift
 ・Devices:iPhone
「Next」をクリックします

5.プロジェクトの保存先を選択し、「Next」をクリック

以上の方法で、基本的なアプリ作成の事前作業は終了です
*....................*....................*....................*....................*....................*....................*

【Step1】「Hello」の表示
Xcodeの試運転として「Hello」を表示してみましょう

1.プロジェクトの保存先を選択後、以下の画面が表示されます 

2.画面左側面にあるファイル一覧の「Main.storyboard」をクリック 
3.するとiPhoneの画面のような四角い枠が表示されるのを確認 











4.右下に並んでいるアイコンのエリアをスクロールして「Label」をクリックして四角い枠の中にドラッグ&ドロップをして
配置します(右下にある検索エリアで「Label」と検索するとスムーズに見つけることができます)


5.「Label」をダブルクリックして文字が反転状態になったところで「Hello」と入力
6.Command + R キーを押下するとSimulatorが起動し、アプリが実行されます 

[確認] 

「Hello」と表示されたアプリが実行されたでしょうか
プログラミングではなくアイコンを配置するだけでしたが、これでXcodeの試運転は終了です

【Step2】じゃんけんアプリ作成
*事前作業*
 「グー」「チョキ」「パー」の画像を用意して自分のMacに保存しておく

以下のような、じゃんけんアプリを作成してみましょう
アプリについて:
 ユーザーが画面下部の3つのボタンを選択し、コンピュータとじゃんけんの勝負をするアプリです
 勝敗の結果も表示します



1.新規プロジェクトを作成するため、プロジェクトの基本情報を入力して「Next」ボタンをクリックして保存先を選択する
   ・Product Name:JankenSample
 ・Organization Name:myname
 ・Organization Identifier:com.myname
 ・Language:Swift
 ・Devices:iPhone

2.左側面の「JankenSample」(Project Name)を右クリック
「Add Files to ”JankenSample”」をクリック

3.以下のダイアログが表示されるので、事前に準備してあった画像を選択し「Add」をクリック
以下のように画像(choki.jpg)が登録された状態になります 
以上の作業を2回繰り返し、「グー」「チョキ」「パー」の画像3枚を登録します


4.「Main.storyboard」を選択して、右側面のSizeを「iPhone 4-inch」にします
(作成画面の大きさが変化し、アプリの作成がしやすい状態になります) 
5.右下のアイコンエリアから「Image View」を選択・ドラッグして四角い枠の中に配置します 
6.右側面の「Image View」の「Image」で先ほど登録した画像を選択します
 2つのImage Viewに同じ画像を設定します 
7.アイコンエリアから「Button」「Label」を選択し配置します
「Button」はダブルクリックし「最初はグー」に修正します
「Label」はダブルクリックし「*じゃんけんアプリ*」と修正します
「Button」をさらに3つ配置し、「グー」「チョキ」「パー」を作成します
分かりやすいよう右側面の「Text Color」「Background」で色を変えておきます
8.3つ並べたボタンを同じサイズに設定して体裁を整えます
 ボタン3つを選択し以下画面の赤枠部分(「Stack」ボタン)をクリックします 
3つのボタンがくっつく状態になります

9.3つのボタンが選択した状態で、
   shiftキー + controlキーを押したまま選択したボタンをクリックします
  以下の状態で、「Stack View」を選択します 


10.右側面の「Stack View」で「Distribution」を「Fill Equally」に設定します

11.赤枠部分をクリックし以下のように設定を行う
  Add 3 Constraintsをクリックすると体裁が整えられます
 ※数字を入力する前に赤い点線をクリックし実線にすることで設定が確定されます 


以上で基本的なSwiftのアプリのデザインが完了します。
残りはコードを記述してButtonが思い通り動くよう実装します。
(今回はコード記述を省略致します)

実装後、commandキー + R キーを押下するとSimulatorが起動し、
以下のようにアプリが実行されます。
 



実際に作成してみて、XcodeはデザインをButtonやLabelを使い自分の好きな場所に
簡単に配置できるので言語初心者でも楽しくアプリ開発ができるものだと感じました。
また、エラー検知が素早いのでアプリ実行前にその場でエラーを修正できます。
エラー場所を見つけやすいので開発の時間短縮になると思いました。

次は、Swiftで旅行の写真や訪れた場所等を管理してくれるアプリを作ろうと考えています。
次回の記事では、Swiftの文法をご紹介するとともにアプリをご紹介できるよう挑戦します。


参考文献
森 巧尚(2015.10) 『Swiftではじめる iPhoneアプリ開発の教科書』 株式会社マイナビ

2015年12月24日木曜日

QRコードを作成 - qrcode.js -

こんにちは。上河佑里恵です。
寒いですので、体を冷やさないようにショウガを食べるようにしています。
体が温まりますので、おすすめです。


本日は、フロントエンド技術(HTML、CSS、Javascript)を使用し、
QRコードを作成する方法についてご紹介させていただきます。


QRコードはシンプルな機能ですが、
情報を公開するのにとても役立っています。
店舗情報や整理券など、すぐに簡単に情報をえ入手たい場面は多くあります。
簡単に作成することができるようになったのも、普及した要因の一つだと思います。


今回ご紹介するのは、qrcode.jsです。
qrcode.jsは、簡単にQRコードを生成することができる、
JavaScriptプラグインです。

qrcode.js

http://davidshimjs.github.io/qrcodejs/

WebStorm

https://www.jetbrains.com/webstorm/

※上記リンクは別のウィンドウで開きます。


WebStormは、エディタ、バージョン管理、デバッグを行う、IDEです。
JavaScriptやHTML5の開発に適しています。

WebStormでプロジェクトをスタートします。

WebStorm Project


ダウンロードしたqrcode.jsをWebStormのプロジェクトに取り込みます。

HTMLページに<script>タグでqrcode.jsを宣言します。

qrcode.js
qrcode.js含む、3つのファイルを用意しました。
WepStorm

試してみます。
【実行環境】
OS: Windows10
ブラウザ: Chrome

空欄に所定の情報を入力して、「QRコード作成」ボタンを押下します。

QRコード作成画面

(1) 普通に(正しく)入力
正しく入力
(2) 空欄あり
空欄あり

(3) 特異な値として、環境依存文字あり
  はしごだか(髙)と、たつさき(﨑)を記載しました。

特異な値あり
今回はデフォルト形式でQRコードを表示しています。
サイズ: 256px * 256px
容量 : 9.05KB
HTMLやCSSなどの、ほかのフロントエンド技術と組み合わせることにより、
QRコードの色や大きさを自由に変えることもできます。

次に、作成したQRコードを読んでみます。
「QRコードリーダー for iPhone」でQRコードを読んだ画面を掲載します。
【実行ツール】
QRコードリーダー: Takashi Wada「QRコードリーダー for iPhone」
            https://appsto.re/jp/wzV5I.i
               ※上記リンクは別のウィンドウで開きます。

(1) 正しく入力
正しく入力

(2) 空欄あり
空欄あり


(3) 特異な値(環境依存文字)あり
特異な値(環境依存文字)あり

全パターンとも、入力したとおりに文字を表示しています。

ちなみに、「QRコードリーダー for iPhone」の画面の機能については
いたってシンプルで、難なく操作することができました。

左下のボタンで、
QRコードを読み取る画面に戻ります。
さらに、読み取り画面から
「スキャン履歴」を閲覧・削除できます。

右下のボタンで、
「メールで送る」
SMSで送る」
「読み取り内容をコピーする」
の3つから、読み取った内容を共有する方法を選択します。

デバイスからメールで送信した読み取り内容は、
一般的なテキスト形式でPCに送られてきました。

(1) 普通に(正しく)入力
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :QRコード
NEARS:大森
PHONE:1234567890
EMAIL:qrqrqr@qrqrqr.code
URL  :qrcode/jquery.sugudekiru
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(2) 空欄あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :
NEARS:大森
PHONE:123123123
EMAIL:
URL  :qrcode/jquery.queryq
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

(3) 特異な値(環境依存文字)あり
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
NAME :髙﨑
NEARS:高崎
PHONE:222333444
EMAIL:gumma/gumma.gumma
URL  :gummma/gummma.gunma
-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-


QRコードは新しい技術ではありませんが、
IoT、特にウェアラブルデバイスのような、身に着けて手軽に情報を取り扱いたいものに
活用できるのではないでしょうか。


参考文献:

jquery.qrcode.js
http://jeromeetienne.github.io/jquery-qrcode/

日経ソフトウェア 2015年9月号
http://www.amazon.co.jp/%E6%97%A5%E7%B5%8C%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A8%E3%82%A2-2015%E5%B9%B4-09-%E6%9C%88%E5%8F%B7/dp/B00ZD9E4DC

※上記リンクは別のウィンドウで開きます。