Angularで遊んでみる:セットアップ

次の仕事でAngularを使いそうなので、遊んでみることにする。

参考にするサイトは公式チュートリアル

セットアップ~

Node.jsをインストール

推奨版を入れた。 f:id:levia9071:20200629095831p:plain

Node.jsとnpmがインストールされてるか確認

$npm -v
$node -v

入ってることが確認できた。 f:id:levia9071:20200629102000p:plain

Angularをインストール

公式チュートリアルに戻り、npmを使ってAngularをインストール。

npm install -g @angular/cli

一瞬プロキシの壁に阻まれたが、インストールできた。 f:id:levia9071:20200629101859p:plain

インストール出来てるか確認。

ng version

入ってることが確認できた。 f:id:levia9071:20200629102411p:plain

初期アプリケーションを作成する

チュートリアルと同じく、my-appを作ることにした。

ng new my-app

ここもプロキシ注意 f:id:levia9071:20200629114501p:plain

ディレクトリを移動して、my-appを起動する

cd my-app
ng serve --open

f:id:levia9071:20200629114926p:plain

ちょっと待ってると、勝手にブラウザが開いた。 f:id:levia9071:20200629114756p:plain

ちなみに、作ったフォルダの中↓ f:id:levia9071:20200629115238p:plain

セットアップできた!

SaturdayNightSpecial!!

サタスペと呼ばれるTRPGシステムの一つ。
ルルブを買ったから、身内卓に回したいところだがキャラ作成がちょっとややっこしい。

キャラシ作成サイトもあるにはあるんだが、見た目がぱっとしないのであまり好きじゃない。

取り急ぎ、PDFに入力フォームをつけて編集できるようにして展開する予定だが・・・。
やっぱり、かっこよくしたいよね。ちょっと考えてみることにする。

キャラシの保存はDropBoxでもいいかなと思ってる。
参考にしたサイトのURLをどんどん書いていきたいと思う。

Azure初心者が無料ではじめてみた。

Azureとはなんぞやを学ぶために、とりあえず無料アカウントで遊んでみることにした。

環境

Azure無料のやつ JDK11

ざっくり説明

コンストラク

コンストラクタは、ストレージの接続先をルートにするか
ルート配下のディレクトリにするか、どちらでも選択できるように2つ用意した。

今回はGitLabに上げることを考えて、接続情報をコンストラクタの第一引数にした。
普段はそんなことしなくていいと思う。

// 接続先:ルート
public AzureStorageAccess(String storageConnectionString,final String shareName) 

こいつがやることは第三引数まであるコンストラクタを呼び出すだけ。
※第三引数にはnullを格納する。

// 接続先:ルート配下のディレクトリ(ディレクトリ名は任意)
public AzureStorageAccess(String storageConnectionString,final String shareName, final String dirName) {

第三引数がnullならルートを接続先として格納する。
そうでなければ第三引数の場所を接続先として格納する。

アップロード

アップロードも2種類用意した。
 ・ファイルパス(String型)を渡すメソッド
 ・ストリーム(FileInputStrem型)を渡すメソッド

public void upload(final String inputFilePath, final String outputFileName) 
public void upload(final FileInputStream inputStream, final String outputFileName)

ダウンロード

ダウンロードしたいファイル名を引数に渡すとダウンロードしてくれるぞ。 戻り値voidにしてたの忘れてたわ

public void download(final String fileName)

ファイル一覧取得

とりあえず作るよね、ファイル一覧取得。 リストになって帰ってくる。

public List<String> list()

ファイルデリート

ファイル名に一致するファイルを削除する。 今のままだとコンストラクタで指定した接続先の配下にいないと削除してくれない。 うん、実際に使うには修正が必要だね。

public void delete(final String fileName) 

今回はこんな感じ。以上。

GitLab

gitlab.com

開発をするにあたり、環境を整えてみた。

開発するなら、まずは形から。
今回は環境を整えるという回である。

勉強も兼ねてAtlassianとAzureに触れてみようと思う。

Atlassian系
 - Bitbucket
 - Jira
 - Confluence

Azure系・・・これから考える。 明日調べる。

Atlassian系は仕事で使ってるのでなんとなく分かるが、
Azureはこれから使う予定なので、事前に触ってみようかと…。
そのくらいのノリである。 ( 別件でNode-REDも触ってみたいんや。)

上に記載したAtlassianは一人で開発するには無料だし、かなり優秀だと思う。。

SpringBootを使ってTeamsにメッセージを投稿してみた。

はじめに

この記事は富士通システムズウェブテクノロジー Advent Calendarの17日目の記事です。

(お約束)本記事の掲載内容は私自身の見解であり、
所属する組織を代表するものではありません。

入社2年目がSpringBootを使ってTeamsにメッセージを投稿して遊んでみた記事です。

技術力はまだまだだけど、お祭りに参加したぞってのを感じて。
まぁ、少しくらいは知識を身に着けて。
楽しかったと言えればそれでいいのだ!くらいの気持ちで書きました。ええ。

ということで、遊んでいくゾ

Teamsとは

Microsoft社が開発したチーム間のコミュニケーションを促進するためのツール。

【コンセプト】
 チャット機能、音声機能、会議等により、
 チームのメンバーがどこにいてもコミュニケーションを取ることができる。

Teamsの主な機能

  • チーム内でのオープンな会話
  • チームメンバー同士のチャット(コミュニケーションスペース)
  • チームのメンバーとの1:1でのチャット
  • チーム内でのファイル共有
  • 関連サービスまたはシステムとの連携(コネクタアプリ)
  • チームの会議のスケジューリング
  • 音声/ビデオ通話(Skype for Business機能を活用)

Teamsの構成

組織/チーム/チャネルの3つで構成されている。  

組織    
 ┣ チーム① 1
 ┃  ┣ チャネル1  
 ┃  ┣  :  
 ┃  ┗ チャネルn  
 ┣ :  
 ┗ チームn  
    ┣ チャネル1  
    ┣  :  
    ┗ チャネルn  

TeamsとSlackの違い

開発コンセプト

【Slack】
 メールでのコミュニケーションを不要として
 チャットツール中心のコミュニケーションを実現すること。

【Teams】
 チャットとメールを別のコミュニケーションツールとして棲み分け、
 双方を有効活用したコミュニケーションを実現すること。

遊ぶのだー!!

まずは、遊ぶための下準備。

遊ぶためには準備が必要。しっかりとやっていこう。

前提

  • Teams
  • JDK11
  • SpringBoot
  • Gradle

Teamsのアカウントを準備する

公式サイトからサインアップorサインインをする。
※既にOutlookのアカウントを持っている人はサインインでいいゾ。

アカウント作成途中で「会社名は?」とか聞かれたような気がしたが、
Sampleとしておいた。

Sampleの配下に「一般」というタブがある。
この「一般」こそがチャネルである。

f:id:levia9071:20191214173203p:plain

コネクタを準備する

今回は外部からメッセージ投稿するので、Incoming Webhookを使っていく。

コネクタの設定方法

① 外部からメッセージ投稿させるチャネルを選択し、「コネクタ」を押下。
f:id:levia9071:20191214173209p:plain

② コネクタが一覧で表示されるので、
  「Incoming Webhook」を探してボタン「追加」を押下。
f:id:levia9071:20191214173240p:plain

③ Incoming Webhookの詳細画面に遷移するのでもう一度ボタン「追加」を押下。
f:id:levia9071:20191214173243p:plain

④ フック名に適当に名前を付ける。今回はsampleにした。
  名前を付けたらボタン「作成」を押下。
f:id:levia9071:20191214173249p:plain

⑤ スクロールするとURLがあるのでそれをコピー!メモか何かに貼り付けておこう。
  念のためURLは隠したゾ。
f:id:levia9071:20191214173252p:plain

さぁ、メッセージを投稿しようではないか!SpringBoooooooot!

Teamsの準備もできたところで遊んでいこう。ソースは下記参照。

言うても今回は、RestTemplateを使ってメッセージを送信するという簡単なもの。
定数URLの値は【コネクタの設定方法】の手順⑤のURLである。

SpringBootを起動して、ブラウザのURLに「http://localhost:8080/teams」を入れて…。

f:id:levia9071:20191214173258p:plain

送信できたー!!!!

冒頭に書いた目標(楽しかったと言えればそれでいいのだ)は、達成と言ってもいいでしょう!

…といったところで今回はここまで!

今回使ったソース

@GetMapping(path = "/teams")
  public ResponseEntity<String> teams(){
      HttpHeaders headers = new HttpHeaders();
      headers.setContentType(MediaType.APPLICATION_JSON);
      Map<String, String> params = new HashMap<>();
      params.put("title", "タイトル");      
      params.put("text", "テキスト");
      HttpEntity<Map<String, String>> request = new HttpEntity<>(params, headers);
      RestTemplate restTemplate = new RestTemplate();
        
      try {
          return restTemplate.exchange(URL, HttpMethod.POST, request, String.class);
      } catch (RestClientException e) {
          throw new RuntimeException();
     }
  }

最後に

アドベントカレンダーというイベントに参加できたことを光栄に思います。
このような機会を作ってくださったjugemsanさん、ikedahideyaさん、相談に乗って頂いた皆様。
そしてなにより、こんな拙い記事を最後まで読んでくださった皆様、ありがとうございました。

参考URL

RestTemplateでつまったことが多いからまとめてみた

表題のとおりだが、RestTemplateでつまることが多かったため自分用にまとめてみた。
内容はシンプル。InvokerControllerがInvokeeControllerを呼び出すだけ。

PATCHメソッドはHttpComponentsClientHttpRequestFactoryを使用する。

サンプル

呼び出し元

@RestController
public class InvokerController {
    private static final String URL_INVOKEE = "http://localhost:8080/invokee";
    
    @GetMapping(path = "/get")
    public ResponseEntity<String> get() {
        RestTemplate template = new RestTemplate();
        return template.getForEntity(URL_INVOKEE,String.class);
    }
    
    @GetMapping(path = "/post")
    public ResponseEntity<String> post() {
        SampleRequest request = new SampleRequest();
        MultiValueMap<String, Object> bodyMap = new LinkedMultiValueMap<>();
        
        request.setId("id");
        bodyMap.add("id", request);

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(bodyMap, headers);
        
        RestTemplate template = new RestTemplate();
        return template.exchange(URL_INVOKEE, HttpMethod.POST, requestEntity, String.class);
    }
    
    @GetMapping(path = "/patch")
    public  ResponseEntity<String> test005() throws IOException {
        SampleRequest request = new SampleRequest();
        MultiValueMap<String, Object> bodyMap = new LinkedMultiValueMap<>();
        
        request.setId("id");
        bodyMap.add("id", request);

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(bodyMap, headers);

        RestTemplate template = new RestTemplate();
        
        // patchメソッド用。RestTemplateを書き換える。
        HttpComponentsClientHttpRequestFactory requestFactory =
                new HttpComponentsClientHttpRequestFactory();
        
        template.setRequestFactory(requestFactory);

        return template.exchange(URL_INVOKEE, HttpMethod.PATCH, requestEntity, String.class);
    }
}

呼び出し先

@RestController
public class InvokeeController {

    @GetMapping(path = "/invokee")
    public String get() {
        return "Getメソッド";
    }
    
    @PostMapping(path = "/invokee")
    public String post(@ModelAttribute SampleRequest req) {
        return "Postメソッド";
    }
    
    @PatchMapping(path = "/invokee")
    public String patch(@ModelAttribute SampleRequest req) {
        return "Patchメソッド";
    }
}

GitLab

gitlab.com

バッジ申請の現状を考えてみた。

既存のバッジ申請が面倒なことは、先日の記事でなんとなくお分りいただけたかと。  

  

少し整理をして絵にしてみました。  

全て手作業です。  

団ごとにバッジ数を数えて取り纏めて。  

県連盟も、在庫管理は手作業です。  

多少は手作業も必要でしょうが、そこまで手作業にする必要は無いと思います。。   

 

f:id:levia9071:20191104110844j:image

 

少しずつ、進めていければと思います。