ここから本文です

この知恵ノートを「知恵コレクション」に追加しました。

追加した知恵ノートはMy知恵袋の「知恵コレクション」ページで確認できます。

知恵コレクション」に登録済みです。

再登録しました。

追加に失敗しました。

ノートに戻り、もう一度やり直してください。

すでに1,000件のノートが登録されています。

新しく追加したい場合は、My知恵袋の「知恵コレクション」ページで登録されているノートを削除してください。

追加できませんでした。

ノートは削除されました。

AndroidでBASICで遊ぶ方法 その6

ライターさん(最終更新日時:2015/1/8)投稿日:

  • ナイス!:

    0

  • 閲覧数:451

印刷用のページを表示する

0.この知恵ノートの概要

 

  Androidでプログラム言語BASICを利用してプログラムを
  作成できるアプリ「BASIC!」で実際に作成したプログラムを
  ご紹介し、説明します。
  今回は第6回目でグラフィックの2回目になります。


  グラフィックについては、「AndroidでBASICで遊ぶ方法
  その4」でも説明していますが、プログラムの部品となる
  プログラムだったので、一連の簡単な処理ができる
  シンプルなプログラムを説明します。

 

 

  ※今回の説明内容と直接関係はありませんが実際に
   BASICが動いている動画を見たい方は以下をご覧ください。

   AndroidでBASICで遊ぶ方法(動画編)
   http://note.chiebukuro.yahoo.co.jp/detail/n326969


 

1.前提

 

  この知恵ノートをお読みになる前に以下の知恵ノートを
  ご覧いただければよりわかりやすいと思います。

 

  AndroidでBASICで遊ぶ方法
  http://note.chiebukuro.yahoo.co.jp/detail/n190833

  AndroidでBASICで遊ぶ方法 その2
  http://note.chiebukuro.yahoo.co.jp/detail/n208888

  AndroidでBASICで遊ぶ方法 その3
  http://note.chiebukuro.yahoo.co.jp/detail/n210000

  AndroidでBASICで遊ぶ方法 その4
  http://note.chiebukuro.yahoo.co.jp/detail/n214126

  AndroidでBASICで遊ぶ方法 その5
  http://note.chiebukuro.yahoo.co.jp/detail/n216786

 

2.ご紹介するプログラム

 

  プログラムの名前は「漫画ツール」といいます。
  ブログなどにちょっとした挿絵の吹きだし付一コマ漫画
  があるといいと思い、作成しました。

 

 manga4.png

 

  漫画の吹きだしに何も入っていない状態の複数の画像
  から一つを選択して文字の書き込み位置を指定して
  書き込みできるツールです。

 

  結構ネット上でも漫画を作成できるWEBサイトはありますが
  androidでは上手く動かなかったり、吹きだしが英語で
  しか作成できないなど使いづらかったので自分で作成
  しました。 

 
3.「漫画ツール」でできること

 

  漫画ツールを動かしてできることはとてもシンプルです。

 

  (1)起動すると吹きだしに何も入っていない状態の複数の
     画像が一覧で表示。

 

 manga1.png


  (2)その一つをタップすると該当の画像を拡大表示。

 

 manga2.png


  (3)画像にタップすると吹きだしの入力テキストボックス
     が表示され、入力する。

 

 manga3.png
 

  (4)吹きだしに日本語が入った内容で画像ファイルが新規
     に書き出し用ディレクトリに作成される。

          吹きだしの修正もできます。

 

 manga4.png

 manx.jpg 

 

 4.「漫画ツール」で利用している仕組み

 

  このツールのプログラムは、BASIC!で作られています。
  
  このプログラムを利用できるようにするには、吹きだしに
  何も入っていない状態の複数の画像を事前に用意する必要
  があります。

 

  私は、以下のサイトで元画像を作成しました。

  「MAKE BELIEFS COMIX! Online Educational
   Comic Generator for Kids of All Ages」

 

  http://www.makebeliefscomix.com/Comix/

 

  吹きだしに日本語は通りませんが、いいサイトだと思います。

 

  元画像のサイズは233×215ピクセルを前提として
  プログラムを作成しています。
    

  


5.「漫画ツール」のプログラム内容

 

  それではもう少し具体的にこのツールの内容を見ていきます。
  BASIC!のプログラムで実際にやっていることを順に記載すると
  以下の通りとなります。

 

  実際のブログラムのソースは以下をご覧ください。

  ブログラムのソース: https://www.dropbox.com/s/9wbq1ze5nx2dupk/a-manga1.bas

  
  (1)画面の基本設定をする。

 

     REM Start of BASIC! Program
     console.title "漫画ツール"
      →コンソール画面の上部にタイトルを表示する。
     
     time y$, m$, d$, h$, n$, s$
     today$=y$+m$+d$+h$+n$+s$
      →保存先のファイル名の一部利用する為に
       現在日時を取得する。
     
     popup "漫画ツール起動中....",0,0,1
      →起動中のバブルメッセージを4秒表示
       現在日時を取得する。

 

     pause 5000
     
     
     bbb:
     r=255
     g=255
     b=255
     gr.open 255, r,g,b
      →グラフィックモード開始。

 

     gr.color 255,255,255,0,1
      →グラフィック画面の背景色を白設定

 

     gr.render
      →念のためグラフィック画面に描画して
       いますが、意味はあまりないかも。
 

  (2)漫画の元画像選択画面表示

 

     aaa:
     
     path$ = "/../../man/"
      →画像ファイルの元ファイルを保存して
       いるディレクトリを相対パスで指定。

       ※BASICの場合ファイルのディレクトリの
       初期設定は /rfo-basic/data/
              この場合、相対パス指定で/rfo-basic/と
       横並びの階層に /man/がある形になる。

 

     pathx$ = "/../../manx/"
      →同様に画像ファイル保存先パスを指定。

 

     ARRAY.DELETE d1$[]
      →念のため、今後使用する配列を開放。

 

     FILE.DIR path$, d1$[]
      →ディレクトリリストを配列に格納。

 

     ARRAY.LENGTH length, d1$[]
      →配列の項目数を取得
     
     ARRAY.DELETE f1$[]
     ARRAY.DELETE img[]
     ARRAY.DELETE imga[]
     ARRAY.DELETE imgb[]
     
     dim f1$[100]
      →今後使用する配列を宣言。
     dim img[100]
     dim imga[100]
     dim imgb[100]
     
     if length=0 then
      →ディレクトリリスト用配列の項目数が
       0であれば元画像ファイルなし

       popup "元画像ファイルが作成元ディレクトリにありません。",0,0,1
       end
     else
       for i=1 to length →nextまで繰り返し

         f1$[i]=path$+ d1$[i]
        →ファイル名を相対パス付で配列に格納。

 

         gr.bitmap.load img[i],f1$[i]
        →画像ファイル名のアドレスをimg[]配列にセット

 

         gr.bitmap.scale imga[i],img[i],116,107
        →画像サイズを変更してその画像のアドレスを
         imga[]配列にセット

 

         gr.bitmap.create imgb[i],116,107
        →画面表示用imgb[]配列に画像サイズを指定

 

         gr.bitmap.draw imgb[i],imga[i],10+(i-1)*116,10
        →画面表示用imgb[]配列に表示画像サイズを指定
         画面上の出力位置のx、y座標を指定
         drawという命令だが実際の描画は、gr.render
         で描画される。
     
       next i
     endif
     
     gr.render

     →グラフィック画面に一覧描画
      ※今の所画像一覧は横一列表示のみ


     ccc:
     do →untilまで繰り返し

        gr.touch touched, x, y
       →画面をタップするとtouchedが0になり
        その座標がx,yにセットされる。

 

     until touched 
      →タップされない限り無限ループする
     

 

  (3)選択後、元画像を拡大して表示     
  
     pmsg$="x= "+str$(floor(x))+" y= "+str$(floor(y))
     popup pmsg$,0,0,1
     pause 4000
      →タップした座標x、yを小数点以下切捨てで
       バブルアップメッセージで表示


     posx=x-10
     posx=floor(posx/116)+1
     posy=y
     
     pmsg$="posx= "+str$(posx)
     popup pmsg$,0,0,1
     pause 4000
      →タップした座標xから一覧何個目の画像か
       計算した結果をバブルアップメッセージで表示


     
     if posx>length then
        goto ccc
        →タップした画像位置がただしく無い場合は、
         画像一覧画面のタップ待ちの状態に戻す

 

     else
       if x<10 then
          goto ccc
         →タップした画像位置がただしく無い場合は、
          画像一覧画面のタップ待ちの状態に戻す

       else
         if posy<117 then
           if posy>10 then
              popup "ok",0,0,1
              pause 4000
          →タップした画像位置がただしい場合は、
           バブルアップメッセージでOKを表示

           else
              goto ccc
          →タップした画像位置がただしく無い場合は、
           画像一覧画面のタップ待ちの状態に戻す

           endif
         else
            goto ccc
         →タップした画像位置がただしく無い場合は、
          画像一覧画面のタップ待ちの状態に戻す

         endif
       endif  
     endif
     
     
     gr.close 
      →グラフィックモードをクローズ
       一覧画面を閉じる。
     
     tmoto$="吹き出し等を入力してください"
     
     gr.open 255, r,g,b
     gr.color 255,255,255,0,1
     gr.render
      →再度グラフィックモードを開き
       まっさらな画面を描画する。
     
     
     ddd:
     
     f2$=path$+ d1$[posx]
      →タップされた一覧の画像の相対パスを設定

 

     gr.bitmap.load img2,f2$
      →画像のアドレスを取得

 

     gr.bitmap.scale imga2,img2,466,430
      →画像のサイズを元の2倍に設定し画像の
       アドレスを取得

 

     gr.bitmap.create imgb2,466,430
      →描画先のアドレスを取得

 

     gr.bitmap.draw imgb2,imga2,0,0
      →サイズ変更後の画像および描画先のアドレス
       と画面上の描画開始位置を設定
     
     
     gr.render
      →画像を描画する。
 
     eee:
     do
        gr.touch touched, x, y
     until touched
      →タップされない限り無限ループする

 

  (4)吹きだしを入力して描画する
     
     gr.close
      →グラフィックモードをクローズ
       選択画面を閉じる。
     
     md2:
     
     text.input tin$,tmoto$,"吹き出し等入力"
      →吹き出しの内容を入力する為のテキスト
       インプット画面を表示

 

     tmoto$=tin$
      →吹きだし修正時の為、入力された文字列
       を保存する。
     
     gr.open 255, r,g,b
     gr.color 255,255,255,0,1
     gr.render
      →再度グラフィックモードを開き
       まっさらな画面を描画する。     
     
     fff:
     
     f2$=path$+ d1$[posx]
     gr.bitmap.load img2,f2$
     gr.bitmap.scale imga2,img2,466,430
     gr.bitmap.create imgb2,466,430
     gr.bitmap.draw imgb2,imga2,0,0
      →再度グラフィックモードを開き
       タップされた画像を描画する。     
     
     array.delete fuk$[]
     split fuk$[],tin$,"\n"
      →テキストバックスで入力された文字列を
       改行コードで分割し配列に入れる     

 

     array.length lfuk,fuk$[]
     
     
     
     GR.TEXT.ALIGN 1
      →描画するテキストの配置を左よせに設定

 

     GR.COLOR 255, 0, 0, 0, 0
      →テキストの色を黒に設定

 

     GR.TEXT.SIZE 25
      →テキストのサイズを25ピクセルに設定
     
     for j=1 to lfuk →テキストの行数分繰り返す。

       GR.TEXT.DRAW blink_ptr, x,y+(j-1)*30,fuk$[j]
       →行間を5ピクセル(30-25)に設定

     next j
     
     gr.render
      →テキストを含めて画像を描画
     
     ggg:
     do
        gr.touch touched, x2, y2
     until touched
      →タップされない限り無限ループする
 

  (5)メモ保存先のファイルをFTPでアップロード
   
     gr.front 0
      →グラフィック画面を背面に移動して
       コンソール画面にする。
     
     input "吹き出しを修正しますか?(y/n)",yn2$
      →ダイアログを表示
     
     gr.front 1
      →グラフィック画面に戻す。
      
     
     if yn2$="y" then
       gr.close
       goto md2
     endif
      →修正する場合は前の処理に戻す。
     
     popup "画像処理中です...",0,0,1
     pause 5000
     kall$=pathx$+"man"+today$+".jpg"
      →保存先のファイル名を設定
   
     
     Gr.screen.to_bitmap img03
      →グラフィック画面の描画内容を保存し、
       そのアドレスを取得。 

 

     Gr.bitmap.crop img04,img03,0,0,466,430
      →グラフィック画面の描画内容を切出し
       (クロップ)保存しそのアドレスを取得。 

 

     Gr.bitmap.save img04,kall$,100
      →クロップした内容をファイルに保存 

 

     popup "漫画画像ファイルを作成しました。",0,0,1
     pause 5000
     gr.close
      →グラフィック画面をクローズ
     
     popup "漫画画像ファイルを /manx/Kall .jpg に保存しました。",0,0,1
     pause 5000
     popup "処理終了",0,0,1
     pause 5000
     exit


 

6.BASIC!の情報サイト


 

  私自身もBASIC!関連の日本語の掲示板や情報サイトを探しましたが
  ほとんどないので、仕方なく自分で作成しました。

  私自身、そんなにプログラム能力はないのであまり大した内容は
  ありませんが紹介動画や自作サンプルプログラムを置いているので
  よろしければ覗いてみてください。

 

  BASIC!友の会

   http://basic.amsstudio.jp/


  また、BASIC!友の会関連の更新はツイッターで
  お知らせしています。


  BASIC!友の会のツイッターアカウント
  @basictomonokai

  https://twitter.com/basictomonokai


7.関連知恵ノート一覧

 

  この知恵ノートに関連する知恵ノートの一覧です。

 

    AndroidでBASICで遊ぶ方法
  http://note.chiebukuro.yahoo.co.jp/detail/n190833

  AndroidでBASICで遊ぶ方法 その2
  http://note.chiebukuro.yahoo.co.jp/detail/n208888

  AndroidでBASICで遊ぶ方法 その3
  http://note.chiebukuro.yahoo.co.jp/detail/n210000

  AndroidでBASICで遊ぶ方法 その4
  http://note.chiebukuro.yahoo.co.jp/detail/n214126

  AndroidでBASICで遊ぶ方法 その5
    http://note.chiebukuro.yahoo.co.jp/detail/n216786
  AndroidでBASICで遊ぶ方法 その6
    http://note.chiebukuro.yahoo.co.jp/detail/n218610

  AndroidでBASICで遊ぶ方法 その7

  http://note.chiebukuro.yahoo.co.jp/detail/n222440

    AndroidでBASICで遊ぶ方法 その8-1
    http://note.chiebukuro.yahoo.co.jp/detail/n224842

    AndroidでBASICで遊ぶ方法 その8-2
    http://note.chiebukuro.yahoo.co.jp/detail/n225769

    AndroidでBASICで遊ぶ方法 その8-3
    http://note.chiebukuro.yahoo.co.jp/detail/n225771
    AndroidでBASICで遊ぶ方法(超初心者編)
  http://note.chiebukuro.yahoo.co.jp/detail/n223881

このノートに関するQ&A

このノートに関するQ&Aは、まだありません。

このノートについて質問する

このノートについてライターの方に質問できます。

※ライターの方から必ず回答をいただけるとは限りません

※別ウィンドウで開きます

ピックアップ

【iPhone】修理交換の申込方法...
 ※追記※2015/1/30現在iPhone6及び6+が発売されたのを受け、情...
知っておきたい無線LANルーター...
知っておきたい無線LANルーターの知識と選び方iPod touchやPS...
iTunesカードの基礎知識
はじめにiTunesStoreやAppStoreの決済には通常クレジットカー...
本文はここまでです このページの先頭へ