Yamasan

システム開発、ハードウェア設計、ソフトウェア開発、システム構築、プロジェクトマネージャ…

Yamasan

システム開発、ハードウェア設計、ソフトウェア開発、システム構築、プロジェクトマネージャー実施。現在は、個人事業主として業務系アプリを中心に情報発信中 coconalaで注文も受付中 Webixライブラリを使った業務アプリを紹介します。 広島県在住

レンタルサーバで業務系Webアプリを構築するメリットについてNo.72

業務系Webアプリの開発・構築環境として、社内や自宅内のLinuxサーバ（MiniPCにLinuxOSインストールも含め）を採用する事例を紹介していますが、同時に、インターネット上のレンタルサーバに構築する案もあり、今回そのメリットや構築方法などを紹介します。 Webアプリは、UIにJavascript（Webixライブラリの採用）を使い、サーバ側の業務系アプリにPHPを採用しているので、レンタルサーバでは、PHPが動作するWebサーバが使用できることと、データベース(MyS

Yamasan

    • webix さまざまなフォーム色指定No.071

      いままで、いくつもWebixライブラリを使った業務用画面を紹介してきましたが、その画面デザインを検討する中で、フォーム上に配置する各種コンポーネントのスタイル（色など）を指定したいことも多くあります。 今回は、サンプルとして、さまざまなコンポーネントの色（文字色、背景色）の設定方法をサンプルソースで紹介します。 今回のようにたくさんの色指定コンポーネントを同じ画面に配置することは、通常しません。（色の多用は、見づらい画面になってしまいます） 一部のコンポーネントの色を変更する

      Yamasan

      • webixでグラフ作成（2軸グラフ他）No.070

        しばらく、開発作業で記事の投稿ができていませんでしたが、Webixでグラフを作成する中で検討した内容を紹介します。 WebixというJavascriptのライブラリには、多くのコンポーネントが用意されており、さまざまなリッチ画面を短時間で効率よく作成することができます。Web画面でグラフ表示したい要望もあり、chartコンポーネントを使うと簡単にさまざまなグラフを描画できます。 以下のようなグラフなら、データを配列で準備して軸情報など指定すれば、すぐに描画できます。 実際

        Yamasan

        • webixでスケジューラ機能を実装（その2）No.069

          前回（No.068）では、Webixライブラリでスケジューラを作成する概要を説明しましたが、今回は、実際に実装したイメージを紹介します。 まだ、正式運用には改造や機能追加が必要ですが、基本機能の実装をしましたので紹介します。 このスケジュールは、以下の条件（要件）で動作させることを想定して実装しています。 （１）複数ユーザが、スケジュールを共有（閲覧）したり、プライベート（非公開）のスケジュールを運用できる。個人のスケジュールには、公開用と非公開用を持ち、グループで共有するグ

          Yamasan

        レンタルサーバで業務系Webアプリを構築するメリットについてNo.72

        Yamasan

          webixでスケジューラ機能を実装（その１）No.068

          今回は、webixライブラリのスケジューラ機能の紹介です。 この機能を利用するには、商用ライセンス(Pro版でかつスケジューラ機能を追加）が必要なので、どのような機能かを何度かに分割して紹介します。 尚、ライブラリは、UI（Javascript）側のみなので、サーバサイド（イベント情報の保存や検索など）は、何らかの言語で実装する必要があります。 オンラインマニュアルにもサーバサイドの実装について記述があるので参考にしながら実装が必要です。 まずは、ネット上の説明記事です。（英

          Yamasan

          webixでスケジューラ機能を実装（その１）No.068

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用(その3）webixで一覧管理しますNo.067

          以前、Googleアイコン（SVG）をpng画像に変換してパソコンにダウンロード後に、再度、サーバに転送して管理する記事を記載しました。 この方式では、作成したPNGをPC上で確認できるメリットもありますが、多くの画像を作成したい場合、ダウンロードシテカラサーバに転送する作業が煩雑です。今回は、画面操作（Webixで作成した画面）で、変換したpng画像をWebサーバの指定したフォルダに自動保存する機能を紹介します。 SVG形式の画像データをPNGに変換する方法としては、サー

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用(その3）webixで一覧管理しますNo.067

          Yamasan

          EXCEL VBAで時刻計算するときの注意点No.066

          1ケ月、記事の投稿ができず、久しぶりの投稿です。その期間、Webアプリの開発やEXCEL VBAの作成などに時間がかかり、投稿ができませんでした。今回は、その期間内で発生した課題や対策をいくつかの記事にしたく、今回はVBAに関する内容です。EXCELで稼働時間などを加算して1ケ月の稼働時間を合計したいことありませんか？　EXCEL上のセルをSUM関数で合計して時間表示するだけであれば、問題は発生しないのですが、VBAで、セルの値を取り出し、変数に代入して加算していくと、24h

          Yamasan

          EXCEL VBAで時刻計算するときの注意点No.066

          Yamasan

          スマホでGPS情報を周期的にロギングする動作について（課題）No.065

          前回までに、GoogleMap上に自分の好きなアイコンを表示する画像準備（SVGからPNGを作成）を紹介し、今回から、スマホで周期的にGPS情報をロギングしてGoogleMapに軌跡を表示する動作を紹介しようと、実装調査をしていましたが、いくつか、課題が判明しました。 （１）PC上で動作させたとき、GPS情報を収集する画面から別のタブに画面を切り替えたタイミングで、元の画面がアクティブでなくなり、そのタイミングでGPS収集処理が停止（待ち）になるようです。 Javascri

          Yamasan

          スマホでGPS情報を周期的にロギングする動作について（課題）No.065

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用(その２）webixで一覧管理しますNo.064

          前回の記事では、Googleアイコンの色を指定してpng画像でダウンロードする機能を紹介しましたが、20pxや24pxでは、Google mapのポインタにはサイズが小さかったです。そこで、色以外にサイズも指定して画像ファイルを作成するように機能を改造しました。 以下は、実際に変換した画像をgoogle Mapに表示した例です。 画像サイズを32pxで作成しました。（家とスマホの画像です） ポインタ表示は、アイコンと文字を指定して決めた位置（緯度、経度）に表示しています。

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用(その２）webixで一覧管理しますNo.064

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用webixで一覧管理しますNo.063

          Googleアイコンって知っていますか？SVGフォーマットでサイズや色を指定してきれいな画像をダウンロードし、利用することができます。 以下のサイトで画面操作で利用できます。 アイコンの数が2000以上あるので、探すのがけっこう大変です。 一括でダウンロードもできますが、ZIP形式で3.9GBもあり、フォルダ構成が深いので、こちらも探すのが大変。 今回、Googleマップのマーカーシンボルを自分で指定した画像にして表示することを計画しており、そのシンボルを集めるためにGoo

          Yamasan

          Googleアイコン（SVG）をpng画像に変換して活用webixで一覧管理しますNo.063

          Yamasan

          Webアプリで電子カードを使った認証処理-3(No.062)

          前回までに、NFCカードを読み込むアプリ（C＃）と、Webアプリ（サーバ側）からWindowsで動作中のC#アプリにリクエストを出して、読み取るロジックまで紹介しましたが、今回は、実際に電子カードを利用したログイン認証機能の紹介です。 ログイン画面に新規にカード認証ボタンを追加します。 カード認証時にも、セキュリティ面からログインIDを必要とする方法にしました。 実際に、ログインID未入力でカード認証をクリックすると 以下のようにエラーメッセージが表示されます。 ちなみに

          Yamasan

          Webアプリで電子カードを使った認証処理-3(No.062)

          Yamasan

          Webアプリで電子カードを使った認証処理-2（No.061）

          前回に引き続き、電子カード（非接触）を使った認証処理を実装する続きです。前回は、Webサーバからの要求で、C＃アプリがカードリーダを読み、結果をWebサーバに返す機能を紹介しましたが、今回は、Webサーバ（PHP言語）側の処理です。画面（Webixを使ったJavascript画面）は、次回にします。 PHPからは、curlコマンドでC#アプリが動作しているWindowsOSのPCに8082ポートを使用してhttpリクエストを出します。 C#のアプリは、カード情報が読めると、そ

          Yamasan

          Webアプリで電子カードを使った認証処理-2（No.061）

          Yamasan

          いつものカードを使って認証処理を実装してみませんか？(No.060)

          以前からNFCカード（非接触電子カード）を使って、ログイン処理やタイムカードのような業務を実現したいと思っていました。最近のスマホでもNFCリーダが使えるのですが、WebアプリとなるとJavascript言語とブラウザで使えることが条件となり、現時点ではAndroid系のみブラウザがサポートしていなく、時期を待っていました。 今回は、実装方式を見直して、パソコン（windows OS)で使えるカードリーダと組み合わせる方式で実装してみました。 カードリーダもバージョンアップさ

          Yamasan

          いつものカードを使って認証処理を実装してみませんか？(No.060)

          Yamasan

          EXCELでの情報管理をWebアプリにしませんか？webixライブラリとPHPで簡単に実装No.059

          EXCELとVBAを活用してさまざまな情報を集計したり、印刷や計算する業務を実装するケースが多いと思いますが、何度も同じような作業（たとえば、週単位や月単位で集計など）をしてゆくと、たくさんのEXCELファイルが作成され、パソコンや共有サーバ上に複数ファイルを保存して管理する必要があります。また、操作によっては、同じファイルが複数保存されどれが最新なのかが把握できなくなる課題もあります。EXCELは、汎用ですぐにつかえるのでメリットは大きいですが、一方で、ルールを決めて管理を

          Yamasan

          EXCELでの情報管理をWebアプリにしませんか？webixライブラリとPHPで簡単に実装No.059

          Yamasan

          Webixライブラリを使った画像表示No.058

          Webアプリの中で写真や画像、PDFなど表示したい場面も多くあると思います。今回は、webixのライブラリを少し加工（拡張コンポーネント）し、新たなphotoコンポーネントを使って、必要時に個別ウィンドウに画像を表示するサンプルを作成しましたので紹介します。 code snipetでの公開です。 この記事を記述するにあたって、WebixサイトのFORUMの記事を参考にしています。 FORUMでもいろいろ情報公開されているので便利です。 以下にアクセスすると、実際に動作します

          Yamasan

          Webixライブラリを使った画像表示No.058

          Yamasan

          Webixライブラリを使ったWebアプリと自動ログイン機能についてNo.057

          いままで、Webixライブラリを使ってJavascript言語でリッチWebUIの開発方法を紹介していますが、今回は、ログイン機能に少し、機能追加したので、紹介します。 業務系アプリケーションをWebアプリでサービス提供するとき、誰が操作するかと、操作可能なユーザであることを認証するためにログイン画面を実装することが多いです。一方、複数の人に同時に閲覧してもらいたい場合などで、ログインIDとパスワードを資料上に記載しない（セキュリティ面を考慮）で、連絡するのは、けっこう面倒で

          Yamasan

          Webixライブラリを使ったWebアプリと自動ログイン機能についてNo.057

          Yamasan