at backyard

Color my life with the chaos of trouble.

Beaglesの新曲Beeoを公開しました。

Beaglesの新曲BeeoをSound Cloudにアップしました。

こちらです。良かったらリンク先のSound Cloudより聴いてみてください。

はてなブログの新機能

ちなみに余談ですが、今日文章を下書き保存したときに、いつもならページ遷移して保存しました的なページになるのだけど、ページ遷移せずにボタンだけがそのまま更新されたような挙動を示した。

下記の記事を見てみたけど、これに該当する内容は記載されていなかった。
あくまで下記の文章はダイジェスト、ということなのでここには含まれていない修正もあるのかな。

staff.hatenablog.com

ちなみに下書き保存すると、Submitボタンがこんな表示になりました。

f:id:shinshin86:20200404215855p:plain

クリックしてクリップボードにコピーする機能をReactで作る

これまた下書きフォルダに入りっぱなしになっていた文章を見つけたので、整理してアウトプットする。
去年書いていたものだ。


よくある、ボタンやテキストなどをクリックしたときに、クリップボードに対象の文字が自動的にコピーされる機能。
あれをReactで実装したときの備忘録を書いていく。

react-copy-to-clipboard というライブラリを使用する

github.com

create-react-appで雛形を作成

npx create-react-app react-copy-to-clipboard-sample
cd react-copy-to-clipboard-sample
yarn start

以前のポストにも書いたが、create-react-appでブラウザが勝手に立ち上がらないようにpackage.json内のscriptsstartコマンドにBROWSER=none オプションを付けている。

    "start": "BROWSER=none react-scripts start",

react-copy-to-clipboard を使ってクリップボードにコピーする機能を実装する

インストールは下記

yarn add react-copy-to-clipboard

src/App.js 内を下記のように記述する。
CopyToClipboard をクリックした際に text の文字がクリップボードにコピーされる。また、その際に onCopy 内の記述が動く。
シンプルで使いやすいライブラリ。

import React, { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';

export default () => {
  const [text, setText] = useState('Sample Text');

  const updateText = (text) => {
    setText(text);
  };

  return (
    <div className="App">
      <input
        type="text"
        onChange={(e) => updateText(e.target.value)}
        value={text}
      />
      <div className="App-copy-area">
        <CopyToClipboard
          text={text}
          onCopy={() => alert(`クリップボードに「${text}」をコピーしました!`)}
        >
          <button>クリップボードにコピーする</button>
        </CopyToClipboard>
      </div>
    </div>
  );
};

GraphQLを学ぶのに読んでいるドキュメント

下書きフォルダに入れっぱなしにしてしまっていた記事。
この記事にも書いてあるように最近少しずつGraphQLに触れている。

最近QiitaにもGraphQL関連で一つ投稿してみた。
Apollo Serverを勉強してみたときの備忘録。
実際にDBとつなぎ合わせてGraphQL Serverを作ってみたときの話。

qiita.com

以下、過去に書いた記事となる。


最近GraphQLを少しずつ学んでいる。
今回備忘録も兼ねて、GraphQLを学ぶ上で読んでいるドキュメントをこちらに貼っていく。

GraphQL 公式ドキュメント

まずは、基本中の基本の公式ドキュメント。
基本的なことが書かれているので、これは絶対に目を通しておいたほうが良さげ。
また、各言語ごとの実装例なども書かれているので、最初の足がかりになる。

GraphQL | A query language for your API

ちなみに公式ドキュメントのIntroductionにはどういう事が書かれているかを軽くこちらに書いておく。

Introduction to GraphQL | GraphQL

  • Introduction to GraphQL

    • GraphQLの説明
      GraphQLは、APIのためのクエリ言語であり、データに定義した型システムを使用してクエリを実行するためのサーバー側ランタイム。という説明など、実際にどういうふうに書くかなどの説明書きされている。
  • Queries and Mutations

    • データの取得に用いるQueryや、データ更新(Mutations)に関する記述が書かれている。
      GraphQLを扱う上でとても基本的な部分なので、何度も読み返すようにしている。
  • Schemas and Types

    • タイトルの通り、スキーマや型についての記述。
      これも基本的な内容なので、何度も読み返す(というかどれも基本的な内容か)。
  • Validation

    • バリデーションに関する説明。
      実際にテストコードなども用意されているため、実際にどうやってテストを書いていくかなどのイメージが付きやすい。
  • Execution

    • バリデーション後、実際にQueryが実行されるときのことが書かれている。
      resolversの記述もここに書かれている。Asynchronous resolversやTrivial resolvers 、List resolversなどいくつかの種類もあるので、それぞれ理解しておきたいところ。
  • Introspection

    • 一本踏み込んだ内容が書かれている。どの型が使用できるかを問い合わせるなど、調べたいときに利用する。
  • GraphQL Best Practices

    • タイトルの通り、GraphQLを使う上でベストプラクティスと呼ばれているやり方についての解説がある(もちろんケースバイケースではあるとも書かれている)
      HTTP, JSONから始まり、VersioningPaginationなど様々な項目について書かれているので、色々と参考になる。
  • Thinking in Graphs

    • 主にGraphQLの言語そのものに関する記述や、GraphQLを用いた設計に関する記述。
  • Serving over HTTP

    • HTTPを用いた実装に関すること
  • Authorization

    • タイトルの通り、認証に関すること
  • Pagination

    • こちらもタイトルの通り、paginationについて
  • Global Object Identification

    • object識別子を公開するとかそういう話。
      ここらへんからきつくなってきた。
  • Caching

    • キャッシュに関する記述。読んどいたほうが良いはずだが、最初からここまで読む気力はなかった。。
      設計をする上では必読。

ざっくりだが、自身の読んでみたメモは以上。
Introductionだけでもこれほどのページ数があり、結構ガッツリとした内容なので、GraphQL入門時には必須なドキュメントかと感じた。

日本語の記事ならこちらも必読→「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ

むしろ最初にこちらを読んでもいいかもしれない。
日本語で書かれている、とーーーーっても分かりやすい記事。
GraphQLを使うとどういうメリットがあるか?実際に書くときはどういうふうに書けばよいか?graphql-rubyを使った実装の解説まである、よりどりみどりな内容。

「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub|若手Webエンジニアのキャリアを考える!

もっとたくさんドキュメントを貼るつもりだったが、案外この2つでお腹いっぱいになってしまったので、ここまで。
後は実際に実装しながら感覚を掴んでいきたい。
いまのところ。Apollo周りを触ってみようかと考えている。

curl、またはvimを使ってコロナウイルスの感染状況をチェックする

curlコロナウイルスの世界での感染状況を把握する

Twitterにログインしたら、下記のツイートが話題になっていた。

curlが入っていれば、これで見れるようだ。

curl https://corona-stats.online

ちなみにhelpはこれ。

curl https://corona-stats.online/help

日本の感染状況はこれでわかる

curl https://corona-stats.online/japan

vimコロナウイルスの感染状況を把握する

で、さっそく vimgo でおなじみのmattnさんが vimプラグインを作ってくれました。

github.com

さっそく自身のneovim環境(dein)にインストールしてみる。

plugins.toml に下記を記述

[[plugins]]
repo = 'mattn/vim-corona-stats'

実行は下記

:CoronaStats

f:id:shinshin86:20200330233115p:plain

志村けんのこと

www3.nhk.or.jp

このニュースは本当に驚いた。
仕事中に知ったのだが、自宅のPCの前で思わず、えっ、と声に出てしまった。
自分は世代的にちょうど子供の時期によくテレビで見ていたということもあり、これはなかなかにショックだった。
大人になってからはテレビ自体殆ど見なくなってしまったので、あまりその姿を見ることも亡くなっていたが、自分にとってはおそらく人生の中で一番見ていたコメディアンになるのではないだろうか。カトちゃんケンちゃんとか小さい頃にテレビで見ていた記憶がある。トイレの便座にカトちゃんかケンちゃんが座った途端、もう片方にお尻に槍を突き刺される、という今思い出してもめちゃくちゃ痛そうなコントの様子が何故か記憶に染み付いている。
RIP

昨晩放送の『イバラキングのごじゃっぺラジオZ』にて、B/Wとイバラッパーがコラボした新曲『稲敷ランデヴー』が先行オンエアーされました。

詳細は下記に書いたツイートの通りとなります。

ラジオでも話されていましたが、今度 B/W として イバラキングのごじゃっぺラジオZ に再びお邪魔させて頂く予定なので、そこで楽曲の制作エピソードなどはお話できたらと思います!

B/Wについては少し前に新曲も公開されているので良かったらぜひぜひ聴いてみてください。
詳細は下記にて。

b-slash-w.hateblo.jp

Beaglesの新作『In Rotten Strawberry Pie』がApple MusicやSpotifyなどの各ストリーミングサービスから配信開始されました。

Beaglesの新作『In Rotten Strawberry Pie』がApple MusicやSpotifyなどの各ストリーミングサービスから配信開始されたので、ご報告です。

ちなみに以前関連した投稿をしていたので、下記に貼っておきます。

shinshin86.hateblo.jp

ひとまずはAppleMusic, Spotify, Youtube Musicへのリンクをこちらに貼ります。
ぜひご自身で利用されているストリーミングサービスから聴いてみていただけたらと思います。

music.apple.com

In Rotten Strawberry Pie by Beagles on Spotify

Beagles - In Rotten Strawberry Pie (Youtube Music)

「Logic Pro X」の90日間無料試用版が提供予定らしい

こちらのニュースを読んで知った。

Final Cut Pro X/Logic Pro Xの90日間試用版が提供 - PC Watch

他にも、Final Cut Pro Xを90日間無料で試せるらしい。Final Cut Pro 試したことないから試したいけど、自身のPCで満足に使えるのかがちと不安。ンーでも気になる。

Final Cut Pro X - フリートライアル - Apple(日本)

Logic Pro X

10年以上Logic Proを使ってきた身としては、かなり便利なソフトなのでおすすめしたいところ。
今や内容もどんどん便利になってきており、ドラマーがいい感じのビートをどんどん繰り出してくれたり、ピッチの修正もサクッとできたりと、慣れれば様々なことができるようにもなる。
(昔はMelodyne用にヴォーカルを書き出してピッチ修正したりしていたっけ...)

もちろんソフトシンセなどの種類も豊富だし、プラグインだって標準で充実しまくりだ。
(あまり他のDTMを使い倒していないので比較はできないが、Logicは標準のプラグインもクオリティがなかなかに高い。正直標準で満足してしまっている自分がいたりする)

まあ、そんなこんなで初心者からプロユースまで幅広く人に勧められるソフトだと思うので、興味ある方は90日間お試しが始まったらぜひぜひ使ってみるといいかもと思った次第。

Logic Pro X - Apple(日本)