日記帳

プログラミングのことをつぶやく日記です。

WSL2でUbuntuを立ち上げたら0x800701bcのエラーコードが出た。

WSL2を導入したけど、Ubuntuの立ち上げの時に下記のエラーが出て立ち上がらなかった。エラーメッセージは文字化けしているがWSL2のアップデートをしてくれと書いてあった。

WslRegisterDistribution failed with error: 0x800701bc

下記のコマンドをPoserShellで実行したら、立ち上がるようになった。

wsl --update

参考にした記事

kledgeb.blogspot.com

友人の通夜に参加した

最近日記をつけていなかったけど、印象的な出来事だったので日記をつける。

昨日は高校時代の友人の通夜に参加した。まさか30歳で同級生が亡くなるとは思っていなかったので結構ショックだった。その知らせは先週の金曜日に同級生からの電話で知った。死因は自殺で、前日まで普通に飲み会に参加していたらしい。友人といってもそこまで親しいわけではなく高校卒業してからほとんど会ってないし、直近5年は一度も会っていない。それでも多少思うところはあった。10年以上前の記憶では、とても自ら命を断つようなイメージを持てない印象だったが、やっぱりコロナ禍だと色々なものが変わっていくと実感した日だった。葬式は生きている人へ向けての儀式と聞いたことがあったが、やっぱり気持ちを整理したり、みんなで話したりすることも大事でありその通りだと思う。通夜もこんな感染症が蔓延している状況だとなかなかやりづらいと思う。密にならないように対策を施してあるけど、どうしても部分的に密な場面もあるので大変だとは思った。早く状況が好転してほしい。あとみんな長生きしてくれ!

ps.

香典返しのギフトカタログにRGデスティニーガンダムとRGシャアザクがあって、シャアザクはともかくとして何故もっと人気でプラモの値段が同じくらいのMSがあるのでは(ストフリ、ダブルオー、ユニコーンetc..)も思ったが、せっかくなのでデスティニーガンダムを選択した。

f:id:leokun0210:20201126204541j:plain

Processing で星を作る

Processing で星を作る

f:id:leokun0210:20200523224452p:plain

上記のような星をProcessingで描画します。Processingは初心者です。

コード

size(60, 60);
background(255);
noStroke();
fill(152, 251, 152);
int b;

int a[] = {1,4,2,5,3};

beginShape();
for (int i = 0; i < 5; i++) {
  b = a[i] - 1;
  float x = 30 * cos(2 * PI * b / 5 + PI / 2) + 30;
  float y = 30 * sin(2 * PI * b / 5 - PI / 2) + 30;
  vertex(x, y);
}
endShape();

Y軸は、下に行くほど増加するので、正負を逆にして考える必要があります。

参考

Drawing stars / Processing で星形(5芒星)を描く

AngularでTwitterの自分のツイートのみが表示されるサンプルアプリを作ろうとした

AngularでTwitterの自分のツイートのみが表示されるサンプルアプリを作ろうとした

Angularの勉強としてTwitter APIを実行して、自分のツイートだけを並べられるサンプルアプリを作成しようとした。結果としては、Twitter APIのCORS制約に引っかかってうまくいかなかった。しかし、学びが多いと思ったのでメモを残すことにする。

目的

  • Angularのチュートリアルから外れて、色々試してみたかった
  • HttpClientモジュールの使い方がよくわかってなかったので試してみたかった

セットアップ

基本的にはAngularチュートリアルを踏襲する形で進めていった。以下リンクは各作業の参考資料として扱う。

ng new twitter-board

Angular 日本語ドキュメンテーション - 新規プロジェクトの作成

コンポーネントとサービスを作成した

最初にツイートのコンポーネントを作成した。

ng generate component tweets 

Angular 日本語ドキュメンテーション - ヒーローエディター

次にcomponent.htmlを変更してリスト表示できるようにした。

Angular 日本語ドキュメンテーション - 選択リストを表示する

APIと疎通するためにサービスを作った。

ng generate service tweets d

Angular 日本語ドキュメンテーション - サービスの追加

Twittter APIを試した

Twitter APIの使用方法を知らないので、ドキュメントを見ながらcurlコマンドで試した。今現在は、Twitter APIを使用するために、申請とか面倒な手順が必要なのでが、幸い過去に認証のためにTwitter APIを使用したことがあり、キー情報が残っていた。したがって、それを再利用した。

OAuth認証

JSON形式で、access_tokenが返ってくる。

curl --request 'POST' 'https://api.twitter.com/oauth2/token' --header 'Authorization: Basic [API keyとAPI secret keyを「:」で繋いでBase64エンコードした文字列]' --header 'Content-Type: application/x-www-form-urlencoded;charset=UTF-8' --data "grant_type=client_credentials" --verbose

Twitter APIのOAuthToken取得方法 - Qiita

ツイートの取得

先ほどのaccess_tokenを使用して、僕のアカウントの最新20件のツイートを取得した。

curl -H "Authorization: Bearer [access_token]" "https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ryuchan_00&count=20" | jq

Twitter APIで使うBearer Tokenの取得方法 - Qiita

GET statuses/user_timeline — Twitter Developers

これでAPIの使用方法は、おおよそ把握したことにした。

API KEYの保持を考えた

今回はサーバーサイドを実装する気は無いので、API KEYの保持方法は、 envrionment.local.ts を作成して、コミットしないようにした。この時他の環境にも apikey を追加しないとエラーになるので注意する。

export const environment = {
    production: false,
    apikey: 'hoge'
};

angular.jsonにてlocalが環境として指定された時の環境設定ファイルの読込先を書いた。

          "configurations": {
...
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
...
        "serve": {
...
          "configurations": {
...
            "local": {
              "browserTarget": "twitter-board:build:local"
            }

これでng serveするときに -c オプションにてlocalを指定するとローカル環境として設定した項目が読まれる。

ng serve -c local 

Angularで環境変数を使用する | nobu blog

Angular 日本語ドキュメンテーション - Angularアプリのビルドとサーブ

AngularアプリケーションからTwitter APIを利用しようとした

HttpClientを使用してTwitte APIとの疎通を行った。

src/app/app.module.ts

import { HttpClientModule }    from '@angular/common/http';
...
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],

src/app/tweet.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
...
export class TweetService {
  private twitterUrl = 'https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ryuchan_00&count=20'

  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'Bearer ' + environment.apikey,
    })
  };

  constructor(private http: HttpClient) { }

  getTweets(): Observable<Tweet[]> {
    return this.http.get<Tweet[]>(this.twitterUrl, this.httpOptions)
  }
}

ブラウザで確認した結果として以下のメッセージが表示され、Twwitter APIはあなたのドメインに対しては、リソースの使用を許可していませんよとエラーメッセージが表示された。

Access to XMLHttpRequest at 'https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=ryuchan_00&count=20' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Angular 日本語ドキュメンテーション - HttpClient

リポジトリ

ryuchan00/twitter-board: test angular application

次にどうするか

外部のAPIとの疎通を確認したかったのだが、使用したAPIが悪かった。とりあえずTODOリストあたりに軌道修正して触るのも良いかもしれない。