スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

AngularJSのテスト

ブログにAngularJSを呼び出してプログラミングできるか実験してみた。

ブログのheadタグに以下のAngularJS用のAPIを追加
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
ブログのbodyタグにng-app要素を追加
<body ng-app>

入力域と出力域、処理部分をAngularJSで記述
※ソースの中括弧はサニタイジングのため全角にしてあります

1.入力された文字列を変数に格納して出力
<div><input type="text" ng-model="yourName"></div>
<div>Hello {{yourName}}</div>

Hello {{yourName}}!



2.入力された値の大きさを比べ大きい方を出力
<div><input type="text" ng-model="x"></div>
<div><input type="text" ng-model="y"></div>
<div>{{x}} vs {{y}} : {{( x > y ) ? x : y}} is big.</div>



{{x}} vs {{y}} : {{( x > y ) ? x : y}} is big.


動作確認!
スポンサーサイト

Twitter bot作成録 -Charactorbot導入編③-

前回の導入編②では、CharactorbotをいじるためのEclipse用ツールのインストールを行った。
今回は実際にCharactorbotを導入し、動かすところについて書いていく。

【やること】
Ⅰ.CharactorbotをEclipseにインポート
Ⅱ.用意したツールをCharactorbotと紐付ける
Ⅲ.Charactorbotをコンパイル・デプロイ
Ⅳ.Charactorbotでbotを作成

【やり方】
参考:Charactorbotインストール
Ⅰ.CharactorbotをEclipseにインポート
1.Charactorbot公式サイトへアクセス。

2.[ソースコード]→[コードリポジトリリスト]の[ソースツリー]を押す。

3.ファイルツリーが表示されるので、[trunk]を押して入り、右側にあるエクスポート[ZIP]を押してソースをダウンロードする。
  ※trunkのRev.が「r253以上」のときは、バージョンが変わっているので、[tags]→[charactorbot_1_07_000]のエクスポート[ZIP]からダウンロードすること。

4.zipを適当な場所に解凍する。

5.Eclipseを開き、"パッケージ・エクスプローラ"上で右クリック、[インポート]を押し、[一般]→[既存プロジェクトをワークスペースへ]を選択、[次へ]を押す。

6."ルート・ディレクトリーの選択"に、先ほど解凍したフォルダの中にある"trunk"→"charactorbot"フォルダを選択。
  "ワーキング・セットにプロジェクトを追加"にチェックし、[完了]を押す。

7.以上



Ⅱ.用意したツールをCharactorbotと紐付ける
Eclipseに入った"charactorbot"ファイルを見ると、エラー状態error.jpgになっていると思うので、用意したツールをCharactorbotと紐付けしてエラーを除去する。
1.Eclipseの[ウィンドウ]→[設定]を押す。

2.[Google]→[Appエンジン]を選び、[追加]を押す。
  "インストールディレクトリ"に、前回解凍した"appengine-java-sdk-1.8.8"ディレクトリを指定。
  (\eclipse\plugins\com.google.appengine.eclipse.sdkbundle_1.9.18)
  AES配置
  "表示名"はバージョンが分かりやすい名前にする。(App Engine 1.8.8とか)
  [OK]を押し、追加されたバージョンをチェックする。

3.[Google]→[Webツールキット]を選び、[追加]を押す。
  上同様"インストールディレクトリ"に、前回解凍した"gwt-2.5.1"ディレクトリを指定。
  (\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.6.0)
  GWT配置
  "表示名"はバージョンが分かりやすい名前にする。(GWT 2.5.1とか)
  [OK]を押す、追加されたバージョンをチェックする。

4.[Java]→[インストール済みのJRE]を選び、[追加]を押す。
  "標準VM"を選択し[次へ]を押す。
  "JREホーム"に、前回インストールした、C:\Program Files\Javaにある"jdk1.7.0_75"ディレクトリを指定。
  "JRE"名はバージョンが分かりやすい名前にする。(JDK 1.7.0_75とか)
  残りはブランクで[完了]を押す、追加されたバージョンをチェックする。

5.Eclipseの"charactorbot"を右クリックし、[ビルド・パス]→[ビルド・パスの構成]を押す。"ライブラリー"を選択。
  それぞれのツールが以下のようなバージョンになっていれば成功。
  ビルド・パス

6.もしなっていなければ、その項目を選択し、右にある[編集]を押し、バージョンを指定できる。

7.ここまでやってエラーがなくなれば"charactorbot"がびっくりマークnoerror.jpgになるので、これで成功。

8.以上



Ⅲ.Charactorbotをコンパイル・デプロイ
1.Eclipseの右下にある[Google にサイン・イン]を押し、Googleアカウントにサインインする。
  アプリの連携を求められるので[承諾]を押す。

2.パッケージ・エクスプローラの"charactorbot"→"war"→"WEB-INF"→"appengine-web.xml"を押して開く。

3.charactorbotと書かれているので、charactorbotを作成したGAEのアプリケーションIDに変えるGAEにアクセスすればわかるはず(Applicationのところ)。

4."charactorbot"を右クリックし、[Google]→[Appエンジン設定]の"アプリケーションID"にも、同じものを入力する。

5.ここまで終わったら、"charactorbot"を選択した状態で、EclipseのメニューバーにあるGoogleマークの▼を押しプルダウンメニューを開き、[GWTコンパイル・プロジェクト]を押す。
  コンソール窓がこんな感じになれば成功。
  GWTコンパイル

6.ついにcharactorbotをデプロイする。EclipseのメニューバーにあるGoogleマークの▼を押しプルダウンメニューを開き、[Appエンジンへデプロイ]を押す。

7."Launch app in browser after successful deploy"をチェックすれば、デプロイ成功後charactorbotが自動起動する。[配置]を押してデプロイ開始。

8.Stand by...Stand by......
  デプロイ

9.charactorbotがwebで起動すれば成功。

10.以上



Ⅳ.Charactorbotでbotを作成
1.まずcharactorbotTOP画面の右上にある[日本語]を押し日本語化したのち、[ログイン]を押してGoogleアカウントにログインする。

2.[新規作成]タブをクリックすると、"Consumer key"と"Consumer secret"を入力するボックスがあるので、導入編①でメモしたものをコピペし[認証する]を押す。

3.Twitterからアカウントを使用していいのか問われるので[アプリを認証]を押し、表示されたPIN コードをメモる

4.charactorbotの画面に戻り、"PIN code"にメモしたPIN コードを入力し、[ボットの作成]を押す。

5.ボットの作成窓に必要情報を入力する。
  Bot name:適当
  Twitter ID:bot用TwitterアカウントのID
  Consumer key:さっきと同じ
  Consumer secret:さっきと同じ
  Token:導入編①でメモしたもの
  Secret:導入編①でメモしたもの
  Timezone:Asia/Tokyo
  [OK]を押す。

6."新規作成"タブのとなりに"Bot name"タブができれば成功。

7.以上

参考:ボットの新規作成

これでCharactorbotの導入が滞りなく完了するはず...。もしできなければコメントに詳しい状況を書いてもらえれば説明文を追加します。
次回からはCharactorbot操作編に入っていきますかね。

Twitter bot作成録 -Charactorbot導入編②-

前回の導入編①では、bot作成に必要な各種アカウント作成、アプリ登録、開発環境(Eclipse)のインストールを行った。

残る作業↓
1.【Charactorbotを導入するためEclipse用ツールをそろえる】
2.【実際にCharactorbotを導入し動かす】
今回は、Charactorbotを導入するためEclipse用ツールをそろえるところについて書いていく。

【まず覚えておくこと】
Charactorbotの最新バージョンは"v1.07.000"である。もちろん古いバージョンも公開されているが、CharactorbotのバージョンによってEclipseに異なるバージョンのツールをそろえる必要がある
今回はv1.07.000用の設定をしていく。

Charactorbot公式ページインストール方法に、以下の表が載っている。
対応表

つまり、
EclipseでCharactorbotをデプロイ(利用できる状態に)するには、「Google App Engine SDK for Java 1.8.8」、「GWT 2.5.1」、「JDK 1.7」という3つのツールをEclipseにインストールする必要があるということ。
では、そのやり方を説明する。Google App Engine SDK for Javaは長いのでAESと呼ぶ。



【インストール方法】
【重要】
・AESとGWTは、既に新しいバージョンが出ており、古いバージョン(インストールしたいバージョン)は断片としてしか手に入らない。そこで、最新バージョンをインストールしたのちダウングレードする方法を取りたいと思う。
・JDKについては1.7とあるが、ダウンロードサイトには7u75と表記されているので注意。

Ⅰ.AESとGWTのインストール
Ⅱ.AESとGWTを表のバージョンにダウングレード
Ⅲ.JDK 7u75のインストール


Ⅰ.AESとGWTのインストール
1.Eclipseを起動し、[ヘルプ]→[新規ソフトウェアのインストール]を押す。

2.作業対象に"http://dl.google.com/eclipse/plugin/4.3"と入力。

3.「Google プラグイン Eclipse (required)」、「GWT Designer for GPE」、「SDK」の3つをチェックし、[次へ]を押す。

4.ライセンスに同意し[完了]を押すとインストールが始まる。

5.インストールが完了したら、Eclipseを再起動しメニューバーにGoogleマークが出ていれば成功。
  Googleマーク

6.以上

参考:Google App Engine (for Java) の開発環境構築



Ⅱ.AESとGWTを表のバージョンにダウングレード
1.AESダウンロードサイトからAES 1.8.8をダウンロード。
  ([appengine-java-sdk-1.8.8.zip]を押す。)

2."Eclipseがインストールされているフォルダ\eclipse\plugins\com.google.appengine.eclipse.sdkbundle_1.9.18" にダウンロードしたzipを解凍して配置。
  AES配置

3.GWTダウンロードサイトからGWT 2.5.1をダウンロード。
  ([gwt-2.5.1.zip]を押す。)

4."Eclipseがインストールされているフォルダ\eclipse\plugins\com.google.gwt.eclipse.sdkbundle_2.6.0" にダウンロードしたzipを解凍して配置。
  GWT配置

5.以上



Ⅲ.JDK 7u75のインストール
1.JDKダウンロードサイトへアクセス。

2.Java SE Development Kit 7u75の項目にある"Accept License Agreement"にチェックし、使っているOSのbit数に合わせて[jdk-7u75-windows-○○.exe]を押してダウンロードする。(ちなみにx86が32bit、x64が64bit)
  サイトに登録しないとダウンロードできない場合もあるので、その時は適当にさっさと登録しておk。

3.ダウンロードしたexeを実行し、特に設定を変更せずにインストールする。

4."C:\Program Files\Java"に"jdk1.7.0_75"フォルダが作成されていれば成功。

5.以上


これでCharactorbotをいじるためのツールがそろった。
次回はいよいよCharactorbotを導入し、使えるようにする。

Twitter bot作成録 -Charactorbot導入編①-

Twitterで動くbotの作成について、やってきたことを記録しておく。

さすがに0からプログラミングして作るのには時間と労力がかかりすぎるので、今回は「Charactorbot」というJAVAで作られたオープンソースのbot作成ソフトを使用することにした。

※Charactorbotを改造せずそのまま使いたい人は、もっと簡単な方法があるので調べてみるべき。

【まず用意すること】
Ⅰ.bot用Twitterアカウントの用意
  ↑bot作成には必須。
Ⅱ.Twitter Application Managementでアプリ作成
  ↑CharactorbotとTwitterの仲介役となるアプリ。
Ⅲ.Googleアカウントの用意
  ↑下のアプリを使うために必須。
Ⅳ.Google App Engine(GAE)でアプリ作成
  ↑Charactorbotを入れて動かすアプリ (酷使しなければ無料で使える)。
Ⅴ.Eclipse 4.3.2 Keplerのインストール
  ↑CharactorbotをGAEへ入れたり、魔改造したりするのに必要。

【やり方】
Ⅰ.bot用Twitterアカウントの用意
Twitterをやってる人なら、またあの時の手順を踏むだけ。
1.Twitter公式サイトにアクセス。
  ログアウトしてからアクセスする

2.作りたいbotの名前とメルアド、パスワードを入力して[Twitterに登録する]を押す。

3.作りたいbotのIDを決めて[新規登録]を押す。

4.チュートリアル的なものが始まり、フォローを促されるがすべてスルーして終わらせる。
  すでにアカウントを持っているならそのアカウントと相互フォローしておくと便利。

5.以上。

参考:Twitterをはじめよう



Ⅱ.Twitter Application Managementでアプリ作成
1.bot用アカウントでTwitterにログインした状態でTwitter Application Managementにアクセス。
  もしくはアクセスしてからbot用アカウントにログイン。
  ※Twitterに電話番号を登録していなかったり、2段階認証を設定したりしていると、うまくいかないことがあるみたい。

2.[Create New App]を押す。

3.Application Detailsに情報を入力する。
  Name:アプリの名前、適当でおk。日本語でおk。
  Description:アプリの説明、適当でおk。日本語でおk。
  Website:空白にできないので、適当にGoogleとかのURLを入力。
  Callback URL:ここには何も入力しないこと

4.Yes, I agreeにチェックし、[Create your Twitter Application]を押す。

5.管理画面に入るので、メニューにある[Permissions]を押す。

6.botがリプ等に反応できるように"Read and Write"にチェックを入れ、[Update Settings]を押す。

7.メニューにある[Keys and Access Tokens]を押す。

8.[Regenerate Consumer Key and Secret]を押し、Consumer KeyとConsumer Secretを取得する。
  bot本体とTwitterをつなぐための暗号なので必ずメモる

9.次に[Create access token]を押し、Access TokenとAccess Token Secretを取得する。
  これもbot本体とTwitterをつなぐための暗号なので必ずメモる

10.botアカウントでTwitterにログインし、右上のサムネクリック→[設定]→[アプリ連携]をみて、今作ったアプリが登録されているか確認する。

11.以上

参考:Twitter APIで、アプリケーションを登録する方法
    Twitter APIでアクセストークンを取得する方法



Ⅲ.Googleアカウントの用意
  ※すでにアカウントを持っている人はそれを使っておk。
1.Googleのサインアップページにアクセス。

2.必要項目をすべて入力し、[次のステップ]を押す。

3.上で記入したメルアドにメールが来るので、それに載っているURLを押して開く。

4.チュートリアル的なものが始まるので、すべてスルーして[次のステップ]→[開始する]を押す。

5.以上

参考:Googleアカウントを新規作成



Ⅳ.Google App Engine(GAE)でアプリ作成
※1.~5.が省略される場合もある。
1.Googleアカウントにログインした状態でGoogle App Engine(GAE)にアクセス。
  もしくはアクセスしてからGoogleアカウントにログイン。

2.[Create Application]を押す。

3.認証メールの送り先を指定する画面に飛ぶので、Countryに"Japan"、Carrierに使っている携帯のメルアドのドメイン(docomo.ne.jp等)を指定、Usernameに@までのメルアドを入力(abc@docomo.ne.jpだったら"abc")。

4.[Send]を押す。

5.送られてきたGoogle App Engine Codeを入力し、認証を完了する。

6.Create an Applicationというページに飛ぶので、各項目を入力する。
  Application Identifier:アプリの名前(○○botなど鯖に負荷がかかりそうな名前だとBANされるみたいなので注意)。
  Application Title:アプリのタイトル、適当でおk。

7.I accept these terms.にチェックし、[Create Application]を押す。

8.以上

参考:Google App Engineを使って無料でサイトを立ち上げる方法



Ⅴ.Eclipse 4.3.2 Keplerのインストール
Eclipseのバージョンは何でもいいが、ここでは4.3のKeplerを使う。
1.ダウンロードサイトへアクセス。

2.[Eclipse 4.3 Kepler Pleiades All in One]を押す。

3.使っているOSのbit数に合わせて"Java"項目"Full Edition"の[Download]を押す。

4.zipのダウンロードが開始されるので、終わったらCドライブ直下に移動し、短い名前にリネームして解凍。
  ※そのままの名前で解凍すると、パス長が長すぎて解凍できない場合がある。

5.解凍したらフォルダを開き、eclipseフォルダの中にあるeclipse.exeを起動し、ちゃんと動くか確認。

6.以上


これでCharactorbotを使うための道具がそろった。
次回はCharactorbotを使えるようにするためにEclipse用ツールをそろえていく。

イオちゃんbotについて

現在作成中のイオちゃんbotについて説明します。

【主につぶやく内容】
・センパイに対する思い
・ゲーム関係の小ネタ
・緊急クエ速報(1時間前および15分前)
・鯖メンテナンス終了速報
・アップデート配布速報
・地震が起きるとびっくりします


【使えるようで使えない機能】
・メモ機能
    「memo1:(メモの内容)
    と、イオちゃんにリプすると、そのメモの内容を覚えてくれます。()は省きます。
    memo1からmemo9まで登録できます。
    ※memoは半角小文字、コロンも半角

    「memo1を教えて
    と、イオちゃんにリプすると、覚えさせたメモの内容をリプで返信してくれます。
    ※コロンいらない(つけると「を教えて」がメモになっちゃいます)

    さらに、
    「memo1を言って
    と、イオちゃんにリプすると、覚えさせたメモの内容をツイートします。
    ※コロンいr(ry
    (くれぐれもエロいことを言わせないように・・・)

・目覚まし機能
    「(○○)時(○○)分に起こして」 とか
    「(○○):(○○)に知らせて
    と、イオちゃんにリプすると、その時間に起こして(リプして)くれます。


【これから作りたい機能】
・誕生日お祝い機能
    誕生日を覚えて、お祝いしてくれる機能 (目覚まし機能の日にちバージョンみたいなやつ)。
・PSO2カレンダー読み込み機能
     PSO2のカレンダーと同期し、イベント等を教えてくれる機能。
・天才イオちゃん機能
     「(○○)教えて」とリプするとwikiに調べに行って教えてくれる機能。
・イオちゃん育成機能
     「(○○)は(☓☓)だよ」とリプするとその内容を覚えて、時々ツイートしたりする機能。

【何か要望がありましたら・・・】
YamikarasuMk22にリプでもDMでも下さい。
または、
イオちゃんに「(要望)って言っといて」とリプしてください。()は省きます。
PROFILE

闇鴉Mk.22

Author:闇鴉Mk.22
GAME:AVA・minecraft・ACECOMBAT
STUDYING:C・JAVA・Ruby
HOBBY:絵・画像処理
TWITTER:@YamikarasuMk22
PIXIV:闇鴉Mk.22

-AVA-
NAME:闇鴉Mk.22
CLASS:中佐
SD:1.8
CLAN:Project班・Arco iris
WEAPON:BlueSkull・AK-47・XM-2010

イオちゃんbot開発中


projecthan

  • 管理画面
  • TWITTER
    PIXIV
    最新記事
    月別アーカイブ
    カテゴリ
    検索フォーム
    RSSリンクの表示
    リンク
    バナー
    リンクフリーです。
    以下のバナーを利用してください。
      小サイズ1(200*40)
      bns1
      小サイズ2(200*40)
      bns2
    ブロとも申請フォーム

    この人とブロともになる

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。