Skip to content

hifiveハンズオンが開催されました

9月1日、日本マイクロソフト社にてhifiveハンズオンが開催されました。今回はhifiveを使ってWeb業務アプリケーションを構築体験してみるというもので、日報アプリケーションを開発しました。こちらはその様子を紹介するレポート記事です。

マイクロソフト十倉様によるVisual Studio Codeの紹介

Visual Studioというと.NET向けのIDEですが、そのスクリプト言語版と言えるのがVisual Studio Codeです。オープンソースで、マルチプラットフォームで動作します。すでに多くのプラグインが作られています。

今回はマイクロソフト社エヴァンジェリスト、十倉様からVisual Studio CodeやOffice向けのアプリケーションをHTML5/JavaScriptで作る例が紹介されました。

ハンズオン開始

ハンズオンに際してWeb業務フレームワークのhifiveについて簡単に紹介しました。

ハンズオンはGitHub上にある資料を基に行いました。

hifivemania/hifive-handson

実際にハンズオンを行っている様子です。

ハンズオンは資料を使って各自自由に行ってもらいました。そして何か詰まったところがあったり、HTML5に関して質問があったらサポートする手法となっています。

全部で8章まであるのですが、8割方終わった方が多数いらっしゃいました。資料はオープンになっていますので、ハンズオンの後で詰めてみるということもできます。さらに質問があれば、GitHub Issues を使って聞くこともできます。


今後、ハンズオンの資料を増やしたり、定期的に開催していきたいと考えています。Web技術を使った業務システム開発に興味がある方はぜひご参加ください!

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

OSC 2016 .Enterpriseに出展しました

9月1日に開催されたOSC 2016 .Enterprise(オープンソースカンファレンス・エンタープライズ)にhifiveとして出展しました。去年に続いて二度目です。

渋谷ということもあり、多くの方々にブースを訪れていただきました。ありがとうございます。多くの現場で働く開発者の方々にお会いし、hifiveを知ってもらうことができました。

次はOSC Tokyo(明星大学)になる予定です。hifiveブースに訪れた際にはぜひお声がけください!

オープンソースカンファレンス2016 .Enterprise – オープンソースの文化祭!

 

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

Google ChromeのDevToolsをサーバサイドのデバッグにも役立てよう

DevToolsはHTML5/JavaScript/CSSの開発に役立つツールですが、今回はさらに拡張してサーバサイドの開発でも役立ててしまおうという機能拡張を紹介します。

PHP

PHP Console – Chrome ウェブストア

サーバ側で発生したメッセージ、エラーなどをDevTools上で確認できるようになります。画面上に var_dumpなどを出力しないで済むのが良さそうです。

Clockwork – Chrome ウェブストア

インストールするとClockworkというタブが追加されます。Laravel、SlimそしてCodeIgniter 2.1に対応しています。サーバサイドでもライブラリをインストールする必要があります。

Xdebug helper – Chrome ウェブストア

PHPのXdebugと組み合わせて使います。通常、Xdebug向けにパラメータを追加したり、Cookieの設定を行いますが、Xdebug helperを使うことで自動的に行ってくれるようになります。

Symfony2 Profiler shortcut – Chrome ウェブストア

Symfony2のプロファイリングに特化した機能拡張です。Xdebugと組み合わせて使うようです。

FirePHP4Chrome – Chrome ウェブストア

FirePHPのデバッグメッセージをGoogle ChromeのDevTools上で見られるようになります。

Ruby

RailsPanel – Chrome ウェブストア

Rails向けの機能拡張です。Railsというタブが追加され、その中でアクションやActiveRecord、パラメータなど細かい部分まで踏み込んでチェックできます。

Python

Django Debug Panel – Chrome ウェブストア

Djangoアプリケーション用のタブが追加されます。特にHTMLを返さないAjaxリクエストの解析などに向いているそうです。


主な言語はPHPとなるようです。他の言語については独自のアプリケーションサーバの仕組みがあるからかも知れません。とは言え、サーバサイドのエラーやデバッグメッセージがDevTools上で見られるようになれば、開発もより効率的になることでしょう。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

hifiveをJSFiddleで使ってみる

JSFiddleはHTML/JavaScript/CSSをWeb上で書いて、その場で実行できる便利なサービスです。ちょっとしたサンプルコードなども確認しやすくなります。

そこでhifiveを埋め込んで試せるようにしてみました。こちらはHello Worldのデモです。

https://jsfiddle.net/datds3c1/2/

コツとしては、jQueryをJavaScript設定のフレームワークで指定しつつ、head内で読み込むように設定します。

他のライブラリの読み込み順番は次のようになります。

これで後はコードを書いていくだけです。

https://jsfiddle.net/datds3c1/2/

今後、ブログ内ではこのような形でhifiveのコードを紹介していきたいと思います。

フォークもできますので、参考のコードをベースとしてさらなるカスタマイズを楽しんでみてください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

hifiveハンズオンを開催します!

そろそろ業務Webアプリケーションでも使われるようになったHTML5ですが、実際に適用するならば効率的、メンテナンス性の高い仕組みが必要です。私たちの開発するHTML5フレームワークのhifiveはオープンソース、かつWeb業務システムをターゲットに開発されています。

今回のハンズオンではITProにて連載しているHTML5で業務システムを構築しよう – 第9回 HTML5で日報アプリを作るをベースに日報アプリケーションを実際に開発します。メンターとしてhifiveを実際に開発している連載執筆陣があたりますので、詰まったところがあればすぐに確認、解決できます。

このハンズオンを通じてHTML5を使った業務アプリケーションの開発手法はもちろん、新しい機能やテクニックを学べます!

hifiveハンズオン!

好評につき、席を増席しました!

日時

2016年09月01日(木) 18時40分〜

場所

日本マイクロソフト社セミナールーム

タイムスケジュール

時間 内容
18時40分 開場
19時00分 開始
19時00分 マイクロソフト社による講演
19時25分 hifive、およびハンズオンについて by hifiveチーム
19時45分 ハンズオン開始
21時半 ハンズオン終了

費用

無料

必要なもの

  • ノートPC。Windows/Mac OSX/Linuxいずれも可
  • ノートPCの電源アダプタ
  • 名刺

対象者

  • Web開発者など普段からWebアプリケーション開発に携わっている方
  • 業務システム開発者、企業内エンジニアなどHTML5を使った業務アプリケーション開発に興味のある方
  • HTML5など、最近のWebアプリケーション開発に関する知識を身に着けたい方

Lets’ hifiveハンズオン!

 


hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

hifiveのUIライブラリの紹介「ボックス切り替え」

hifiveで提供しているUIライブラリの一つ、ボックス切り替えの使い方を紹介します。

まずは動作しているサンプルです。

このようにDOMをクリックすると、上下左右から新しいDOMがスライドして差し替わります。なお、古いDOMはアニメーションが完了した段階で消去されます。

動いているデモはこちらで確認できます。

必要なライブラリ

ボックス切り替えを行うにはhifive本体の他に以下のライブラリが必要です。

ボックス切り替えの実装

まずベースのJavaScriptは次のようになります。hifiveの基本的なコントローラの仕組みに replaceBoxController オプションが追加されています。

後は任意のイベントなのですが、今回はボックスのクリックイベントを使います。処理の内容ですが、 this.__count は表示上のものになります。

これでボックス切り替えが実行できます。指定できるアニメーションは以下のパターンがあります。それぞれどういったアニメーションをするかはデモで確認してみてください。

  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • pushLeft
  • pushRight
  • pushUp
  • pushDown
  • openLeft
  • openRight
  • openUp
  • openDown
  • fade

なお、アニメーション完了時のイベントを取りたい場合は次のように書きます。

アニメーションをうまく使えばシングルページアプリケーションやスマートフォン/タブレット向けのWebアプリケーションでも使えるでしょう。より詳しいデモはボックス切り替えにありますのでご覧ください。

ボックス切り替え


hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

Webブラウザ上で使えるMarkdownエディタまとめ

ここ最近、ドキュメントを作成するのに使うマークアップ言語としてMarkdownが人気です。少し前まで他にもフォーマットがありましたが、今はほぼMarkdown一色ではないでしょうか。

Webシステムの中でもMarkdownを採用し、ユーザにMarkdown記法に沿って入力してもらうものも増えています。そんな時にはツールバーをはじめ、Markdown記法をサポートするツールがあると便利です。そこで今回はWebブラウザ上で使えるMarkdownエディタを紹介します。

Editor

Editorはツールバーが表示され、Markdownの各入力フォーマットをクリックだけで入力できるようにしてくれます。見た目はMarkdownのままですが、目のアイコンをクリックするとHTML表示に変わります。

woofmark

woofmarkはWYSIWYGなエディタですが、HTML/Markdown/WYSIWYGを切り替えて表示できるようになっています。Markdownだけでなく通常のHTMLも同時にサポートしているので、カラフルな表示も行えるようになっています。

ProseMirror

入力は普通に行いつつ、テキストを選択すると太字/斜体/リンクなどのメニューが表示されます。リストや画像の挿入は段落ごとに指定できるようになっています。表示はWYSIWYGで、Markdownだとほぼ感じられません。

esarea – Chrome ウェブストア

esa.ioライクなMarkdown入力が任意のテキストエリアで使えるようになるGoogle Chrome機能拡張です。特定のサービスに依らずMarkdown記法が使いたいという時にインストールしておくと便利でしょう。

PageDown-Bootstrap Demo Page

BootstrapにMarkdown記法をサポートしたテキストエリアを表示するライブラリです。ボタンをクリックするとMarkdown記法が挿入されます。プレビュー機能は備えていません。

Personal Editor

MarkdownとXHTMLを切り替えて表示できるWYSIWYGエディタです。Markdownで記述して、その内容をXHTMLで表示できます。

EpicEditor – An embeddable JavaScript Markdown editor

入力補助機能はない、シンプルなMarkdownエディタです。プレビュー表示をサポートしており、右下に出るアイコンをクリックすると切り替わります。また、フルスクリーン機能もあります。Markdownに慣れた人たちに対して、よりコンテンツを書きやすくするのに使えるでしょう。


Markdownは様々なサービスで使われているので、対エンジニアであれば積極的に使っていきたい記法です。業務担当者であっても今回紹介したようなツールを組み合わせることで、入力の手間が大幅に減るのではないでしょうか。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02