日記帳

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

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リストあたりに軌道修正して触るのも良いかもしれない。

初めて自作PCを作った(準備編)

自作PCが作りたい。理由は今まで組み立てたことがないからというだけ。あともうそろそろ大学が始まるから、色々できなくなるので最後にやっていこうという想いもあるので。

読んだ資料

ということで経験はないけど自作PCを作っていく。そもそもどんなパーツが必要なのかわからないので、色々調べたので、書いていく。僕みたいに、何も知らない人は調べることが多くて苦労した。自作PC知るために使用した資料は以下の通り。

  • パソコン自作の教科書 (日経BPパソコンベストムック) [ WinPC ]

パソコン自作の教科書 (日経BPパソコンベストムック)

パソコン自作の教科書 (日経BPパソコンベストムック)

とりあえず評価が高そうで、初心者向けの本を買った。自作PCムック本は経験者向けに書かれていることも多く、初心者には厳しそうだったため、一番易しいやつにした。各パーツの説明や、CPUの性能比較、簡単な組み立て方など初心者にとっては知りたい情報が載っていた。また作例が載っており、どのくらいの性能のパソコンがおおよそいくらぐらいで作成できるのか参考になる。

以下は参考にしたサイト

各パーツについて知っていく

まずそれぞれのパーツについて知っていく。概要を理解するために深入りせずに広く浅く、調べたことを記載する。参考資料はほぼ「パソコン自作の教科書 (日経BPパソコンベストムック)」

CPU

パソコンの処理速度を決めるパーツ、CPUの種類としてIntelAMDのCPUがある。AMDよりもIntelの方が対応しているマザーボードが多い。性能は一概に比較できない。(ゲーミングコーナーに行くとAMDRyzen推しなのでRyzenの方がゲームするのはいいのかな)

Intelのブランド名は以下のようになっていて、上に行くほどコア数とスレッド数が高くなる。言い換えるなら性能が高くなる。

プロセッサーナンバーも大きいほど性能が高くなる。今回、最初の自作PCということAMD CPUは情報量が少ない、もしくはマザーボードが対応していないリスクも避けるためにも採用から外したため調べてはいない。(初心者は少しでも不安材料を取り除いたほうがいいかなと思った)

マザーボード

パソコンの中心部で、全てのパーツをこれに繋げる。チップセットによってIntelAMDのCPUに対応しているかわかる。チップセットには「Z390」や「H370」などに番号が振られており、どのCPUに対応しているかわかる。また、マザーボードの大きさを表すフォームファクターという規格がある。大きい順に「ATX」、「microATX」、「Mini-ITX」となっており、格納可能なPCケースが違う。

ストレージ

HDDやSSDがある。SSDの方が高速であるが高価。HDDはSSDに比べれば安くて大容量だが遅い。SSDは、大まかにSATAとM.2接続の2種類がある。M.2の方が高速で新しい。

PCケース

PCパーツを格納するケース。マザーボードフォームファクターに対応しており「ATX対応」、「microATX対応」、「Mini-ITX対応」があり、下位の大きさのものは格納できるようになっている。

電源ユニット

マザーボードやストレージに対して電源を供給する。出力Wがいくつか分かれている。目安としては以下の通りらしい。

使用するCPUやGPU 出力W
ミドルレンジCPU(Core i5など) 450~500W
上にミドルレンジグラフィックボードを追加 500~600W
上よりハイエンドCPU、ハイエンドグラフィックボード 650W~

CPUクーラー

CPUを冷却するためのファン。CPUに付属することもあるため必須ではない。CPUクーラーが付属していないCPUの場合は別途購入する必要がある。

グラフィックボード

映像関連の処理を行うボード、ゲームをしない場合は特に必要がない。PCケースによっては収まらない長さの場合もあるので、購入する場合はPCケースに入るか調べる。

OS

正確にはパーツではないが、自作PCの完成目標はOSのインストールまでなので、ここで列挙する。選択肢としてWindowsLinuxの2択になる。今回は光学ドライブは搭載しないので、USBにイメージを焼いてブートし、インストールする。

目的を決める

9月はお金を使いすぎたために、予算は6万円くらいにする。そして、今は組み立てるだけだが、将来的にはグラボを積んで、PS3くらいのグラのゲームができるようにする。色々探したけど、6万ぐらいでもゲーミングPCを作成できることを知った。

パーツを選ぶ

色々調べたが、どのパーツを組み合わせれば動くのかイマイチ飲み込めていないので、作例を色々みて自分の目的に近いものを選んで真似していくことにした。最終的には安いゲーミングPCにしたかったので、ゲーミングPCの作例からグラフィックボードを抜くことにした。

【6万円】2019年コスパ最強のゲーミング自作PC構成紹介。【最新ゲームも遊べます。】 | ごちゃごちゃ

最終的に調達したパーツは以下の通り

パーツ 商品名 値段(税込:円)
CPU intel Pentium Gold G5400 BOX 6,711
グラフィックボード なし
メモリ DDR4 SDRAM 9,280
マザーボード ASRock Intel H310チップ搭載 Micro ATX H310CM-HDV/M.2 6,625
電源 Corsair CX450M 4,885
SSD SDSSDA-240G-G26 SATA3 6Gb/s SSD PLUS SanDisk 4,480
CPUファン CPUに付属
PCケース Thermaltake Versa H26 Black /w 4,205
OS Windows 10 Education 1,595

総額 37,781円

CPUはPentiumで様子見、遅いと感じたら良いのにしてみる。メモリは、最初から16GB、8GBとそんなに値段が変わらないので、メモリぐらいはせめて良いのにしようと思いから。OSは大学で包括ライセンス契約をしているため格安で入手が可能だった。

追加で静電気対策手袋とHDMIケーブル、HDMI切替機を購入した。

Hanwha スーパースリム ハイスピード HDMIケーブル 2m 細線 Ver2.0b 8K 4K 2K対応 UMA-HDMI20T

Hanwha スーパースリム ハイスピード HDMIケーブル 2m 細線 Ver2.0b 8K 4K 2K対応 UMA-HDMI20T

ここまでの感想

初心者には自作PCは敷居が高いと思う。各パーツについて知ることが多い。このパーツは規格が色々あって、AはBに対応するけど、Cには対応していないというのを調べるのに時間がかかったり、確信が得られなかったりする。自作PCを挫折するのは、このパーツ選びのときに前提知識の多さで挫折するのではないかと思う。お金さえかければカバーできるが、PCのパーツはそんなに安いパーツはないので。いざとなったらPCショップの店員に聞くのが良さそう。

次はいざ組み立て編

irbの履歴を保存する

最近irbで簡単な式を試したりするので、その履歴を保存できるようにする。そうすることによって、どこでirbを呼び出しても後から必要になったときに見ることができる。こういうブログを書くときにも便利。

# .irbrcにhistoryのサイズを指定する
vim ~/.irbrc

.irbrc

# 1万の履歴を保存するようにする。
IRB.conf[:SAVE_HISTORY] = 10000

保存場所はデフォルトでは ~/.irb_history になる。履歴ファイルの場所は IRB.conf[:HISTORY_FILE] で変更可能。

参考資料

library irb (Ruby 2.6.0)

最近競技プログラミングしていてよく使う書き方とかメソッドとか

Rubyで競プロを解くときによく使うんだけど、よく忘れるのでメモする📝

一文字ずつ文字列を処理する

chars メソッドを使用すると配列を返す。これを each するだけで一文字ずつ比較などができる。

'abcde'.chars
=> ["a", "b", "c", "d", "e"]

標準出力を式の戻り値によって切り替える

puts に三項式を渡せば切り替えることができる。

puts rand * 10 > 5 ? 'high' : 'low'
# low

インクリメント

Ruby++ ができないので += を使用する。よく逆に書いてしまう。

num += 1

初期化した配列を作る

new の第一引数に、要素の数、第二引数に初期値を渡す。

Array.new(2,0)
=> [0, 0]

標準入力のn行を配列に入れる

これは他の方法で代用するのでいつも使用しないけどメモしておく。 while の条件を line = gets のように書いておくと標準入力の1行が line に入るので、それを Array#push してあげて追加していく。

lines = []
while line = gets
  lines.push(line.chomp)
end

0からnまでindexをアップしていく

Integer#upto を使う。 Range オブジェクトを使うより便利。でもよく忘れる。逆は downto

0.upto(2) do |i|
  p i
end

特定の文字列が入っているか確認する

正規表現を使用する。 a にdogかcatが含まれていればtrueになる。

a =~ /(dog|cat)/ 

配列を検索して、その要素の位置を取得する

指定した配列の次の要素をいじるのとかで必要になるやつ。 Array#index を使用する。

a = [1,2,3]
a.index(2)
=> 1

もっといいやつとか間違ってたら教えてください。