2016年05月12日

多様な言語の短いプログラムコードを実行できる「glot.io」サイト(3)


「glot.io」サイトのソースエディタの背景色は、こちらの様に設定マークタブにより変更できます。




今回はファイルのアクセス制御です。ファイルの入出力をする際に「mail.php」のあるフォルダ(相対パス)が不明なのですが、こちらの様に「mail.php」からファイル出力して同じファイルを読み込む事はできます。



尚、PCローカルの絶対アドレスでも指定ができません(こちらを参照)。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2016年05月10日

多様な言語の短いプログラムコードを実行できる「glot.io」サイト(2)


今回から(無料の)アカウントを取得し、ログインしている状態で使用体験を進めます。

前回はスニペットのソースは全てPHPで記述しました。PHPではHTMLソースの中にPHPスクリプトを組み込んで、実行結果をHTMLとして表示しますが、「glot.io」サイトではこちらの様にPHPスクリプトの部分だけが実行されます。




新規にPHPのスニペットを作成するこちらでは、「+」のタブでソースファイルを増やす事ができます。



実際に以前の「バブルソート(Bubble Sort)」のPHPコードを2つのソースファイル(タブ)に分割します。追加したデフォルトのタブ名「dio.php」ソース(変更可能)に、関数「bubbuleSort」を移動し「main.php」ソースから「require_once」で取り込むようにします。各々はこちらこちらになります。




「RUN」で実行した結果がこちら



 
posted by 鎌倉太郎 at 09:00| 神奈川 ☔| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2016年05月09日

多様な言語の短いプログラムコードを実行できる「glot.io」サイト(1)


短いプログラムコード(スニペット、Snippet)を実行できる「glot.io」サイトを使ってみました。




ここではPHPによるプログラムを作ってみます。上掲のページで「PHP」を選択した所がこちら



コードのエディタ領域に「バブルソート(Bubble Sort)」のPHPコードを入力し、「RUN」で実行した結果がこちら




「PHP」マークのタブをクリックすると、こちらの様に「php main.php」を実行した事が分かります。




スニペット名を指定して「Save Secret」により保存すると、こちらの様な表示に変わり、「Fork」により再編集できます。


但し、これは一時的な保存で、継続的なコード編集をする為に保存する場合はアカウント登録する必要があります。アカウントにログインしている状態で保存したスニペットは上部メニューの「My Snippets」タブ(が追加され)に保存されます。



我家のメインPCには実行環境XAMPPをインストールしてあるのでPHPプログラムを実行できますが、インストールしていない場合には「glot.io」サイトの様な実行環境があると便利。大きなプログラムの実行は前提にしていませんが、アルゴリズムの確認や言語の記述形式などの事例による学習などに役立ちそうです。

これからPHPを中心にしてどの程度までできるのかを使用体験から確認したい。


 
posted by 鎌倉太郎 at 15:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年12月07日

「Microsoft Small Basic」の新版を使ってみる(47) - 大きく表示した画像の拡大表示


前回にインターネット上の画像を扱うアプリは一旦保留にするとしましたが、必要性から大きく表示している画像を更に拡大表示する機能を追加で拡張しました(但し、暫定的なレベルなので、見直し時には別の仕様にする必要がある)。



「Small Basic」がどこまで使えるかを確認するのが目的なので、確認アプリのソースは今回も掲載しません。


処理としては大きく表示している画像を拡大表示するエリアの最大サイズに合わせて表示します。横長の画像については有効ですが、縦長の画像での効果は大きくありません。拡大表示している間はマウス操作の取り込みを無視しています。

画像の拡張子を持たなくても、画像を表示するURLについては特定のテキストを付加すれば表示できるようにしました。



最終的な実行結果はこちらです(画像を読み込む処理に時間が掛かります)。



 
posted by 鎌倉太郎 at 13:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年12月05日

「Microsoft Small Basic」の新版を使ってみる(46) - 表示する画像一覧から選択して拡大表示


今回は前回からの続きで、表示している画像のサムネイル一覧から1つのファイルを選択して拡大表示する機能を付加します。前回でも一覧表示する中で有効な最初の画像を拡大表示していました。マウスで左クリックした画像を拡大表示エリアにドラッグ&ドロップする事で可能とします。



今回も確認アプリのソースは掲載しません。

一覧を表示する所までは前回と同じです。マウスで左クリックした位置から対応する画像を認識して、「Shapes」オブジェクトを使って移動します(ここは画像の一部を抽出するアプリと同じです)。一度選択しても右クリックで解除できます。



最終的な実行結果はこちらです。




ここまでで一旦インターネット上の画像を扱うアプリは保留としておきます。拡張したい点はあるのですが、大きな見直しが必要な事と、少し使い込んでからその他の改善点も含めて改訂していと思っています。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年12月04日

「Microsoft Small Basic」の新版を使ってみる(45) - インターネット上の画像ファイルの一覧表示


今回はテクスト・ファイルに記述したインターネット上の画像ファイルURLアドレスを使って全ての画像ファイルを一覧でサムネイル表示するアプリです。これは今後機能を付加していく第1ステップです。



今回も確認アプリのソースは掲載しません。

今回対象とするテキストファイルには文章やHTML・記号列などが入っています。その中で画像のURLは1つのレコードに入れるようにしています。

私の作業の仕方として、文章を書いていきながら裏付けとなるWebページのURLを保持したりする範囲では、テキストファイルのエディタがシンプルで軽量だから、中心的な記録媒体になっています。インターネット上で検索・調査していく中で、取り敢えず条件に合う画像のURLを蓄積していき、後で整理しながら使う画像を選択しています。情報が分散せずに済みます。

画像の選択はブラウザで表示しながらチェックする訳ですが、文章の間に入った画像URLを抜出して違うタブに表示して比較するのは厄介です。

そこでインターネット上のファイルの一覧表示をするアプリを作る事にしました。漸く勉強をした成果が出そうです・・・


さて、アプリの流れとしては、テキストファイルから順次画像URLのレコードだけを抽出して、「ImageList」を配列(行列)として作り順次画面上に配置していく所までです。URLアドレスで「ImageList」オブジェクトの「LoadImage」メソッドを使うと、実際にWebページへアクセスしに行きますので、多くのファイルを扱う時は時間が掛かり見た目に画面が変わりません。ファイル名指定の下に進捗状況を表示する様にしましたが、今後の改善テーマです。
「Image List」を作る際、キーによるインデックスを使う配列(各ファイルの属性を保管)と数値によるインデックス使う配列(複数の画像に対応)の見かけ上の2次元配列(行列)を使っています。


「日記帳」アプリの場合はNullレコードで「End of File」を判定しましたが、今回のケースでは途中にNullレコードもあるので「#END#」を持つレコードで判定しています。これは改良する時に、大きなテキストファイルの一部を対象にしたい時使えそうです。



最終的な実行結果はこちらです。元々23インチのモニターに全画面表示する事を前提にしていますので、文字が見づらい時は全画面表示にするなどしてください。


アプリでは正しいフォルダパスを使っていますが、表示だけはダミーの表示にしています。

このアプリでは画像を拡張子で判断していますが、拡張子を持たなくても画像を表示するWebサイトがあり、テキストファイルに含まれていると表示から一切抜けてしまうのは(メッセージも出せない)今後の課題です。対応のURLが画像であれば、「Microsoft Small Basic」のアプリとして表示できます。



尚、今回の動画には表れていませんが、Webサイトによりブラウザからのアクセスは許可しても、アプリケーションからのアクセスを拒否する場合があります。また、対応ページが削除などされている場合は、その判定までに時間が掛かっており、アクセス拒否のページと含めアプリの実行時間が長くなる事があります。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年12月02日

「Microsoft Small Basic」の新版を使ってみる(44) - 指定エリアのマウスによる設定


今回は指定したエリア自体をマウスのドラッグ&ドロップにより設定できるようにします。但し処理を簡略化する為、エリア設定では右下へのドラッグだけに限定します。



今回は確認アプリのソースを掲載しません。プログラムとして大分大きくなってきましたし、モードフラッグを使い過ぎて(?)ソースとして余り綺麗ではないので(これまでも良いとは限りませんが・・・)、整理・見直しが必要と考えている為。但し見直し後のソースは掲載を予定しません。

基本的にマウスのドラッグ操作で、画像抽出するエリアの指定と抽出エリアの移動という2つの処理を、モードの設定で切り分けています。その間に、マウスのクリックでエリア指定のキャンセル処理も行っています。



最終的な実行結果はこちらです。



 
posted by 鎌倉太郎 at 13:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年11月30日

「Microsoft Small Basic」の新版を使ってみる(43) - 画像を抽出する指定エリアの移動


前回は座標で抽出する位置を指定しましたが、今回は更に指定したエリアをマウスのドラッグ&ドロップにより移動させて抽出指定できるようにします。


確認アプリのソースはこちらこちらこちらこちらです。





マウス動作のクリック・移動・解除でイベントを取り込む処理及びイベント毎のサブルーチンを追加しています。

指定エリアが画像を超えない様にし、ドラッグ中にも指定座標データを変更しています。



最終的な実行結果はこちらです。



尚、前回のソースの中で抽出したエリアのクリアが、1Pixel分ずれるというバグがありましたので修正しました。


 
posted by 鎌倉太郎 at 11:00| 神奈川 ☁| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年11月29日

「Microsoft Small Basic」の新版を使ってみる(42) - 画像の部分抽出


少し間が空きましたが、今回は読み込んだ画像(拡張子をPNGに制限)の指定部分を抽出する確認アプリです。


確認アプリのソースはこちらこちらこちらです。




画像を読んでサイズを確認する部分はこれまでと類似です。但し、最大400×400の範囲に収まるようにサイズ縮小処理をしています。

抽出する画像の部分は最大150×150に制限チェックし、「GetPixel」と「SetPixel」メッソッドにより色の抽出・設定をしています。

Small Basicでは1次元の配列に制限されているので、配列要素の中に配列を入れる事によって、見かけ上の2次元行列(マトリックス)としています。抽出するだけの範囲では一旦行列にする必要はないのですが、別のアプリで利用する事を想定しています。

アプリ操作の中で最初にエラーチェックする確認をし、少し大きめに部分抽出した後、小さめの部分抽出しています。



最終的な実行結果はこちらです。



 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする

2015年11月16日

「Microsoft Small Basic」の新版を使ってみる(41) - キーボードから入力したキーの認識


今回はキーボードから入力したキーの種別を認識する確認アプリです。


確認アプリのソースはこちらこちらです。



キーを認識する時、引き渡されるコードはこちらを参照してください。

大文字の"B"・"G"・"R"の認識で色を変えたり、"+"・"-"で表示文字サイズを変えたり、矢印で表示エリアを移動できるようにしています。

「Shapes」オブジェクトの「図形化されたテキスト」の概念の使い方にも注目です。



最終的な実行結果はこちらです。


矢印で表示エリアを移動する機能は実行結果に入っていません。


 
posted by 鎌倉太郎 at 09:00| 神奈川 ☀| Comment(0) | TrackBack(0) | 体験利用-プログラミング言語 | 更新情報をチェックする