電通総研 の技術ブログ
全833件
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/22いってみようか。 NFTラッシュ その他のニュース NFTラッシュ NFTプロジェクトのニュースがラッシュですね。BAYC(Bored Ape Yacht Club)ベースのアニメが映画で全3部作とか、嫌な予感しかしませんね。失敗してもNFTのせいにされませんように。 米コインベース、人気NFT「BAYC」のアニメ映画製作へ 米 メジャーリーグ ( MLB )のNFTが販売されます。 これは、 NBA Top Shotの柳の下のどじょうを狙ったものですが、どうなるか要注目。 NBA Top Shot自体、2021年の8月以降、下降線です。 米メジャーリーグ今季NFT、キャンディデジタルで発売 WWE （World Wrestling Entertainment, Inc.）も同じスキーム。 WWEがNFT事業展開へ 日本でもIPのNFT化が進んでますね。ただ、IPがNFTになって本当に意味があるのかはみんな考える必要があると思います。単に売れればOKは良くない。 「LINE NFT」 吉本、パトレイバーなど限定NFT動画、約4万点を順次販売 パティ・ボイドの写真のNFTは、買う人いそうな気はする。雑談ですが、 テイラー・スウィフト はパティ・ボイドのファンらしいです。顔がちょっと似てるよね。 ビートルズの「女神」パティ・ボイド、NFTで革命を再び 時代のミューズとともに：テイラー・スウィフトが憧れのパティ・ボイドと対談 きゃりー君もか。 きゃりーぱみゅぱみゅ、米国の音楽祭でメタバースNFTとコラボ 浜崎あゆみ とピコ太郎もですか。だんだん疲れてきた。 浜崎あゆみ、ピコ太郎がNFT・メタバースに──エイベックスがThe Sandboxに「エイベックスランド」構想 その他のニュース 観光特化デジタル通貨「ルーラコイン」、3エリアで実証成功--平均消費単価1万4900円 「アバランチ」開発のアバラボ、3.5億ドルの調達に動く－関係者 歩いてトークン稼ぐSTEPN、プレーに必要なNFTスニーカーが高騰──1足最低14万円 高すぎNFTは、NFTに価値を認めているんじゃなくて、転売目的な気がして好きになれない。本当に価値を認めて買っている人もいると思いますが。 執筆： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/22いってみようか。 NFTラッシュ その他のニュース NFTラッシュ NFTプロジェクトのニュースがラッシュですね。BAYC(Bored Ape Yacht Club)ベースのアニメが映画で全3部作とか、嫌な予感しかしませんね。失敗してもNFTのせいにされませんように。 米コインベース、人気NFT「BAYC」のアニメ映画製作へ 米 メジャーリーグ ( MLB )のNFTが販売されます。 これは、 NBA Top Shotの柳の下のどじょうを狙ったものですが、どうなるか要注目。 NBA Top Shot自体、2021年の8月以降、下降線です。 米メジャーリーグ今季NFT、キャンディデジタルで発売 WWE （World Wrestling Entertainment, Inc.）も同じスキーム。 WWEがNFT事業展開へ 日本でもIPのNFT化が進んでますね。ただ、IPがNFTになって本当に意味があるのかはみんな考える必要があると思います。単に売れればOKは良くない。 「LINE NFT」 吉本、パトレイバーなど限定NFT動画、約4万点を順次販売 パティ・ボイドの写真のNFTは、買う人いそうな気はする。雑談ですが、 テイラー・スウィフト はパティ・ボイドのファンらしいです。顔がちょっと似てるよね。 ビートルズの「女神」パティ・ボイド、NFTで革命を再び 時代のミューズとともに：テイラー・スウィフトが憧れのパティ・ボイドと対談 きゃりー君もか。 きゃりーぱみゅぱみゅ、米国の音楽祭でメタバースNFTとコラボ 浜崎あゆみ とピコ太郎もですか。だんだん疲れてきた。 浜崎あゆみ、ピコ太郎がNFT・メタバースに──エイベックスがThe Sandboxに「エイベックスランド」構想 その他のニュース 観光特化デジタル通貨「ルーラコイン」、3エリアで実証成功--平均消費単価1万4900円 「アバランチ」開発のアバラボ、3.5億ドルの調達に動く－関係者 歩いてトークン稼ぐSTEPN、プレーに必要なNFTスニーカーが高騰──1足最低14万円 高すぎNFTは、NFTに価値を認めているんじゃなくて、転売目的な気がして好きになれない。本当に価値を認めて買っている人もいると思いますが。 執筆： @higa （ Shodo で執筆されました ）
Salesforce で承認ワークフローシステムを構築しているまたはしようと思っている皆様、ワークフロー要件が複雑なために Salesforce の承認プロセス等の標準機能では構築できず、専用のワークフローツールを使用していませんか？ Spring22のアップデートで、 Salesforce の機能を利用して高度な承認ワークフローを構築できるようになりました。 今回は、その新機能である『Flow Orchestrator』と既存機能を組み合わせることでどんなことができるのかを紹介します。 1. なぜ、今まで Salesforce で複雑な承認ワークフローを作成できなかったのか？ 1-1. ワークフローシステムツールでよくある機能 承認ワークフローを構築する際、以下のような要件を思い浮かべる方が多いと思います。 ・申請内容によって承認の流れを分岐する機能 ・承認者の複数設定や代理承認者を設定する機能 ・承認状況をリアルタイムに確認でき、承認時のコメントを受信する機能 しかし、これらの機能を組み合わせ、複雑な業務要件を満たす承認ワークフローを Salesforce で実現することは困難でした。 1-2. なぜ、今までは Salesforce で複雑な承認ワークフローを実現できなかったのか？ 日本は特に、承認ワークフローが複雑だと言われています。例えば、最終承認者に到達するまでの段階の多さが特徴としてあげられます。また、申請金額の大小により、承認の段階の数が変わることもあるでしょう。 もともと、 Salesforce には承認プロセスという簡単なワークフローを作成できる機能が用意されています。しかし、承認プロセスでは、承認時はコメント以外入力できなかったり、複雑な承認者の設定ができなかったりと制限がありました。そのため、複雑なワークフローの構築は専用のワークフローツールを使用するしかなかったのです。 2. 『Flow Orchestrator』の概要 『Flow Orchestrator』とは、Spring22で正式リリースされた複雑なワークフローを作成できる Salesforce のローコード開発ツールです。 この新機能と Salesforce の既存機能を組み合わせることで、例えば、以下を実現できます。 ・金額等の条件によりフローを分岐できる機能 ・ Salesforce 上からリアルタイムで承認状況を確認できる機能 ・承認時の入力項目を自由にカスタマイズできる機能 ・ユーザ/グループ単位の割り当て・手動割り当て・代理承認者割り当てができる機能 ・申請者/承認者に通知する機能 ・複数のユーザが並行して承認する機能 今回、これらの機能を取り込んだ承認ワークフローシステムを実装してみました。 3. 簡単な承認ワークフローシステムを実装してみた 3-1. 承認フロー図 今回は下図のようなフローを想定し作成してみました。 この後のGIFでは、フロー図の赤線の流れをお見せします。 3-2. 実際の承認の流れ ※今回はDeveloper環境のため、ユーザを使い回しています。ユーザの氏名に役職を記載しています。 ①申請者は交通費(250,000円)を申請する ②グループ長は長期休暇中のため、グループ長代理が承認する 次承認者(部長)を手動で選択する ③部長が承認する 次承認者(事業部長)は手動で選択する ※ 事業部長・社長に並行して承認依頼されていることが確認できる ④事業部長が承認する ⑤社長が承認する ⑥事業部長・社長が承認を終えたので、 経理 担当者が決済をする 以上の通り、実装しました。 4. まとめ Salesforce の機能でも日本の複雑な承認ワークフローシステムを実現できることを理解していただけたでしょうか？ 承認ワークフローシステムを Salesforce 上で構築するメリットとしては、 Salesforce 上で全ての情報を参照できることだと考えております。メール通知はもちろん、Chatter通知も可能です。また、レコードの詳細画面にパス(ステータス)を設定することで、承認状況をリアルタイムに表示できます。 今回の記事には書かれていない皆様の会社特有のワークフロー機能も実現できるかもしれません。 ぜひ、 Salesforce でワークフローシステムを構築する際は、『Flow Orchestrator』の利用を検討してみてください！ 5. 構築の際に参考になる Salesforce 公式サイト ＊ Salesforce Spring'22 リリースノート | オーケストレータ (正式リリース) ＊ Trailblazer Community のグループ | Orchestrator ＊ TrailheaDX | Flow and Orchestrator (1) ＊ TrailheaDX | Flow and Orchestrator (2) 執筆： @kitakado.maho 、レビュー： @kumakura.koki.isid （ Shodo で執筆されました ）
Salesforce で承認ワークフローシステムを構築しているまたはしようと思っている皆様、ワークフロー要件が複雑なために Salesforce の承認プロセス等の標準機能では構築できず、専用のワークフローツールを使用していませんか？ Spring22のアップデートで、 Salesforce の機能を利用して高度な承認ワークフローを構築できるようになりました。 今回は、その新機能である『Flow Orchestrator』と既存機能を組み合わせることでどんなことができるのかを紹介します。 1. なぜ、今まで Salesforce で複雑な承認ワークフローを作成できなかったのか？ 1-1. ワークフローシステムツールでよくある機能 承認ワークフローを構築する際、以下のような要件を思い浮かべる方が多いと思います。 ・申請内容によって承認の流れを分岐する機能 ・承認者の複数設定や代理承認者を設定する機能 ・承認状況をリアルタイムに確認でき、承認時のコメントを受信する機能 しかし、これらの機能を組み合わせ、複雑な業務要件を満たす承認ワークフローを Salesforce で実現することは困難でした。 1-2. なぜ、今までは Salesforce で複雑な承認ワークフローを実現できなかったのか？ 日本は特に、承認ワークフローが複雑だと言われています。例えば、最終承認者に到達するまでの段階の多さが特徴としてあげられます。また、申請金額の大小により、承認の段階の数が変わることもあるでしょう。 もともと、 Salesforce には承認プロセスという簡単なワークフローを作成できる機能が用意されています。しかし、承認プロセスでは、承認時はコメント以外入力できなかったり、複雑な承認者の設定ができなかったりと制限がありました。そのため、複雑なワークフローの構築は専用のワークフローツールを使用するしかなかったのです。 2. 『Flow Orchestrator』の概要 『Flow Orchestrator』とは、Spring22で正式リリースされた複雑なワークフローを作成できる Salesforce のローコード開発ツールです。 この新機能と Salesforce の既存機能を組み合わせることで、例えば、以下を実現できます。 ・金額等の条件によりフローを分岐できる機能 ・ Salesforce 上からリアルタイムで承認状況を確認できる機能 ・承認時の入力項目を自由にカスタマイズできる機能 ・ユーザ/グループ単位の割り当て・手動割り当て・代理承認者割り当てができる機能 ・申請者/承認者に通知する機能 ・複数のユーザが並行して承認する機能 今回、これらの機能を取り込んだ承認ワークフローシステムを実装してみました。 3. 簡単な承認ワークフローシステムを実装してみた 3-1. 承認フロー図 今回は下図のようなフローを想定し作成してみました。 この後のGIFでは、フロー図の赤線の流れをお見せします。 3-2. 実際の承認の流れ ※今回はDeveloper環境のため、ユーザを使い回しています。ユーザの氏名に役職を記載しています。 ①申請者は交通費(250,000円)を申請する ②グループ長は長期休暇中のため、グループ長代理が承認する 次承認者(部長)を手動で選択する ③部長が承認する 次承認者(事業部長)は手動で選択する ※ 事業部長・社長に並行して承認依頼されていることが確認できる ④事業部長が承認する ⑤社長が承認する ⑥事業部長・社長が承認を終えたので、 経理 担当者が決済をする 以上の通り、実装しました。 4. まとめ Salesforce の機能でも日本の複雑な承認ワークフローシステムを実現できることを理解していただけたでしょうか？ 承認ワークフローシステムを Salesforce 上で構築するメリットとしては、 Salesforce 上で全ての情報を参照できることだと考えております。メール通知はもちろん、Chatter通知も可能です。また、レコードの詳細画面にパス(ステータス)を設定することで、承認状況をリアルタイムに表示できます。 今回の記事には書かれていない皆様の会社特有のワークフロー機能も実現できるかもしれません。 ぜひ、 Salesforce でワークフローシステムを構築する際は、『Flow Orchestrator』の利用を検討してみてください！ 5. 構築の際に参考になる Salesforce 公式サイト ＊ Salesforce Spring'22 リリースノート | オーケストレータ (正式リリース) ＊ Trailblazer Community のグループ | Orchestrator ＊ TrailheaDX | Flow and Orchestrator (1) ＊ TrailheaDX | Flow and Orchestrator (2) 執筆： @kitakado.maho 、レビュー： @kumakura.koki.isid （ Shodo で執筆されました ）
こんにちは。X（クロス） イノベーション 本部 クラウド イノベーション センターの柴田です。本記事ではTeleportを使って Kubernetes クラスタ へアクセスする際の再認証方式を設定する方法を紹介します。 Teleportとは 前提条件 Teleportを使ってGitHub SSOでKubernetesクラスタへアクセスする 再認証時の認証方式を指定する 再認証時はデフォルトの認証方式が使用される 原因 再認証時の認証方式を指定する おわりに 参考 Teleportとは Teleport はGravitational社が開発するソフトウェアです。 OSS 版、Enterprise版、Cloud版の3種類が存在します。 Teleportはざっくりいうと高機能かつ現代的な踏み台サーバです。 SSH サーバ、データベース、 Kubernetes クラスタ などへアクセスする際の踏み台として機能します。また シングルサインオン やセッションレコードの記録などの機能も提供します。 例えば以下の表は Amazon EKS クラスタ へアクセスする際にTeleportを使う場合と使わない場合を比較したものです。 AWS にも AWS Systems Manager Session Manager などの機能があります。一方で Amazon EKS上のコンテナへ kubectl exec でログインした際のセッションレコードを記録したい場合などはTeleportが必要になります。 Teleportを使わずに Amazon EKS クラスタ へアクセスする Teleportを使って Amazon EKS クラスタ へアクセスする 認証方法 IAM user、IAM role ローカルユーザー、 GitHub OAuth（Enterprise版は Google OAuth、OIDC、 SAML にも対応） ノードへのログイン AWS Systems Manager Session Managerでログインできる。セッションレコードはCloudWatch Logs、S3へ記録される。 できる。セッションレコードはS3へ記録される。 コンテナへのログイン kubectl exec でログインできる。セッションレコードは記録されない。 kubectl exec でログインできる。セッションレコードはS3へ記録される。 kube-apiserveへの アクセスログ の記録 コントロールプレーンのログ記録 を有効化することでCloudWatch Logsへ記録される DynamoDBへ記録される セッションレコードの形式 AWS Systems Manager Session Managerのセッションレコードはテキスト形式で記録される。 エス ケープシーケンスもテキストとして記録されており、若干見づらい。テキスト検索はできるが、動画として再生はできない。 独自形式で記録される。TeleportのWeb UIや tsh play コマンドで動画として再生できる。テキスト検索はできない。 運用の手間 踏み台サーバの運用は不要 1 Teleport クラスタ の運用が必要 このように便利なTeleportですが、実際に使ってみたところ、 Kubernetes クラスタ へアクセスする際の再認証方式の設定に少しハマりどころがありました。本記事ではそれを紹介します。 前提条件 本記事では以下の環境を使用します。 Amazon EKS v1.21 Teleport v9.0.1 Teleport クラスタ は 公式ドキュメント に従って既にEKS クラスタ 上へ構築されているものとします。 以降では例として以下の値を使用します。実際には各自の環境に置き換えてください。 名前 サンプル値 Teleport クラスタ のURL teleport.example.com GitHub アカウント名 octocat Teleportを使って GitHub SSOで Kubernetes クラスタ へアクセスする Teleportを使って GitHub SSOで Kubernetes クラスタ へアクセスする際は、まず以下のコマンドを実行します。 tsh はTeleportの CLI ツールで Teleport Downloads からダウンロードできます。 # Teleportクラスタへログインする $ tsh login --proxy teleport.example.com --auth github --user octocat # 必要な設定をkubeconfigファイルへ書き込む $ tsh kube login teleport.example.com kubeconfigファイルへ新しくcontextが追加されるので、これを使ってTeleport経由で Kubernetes クラスタ へアクセスできます。 $ kubectl config current-context teleport.example.com-teleport.example.com $ kubectl get pods No resources found in default namespace. 再認証時の認証方式を指定する 再認証時はデフォルトの認証方式が使用される Teleport クラスタ の認証情報には有効期限があります。有効期限を過ぎてから Kubernetes クラスタ へアクセスしようとすると、再認証を要求されます。 しかし実際にやってみると、初回認証時の認証方式（ GitHub SSO）ではなく、デフォルトの認証方式（Teleportに登録されたローカルユーザーのパスワード認証）が要求されます。 $ kubectl get pods Enter password for Teleport user octocat: これでは GitHub SSOによる再認証ができずに困ってしまいます。 原因 なぜそうなるのか調べてみましょう。kubeconfigファイル（デフォルトでは $HOME/.kube/config ）の users を見てみます。 users : - name : teleport.example.com-teleport.example.com user : exec : apiVersion : client.authentication.k8s.io/v1beta1 args : - kube - credentials - --kube-cluster=teleport.example.com - --teleport-cluster=teleport.example.com - --proxy=teleport.example.com command : /usr/local/bin/tsh interactiveMode : IfAvailable provideClusterInfo : false kubectl は client-goクレデンシャルプラグイン の仕組みを使って tsh kube credentials コマンドからユーザーの認証情報を受け取ります。Teleport クラスタ の認証情報の有効期限が切れている場合、このコマンドはTeleport クラスタ への再ログインを試みます。デフォルトの認証方式が要求されたのは、このコマンドに auth などが指定されていないためです。 再認証時の認証方式を指定する tsh kube credentials コマンドに適切な認証方式を指定することでこの問題を解決できます。今回は 環境変数 経由で認証方式を設定します。なお tsh コマンドが参照する 環境変数 の一覧は Teleport CLI Reference を参照してください。 以下のコマンドを実行します。 kubectl config set-credentials teleport.example.com-teleport.example.com --exec-env=TELEPORT_AUTH=github kubectl config set-credentials teleport.example.com-teleport.example.com --exec-env=TELEPORT_USER=octocat するとkubeconfigファイルが以下のとおり更新されます。 users : - name : teleport.example.com-teleport.example.com user : exec : apiVersion : client.authentication.k8s.io/v1beta1 args : - kube - credentials - --kube-cluster=teleport.example.com - --teleport-cluster=teleport.example.com - --proxy=teleport.example.com command : /usr/local/bin/tsh env : - name : TELEPORT_AUTH value : github - name : TELEPORT_USER value : octocat interactiveMode : IfAvailable provideClusterInfo : false これにより、Teleport クラスタ の認証情報の有効期限が切れた後、 GitHub SSOによる再認証が要求されるようになりました。 おわりに 本記事ではTeleportを使って Kubernetes クラスタ へアクセスする際の再認証方式を設定する方法を紹介しました。この記事が皆様のお役に立てば幸いです。 参考 Introduction to Teleport | Teleport Docs TeleportでKubernetesクラスタへのユーザーアクセスを管理する - Cybozu Inside Out | サイボウズエンジニアのブログ 執筆： @shibata.takao 、レビュー： @higa （ Shodo で執筆されました ） コン トロール プレーンのエンドポイントのパブリックアクセスが有効になっているものとします。 ↩
こんにちは。X（クロス） イノベーション 本部 クラウド イノベーション センターの柴田です。本記事ではTeleportを使って Kubernetes クラスタ へアクセスする際の再認証方式を設定する方法を紹介します。 Teleportとは 前提条件 Teleportを使ってGitHub SSOでKubernetesクラスタへアクセスする 再認証時の認証方式を指定する 再認証時はデフォルトの認証方式が使用される 原因 再認証時の認証方式を指定する おわりに 参考 Teleportとは Teleport はGravitational社が開発するソフトウェアです。 OSS 版、Enterprise版、Cloud版の3種類が存在します。 Teleportはざっくりいうと高機能かつ現代的な踏み台サーバです。 SSH サーバ、データベース、 Kubernetes クラスタ などへアクセスする際の踏み台として機能します。また シングルサインオン やセッションレコードの記録などの機能も提供します。 例えば以下の表は Amazon EKS クラスタ へアクセスする際にTeleportを使う場合と使わない場合を比較したものです。 AWS にも AWS Systems Manager Session Manager などの機能があります。一方で Amazon EKS上のコンテナへ kubectl exec でログインした際のセッションレコードを記録したい場合などはTeleportが必要になります。 Teleportを使わずに Amazon EKS クラスタ へアクセスする Teleportを使って Amazon EKS クラスタ へアクセスする 認証方法 IAM user、IAM role ローカルユーザー、 GitHub OAuth（Enterprise版は Google OAuth、OIDC、 SAML にも対応） ノードへのログイン AWS Systems Manager Session Managerでログインできる。セッションレコードはCloudWatch Logs、S3へ記録される。 できる。セッションレコードはS3へ記録される。 コンテナへのログイン kubectl exec でログインできる。セッションレコードは記録されない。 kubectl exec でログインできる。セッションレコードはS3へ記録される。 kube-apiserveへの アクセスログ の記録 コントロールプレーンのログ記録 を有効化することでCloudWatch Logsへ記録される DynamoDBへ記録される セッションレコードの形式 AWS Systems Manager Session Managerのセッションレコードはテキスト形式で記録される。 エス ケープシーケンスもテキストとして記録されており、若干見づらい。テキスト検索はできるが、動画として再生はできない。 独自形式で記録される。TeleportのWeb UIや tsh play コマンドで動画として再生できる。テキスト検索はできない。 運用の手間 踏み台サーバの運用は不要 1 Teleport クラスタ の運用が必要 このように便利なTeleportですが、実際に使ってみたところ、 Kubernetes クラスタ へアクセスする際の再認証方式の設定に少しハマりどころがありました。本記事ではそれを紹介します。 前提条件 本記事では以下の環境を使用します。 Amazon EKS v1.21 Teleport v9.0.1 Teleport クラスタ は 公式ドキュメント に従って既にEKS クラスタ 上へ構築されているものとします。 以降では例として以下の値を使用します。実際には各自の環境に置き換えてください。 名前 サンプル値 Teleport クラスタ のURL teleport.example.com GitHub アカウント名 octocat Teleportを使って GitHub SSOで Kubernetes クラスタ へアクセスする Teleportを使って GitHub SSOで Kubernetes クラスタ へアクセスする際は、まず以下のコマンドを実行します。 tsh はTeleportの CLI ツールで Teleport Downloads からダウンロードできます。 # Teleportクラスタへログインする $ tsh login --proxy teleport.example.com --auth github --user octocat # 必要な設定をkubeconfigファイルへ書き込む $ tsh kube login teleport.example.com kubeconfigファイルへ新しくcontextが追加されるので、これを使ってTeleport経由で Kubernetes クラスタ へアクセスできます。 $ kubectl config current-context teleport.example.com-teleport.example.com $ kubectl get pods No resources found in default namespace. 再認証時の認証方式を指定する 再認証時はデフォルトの認証方式が使用される Teleport クラスタ の認証情報には有効期限があります。有効期限を過ぎてから Kubernetes クラスタ へアクセスしようとすると、再認証を要求されます。 しかし実際にやってみると、初回認証時の認証方式（ GitHub SSO）ではなく、デフォルトの認証方式（Teleportに登録されたローカルユーザーのパスワード認証）が要求されます。 $ kubectl get pods Enter password for Teleport user octocat: これでは GitHub SSOによる再認証ができずに困ってしまいます。 原因 なぜそうなるのか調べてみましょう。kubeconfigファイル（デフォルトでは $HOME/.kube/config ）の users を見てみます。 users : - name : teleport.example.com-teleport.example.com user : exec : apiVersion : client.authentication.k8s.io/v1beta1 args : - kube - credentials - --kube-cluster=teleport.example.com - --teleport-cluster=teleport.example.com - --proxy=teleport.example.com command : /usr/local/bin/tsh interactiveMode : IfAvailable provideClusterInfo : false kubectl は client-goクレデンシャルプラグイン の仕組みを使って tsh kube credentials コマンドからユーザーの認証情報を受け取ります。Teleport クラスタ の認証情報の有効期限が切れている場合、このコマンドはTeleport クラスタ への再ログインを試みます。デフォルトの認証方式が要求されたのは、このコマンドに auth などが指定されていないためです。 再認証時の認証方式を指定する tsh kube credentials コマンドに適切な認証方式を指定することでこの問題を解決できます。今回は 環境変数 経由で認証方式を設定します。なお tsh コマンドが参照する 環境変数 の一覧は Teleport CLI Reference を参照してください。 以下のコマンドを実行します。 kubectl config set-credentials teleport.example.com-teleport.example.com --exec-env=TELEPORT_AUTH=github kubectl config set-credentials teleport.example.com-teleport.example.com --exec-env=TELEPORT_USER=octocat するとkubeconfigファイルが以下のとおり更新されます。 users : - name : teleport.example.com-teleport.example.com user : exec : apiVersion : client.authentication.k8s.io/v1beta1 args : - kube - credentials - --kube-cluster=teleport.example.com - --teleport-cluster=teleport.example.com - --proxy=teleport.example.com command : /usr/local/bin/tsh env : - name : TELEPORT_AUTH value : github - name : TELEPORT_USER value : octocat interactiveMode : IfAvailable provideClusterInfo : false これにより、Teleport クラスタ の認証情報の有効期限が切れた後、 GitHub SSOによる再認証が要求されるようになりました。 おわりに 本記事ではTeleportを使って Kubernetes クラスタ へアクセスする際の再認証方式を設定する方法を紹介しました。この記事が皆様のお役に立てば幸いです。 参考 Introduction to Teleport | Teleport Docs TeleportでKubernetesクラスタへのユーザーアクセスを管理する - Cybozu Inside Out | サイボウズエンジニアのブログ 執筆： @shibata.takao 、レビュー： @higa （ Shodo で執筆されました ） コン トロール プレーンのエンドポイントのパブリックアクセスが有効になっているものとします。 ↩
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/12いってみようか。 エンタメの最新アイテムはNFT その他のニュース エンタメの最新アイテムはNFT 先週、 NFTが身近に という記事を書いたんですが、さらにそれが進んでエンタメ化されてきました。 ロスで開かれたNFTイベントがカオスだった理由：現地レポート ハリウッドセレブの登場です。これは、NFTバブルが続くことを期待している人たちがかなりいることを示していると思います。 グラミー賞とNFTの夜：現地レポート 音楽アーティストもNFT。アーティストはNFTバブルに浮かれている人たちだけでなく、まじめにNFTに取り組んでいる人もそれなりにいると思ってますが、 グラミー賞 の夜だと派手な感じにはどうしてもなっちゃいますね。 エンタメ業界は、タレントの人気をお金に変えるビジネスだと思っているので、一連の動きは全く違和感ないのですが、NFTがボロクソに言われる日が来なければいいなと個人的には思っています。NFTはテク ノロ ジー の一つで、良い/悪いという存在ではないので。 その他のニュース マイクロソフトが「Web3」投資を加速。ブロックチェーン企業への投資や人材拡充へ スターバックス、年内にNFTビジネス参入 アニモカと韓国CUBE合弁会社、K-POPアーティスト動画NFTをエアドロップへ パンクがNFTでアーティストの経済的自立を可能にする【コラム】 人気メタバース、ユーザー数が伸びず──市場の期待を下回る 100億ドルのビットコイン購入を進めるLFG、週末に1億7000万ドル相当を購入──TerraUSDの裏付け資産として 執筆： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/12いってみようか。 エンタメの最新アイテムはNFT その他のニュース エンタメの最新アイテムはNFT 先週、 NFTが身近に という記事を書いたんですが、さらにそれが進んでエンタメ化されてきました。 ロスで開かれたNFTイベントがカオスだった理由：現地レポート ハリウッドセレブの登場です。これは、NFTバブルが続くことを期待している人たちがかなりいることを示していると思います。 グラミー賞とNFTの夜：現地レポート 音楽アーティストもNFT。アーティストはNFTバブルに浮かれている人たちだけでなく、まじめにNFTに取り組んでいる人もそれなりにいると思ってますが、 グラミー賞 の夜だと派手な感じにはどうしてもなっちゃいますね。 エンタメ業界は、タレントの人気をお金に変えるビジネスだと思っているので、一連の動きは全く違和感ないのですが、NFTがボロクソに言われる日が来なければいいなと個人的には思っています。NFTはテク ノロ ジー の一つで、良い/悪いという存在ではないので。 その他のニュース マイクロソフトが「Web3」投資を加速。ブロックチェーン企業への投資や人材拡充へ スターバックス、年内にNFTビジネス参入 アニモカと韓国CUBE合弁会社、K-POPアーティスト動画NFTをエアドロップへ パンクがNFTでアーティストの経済的自立を可能にする【コラム】 人気メタバース、ユーザー数が伸びず──市場の期待を下回る 100億ドルのビットコイン購入を進めるLFG、週末に1億7000万ドル相当を購入──TerraUSDの裏付け資産として 執筆： @higa （ Shodo で執筆されました ）
はいどーもー！ X イノベーション 本部の宮澤響です！ 本記事では、株式会社 電通国際情報サービス （以下、ISID）の社内ラジオであるTecHuman.fmと、そこでのコンテンツ制作に利用しているサービスについて、簡単にご紹介します！ TecHuman.fmって何？ コンテンツ制作に利用しているサービス Miro Zoom Audacity Figma AviUtil Microsoft Stream Microsoft SharePoint まとめ TecHuman.fmって何？ TecHuman.fmとは、ISIDのビジョンである「HUMANOLOGY for the future」に照らし、ISIDの最大の強みである人（Human）と技術（Technology）の両観点をもって、インプットを得ること、学び合うことをテーマに制作している社内ラジオです。 忙しい方でも業務の隙間時間などに気軽に参加してほしい、という思いから、耳だけで参加できる音声形式のコンテンツを展開する形でスタートしました。 ですが、最近では紙芝居（音声＋静止画）形式のコンテンツや動画形式のコンテンツも展開されてきています。 コンテンツの制作は社内公募により集まった有志メンバーが行っており、2021年3月末時点で50本以上のコンテンツが公開されています。 最近では、このISIDテックブログの紹介コンテンツも公開されました。 コンテンツ制作に利用しているサービス Miro メンバーが仕事の合間に作業を進めたり、企画をしたりできるように、 Miro を共同作業の ワークスペース にしています。 コンテンツのコンセプトメイキングをしたり、台本の下書きをしたり、出演者との調整に利用したりしています。 miro.com Zoom 収録には、皆さんご存知の Zoom の有料プランを利用しています。 有料プランにすることで、3名以上での40分以上の収録にも対応できます。 各出演者ごとの音声トラックを個別に録音できるため、後続の音声編集をしやすいというメリットがあります。 Audacity 音声編集には、 オープンソース の音声編集・録音ソフトウェアである Audacity を利用しています。 収録した音声の音量を調整したり、BGMやSEを追加したり、言い直し部分をカットしたりします。 なお、BGMやSEに関しては、ISIDの同好会の一つである JAZZ部 の皆さんに制作いただいたものを利用することが多いです。 Figma サムネイル画像の作成には、ブラウザ上で動作するプロトタイピングツールである Figma の無料プランを利用しています。 操作感としては Adobe XDに近く、UIデザイナーになったような感覚で画像を作成できます。 紙芝居形式のコンテンツの場合には、コンテンツ内で表示する画像も Figma で作成しています。 AviUtil 動画編集には、動画編集ソフトウェアである AviUtil を利用しています。 基本的には編集済みの音声ファイルとサムネイル画像を合わせるだけですが、動画形式のコンテンツの場合には、より複雑な処理をすることになります。 Microsoft Stream 完成したコンテンツは、動画共有サービスである Microsoft Stream にアップロードし、全社に公開します。 再生数やいいねの数は運営メンバーもたびたび確認しますが、やはり反響があると嬉しいものです。 Microsoft SharePoint コラボレーション・ファイル共有サービスである Microsoft SharePoint にTecHuman.fm専用の広報ページをもっています。 過去に配信したコンテンツを一か所に集めて、社員が気軽に、いつでも好きなコンテンツを視聴できるようにしています。 まとめ 本記事では、ISIDの社内ラジオであるTecHuman.fmと、そこでのコンテンツ制作に利用しているサービスについて、簡単にご紹介しました！ TecHuman.fmに関しては、ISIDの採用ページの中でも紹介されている（ こちら ）ので、ぜひ目を通していただければと思います。 最後までお読みいただき、本当にありがとうございました！ 執筆： @miyazawa.hibiki 、レビュー： @sato.taichi （ Shodo で執筆されました ）
はいどーもー！ X イノベーション 本部の宮澤響です！ 本記事では、株式会社 電通国際情報サービス （以下、ISID）の社内ラジオであるTecHuman.fmと、そこでのコンテンツ制作に利用しているサービスについて、簡単にご紹介します！ TecHuman.fmって何？ コンテンツ制作に利用しているサービス Miro Zoom Audacity Figma AviUtil Microsoft Stream Microsoft SharePoint おわりに TecHuman.fmって何？ TecHuman.fmとは、ISIDのビジョンである「HUMANOLOGY for the future」に照らし、ISIDの最大の強みである人（Human）と技術（Technology）の両観点をもって、インプットを得ること、学び合うことをテーマに制作している社内ラジオです。 忙しい方でも業務の隙間時間などに気軽に参加してほしい、という思いから、耳だけで参加できる音声形式のコンテンツを展開する形でスタートしました。 ですが、最近では紙芝居（音声＋静止画）形式のコンテンツや動画形式のコンテンツも展開されてきています。 コンテンツの制作は社内公募により集まった有志メンバーが行っており、2021年3月末時点で50本以上のコンテンツが公開されています。 最近では、このISIDテックブログの紹介コンテンツも公開されました。 コンテンツ制作に利用しているサービス Miro メンバーが仕事の合間に作業を進めたり、企画をしたりできるように、 Miro を共同作業の ワークスペース にしています。 コンテンツのコンセプトメイキングをしたり、台本の下書きをしたり、出演者との調整に利用したりしています。 miro.com Zoom 収録には、皆さんご存知の Zoom の有料プランを利用しています。 有料プランにすることで、3名以上での40分以上の収録にも対応できます。 各出演者ごとの音声トラックを個別に録音できるため、後続の音声編集をしやすいというメリットがあります。 Audacity 音声編集には、 オープンソース の音声編集・録音ソフトウェアである Audacity を利用しています。 収録した音声の音量を調整したり、BGMやSEを追加したり、言い直し部分をカットしたりします。 なお、BGMやSEに関しては、ISIDの同好会の一つである JAZZ部 の皆さんに制作いただいたものを利用することが多いです。 Figma サムネイル画像の作成には、ブラウザ上で動作するプロトタイピングツールである Figma の無料プランを利用しています。 操作感としては Adobe XDに近く、UIデザイナーになったような感覚で画像を作成できます。 紙芝居形式のコンテンツの場合には、コンテンツ内で表示する画像も Figma で作成しています。 AviUtil 動画編集には、動画編集ソフトウェアである AviUtil を利用しています。 基本的には編集済みの音声ファイルとサムネイル画像を合わせるだけですが、動画形式のコンテンツの場合には、より複雑な処理をすることになります。 Microsoft Stream 完成したコンテンツは、動画共有サービスである Microsoft Stream にアップロードし、全社に公開します。 再生数やいいねの数は運営メンバーもたびたび確認しますが、やはり反響があると嬉しいものです。 Microsoft SharePoint コラボレーション・ファイル共有サービスである Microsoft SharePoint にTecHuman.fm専用の広報ページをもっています。 過去に配信したコンテンツを一か所に集めて、社員が気軽に、いつでも好きなコンテンツを視聴できるようにしています。 おわりに 本記事では、ISIDの社内ラジオであるTecHuman.fmと、そこでのコンテンツ制作に利用しているサービスについて、簡単にご紹介しました！ TecHuman.fmに関しては、ISIDの採用ページの中でも紹介されている（ こちら ）ので、ぜひ目を通していただければと思います。 最後までお読みいただき、本当にありがとうございました！ 私たちは同じ事業部で共に働いていただける仲間を募集しています！ みなさまのご応募、お待ちしています！ フルサイクルエンジニア 執筆： @miyazawa.hibiki 、レビュー： @sato.taichi （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/5いってみようか。 NFTが身近に デジタルでも“本物保証” LINE参入でNFTが身近に？【WBS】 「LINE Blockchainの展望と未来の経済圏」LVCインタビュー ＬＩＮＥ、４月にＮＦＴ電子取引市場開始－ペイペイ決済検討 「LINE NFT」 はソフトバンク経済圏の確立か CEOに聞く、真の狙い 【取材】加藤ミリヤや松井秀喜がNFT活用へ、ナッジがクレカ特典の実証実施 インスタグラム、NFTのメインストリーム化を加速：ドイツ銀行 その他のニュース OpenSea、ソラナNFTの取り扱い開始へ 業績絶好調の暗号通貨取引所が社員に高額ボーナスを支給 ゲームをやるだけでお金が稼げる!?」ビジネス系YouTuberが教えるWeb3.0時代の副業のヒント NFTが身近に LINEがNFTに参入することで、NFTがより身近になることが期待されています。LINEのIDを持っていて、LINE BITMAXに口座を開けば、使えるようになるので、これまでより身近になったのは間違いないと思います。 デジタルでも“本物保証” LINE参入でNFTが身近に？【WBS】 「LINE Blockchainの展望と未来の経済圏」LVCインタビュー ＬＩＮＥ、４月にＮＦＴ電子取引市場開始－ペイペイ決済検討 「LINE NFT」 はソフトバンク経済圏の確立か CEOに聞く、真の狙い 有名人がNFTを発行する例も増えてきました。 【取材】加藤ミリヤや松井秀喜がNFT活用へ、ナッジがクレカ特典の実証実施 Instagram がNFTをサポートすることで、NFTのメインストリーム化が進むことも期待されています。 インスタグラム、NFTのメインストリーム化を加速：ドイツ銀行 その他のニュース OpenSea、ソラナNFTの取り扱い開始へ 業績絶好調の暗号通貨取引所が社員に高額ボーナスを支給 ゲームをやるだけでお金が稼げる!?」ビジネス系YouTuberが教えるWeb3.0時代の副業のヒント 自民党、Web3時代のNFT戦略でホワイトペーパー案を公表──ルール整備と規制緩和急ぐ 執筆： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。 それでは、 ブロックチェーン 週報4/5いってみようか。 NFTが身近に デジタルでも“本物保証” LINE参入でNFTが身近に？【WBS】 「LINE Blockchainの展望と未来の経済圏」LVCインタビュー ＬＩＮＥ、４月にＮＦＴ電子取引市場開始－ペイペイ決済検討 「LINE NFT」 はソフトバンク経済圏の確立か CEOに聞く、真の狙い 【取材】加藤ミリヤや松井秀喜がNFT活用へ、ナッジがクレカ特典の実証実施 インスタグラム、NFTのメインストリーム化を加速：ドイツ銀行 その他のニュース OpenSea、ソラナNFTの取り扱い開始へ 業績絶好調の暗号通貨取引所が社員に高額ボーナスを支給 ゲームをやるだけでお金が稼げる!?」ビジネス系YouTuberが教えるWeb3.0時代の副業のヒント NFTが身近に LINEがNFTに参入することで、NFTがより身近になることが期待されています。LINEのIDを持っていて、LINE BITMAXに口座を開けば、使えるようになるので、これまでより身近になったのは間違いないと思います。 デジタルでも“本物保証” LINE参入でNFTが身近に？【WBS】 「LINE Blockchainの展望と未来の経済圏」LVCインタビュー ＬＩＮＥ、４月にＮＦＴ電子取引市場開始－ペイペイ決済検討 「LINE NFT」 はソフトバンク経済圏の確立か CEOに聞く、真の狙い 有名人がNFTを発行する例も増えてきました。 【取材】加藤ミリヤや松井秀喜がNFT活用へ、ナッジがクレカ特典の実証実施 Instagram がNFTをサポートすることで、NFTのメインストリーム化が進むことも期待されています。 インスタグラム、NFTのメインストリーム化を加速：ドイツ銀行 その他のニュース OpenSea、ソラナNFTの取り扱い開始へ 業績絶好調の暗号通貨取引所が社員に高額ボーナスを支給 ゲームをやるだけでお金が稼げる!?」ビジネス系YouTuberが教えるWeb3.0時代の副業のヒント 自民党、Web3時代のNFT戦略でホワイトペーパー案を公表──ルール整備と規制緩和急ぐ 執筆： @higa （ Shodo で執筆されました ）
みなさんこんにちは、ISIDテックブログ編集部の 電通国際情報サービス (ISID) 金融ソリューション事業部の石沢です。ISIDは2021年11月にISIDテックブログを開始し、現時点で50記事を公開しました！ これまでISIDテックブログは社内的に「トライアル」の位置付けでしたが、今月から正式運用へ移行することにもなりました。本記事では、ISIDテックブログをはじめようと思った理由、ねらい、やってみてわかったことについて、ふりかえってみたいと思います。 ISIDがテックブログをはじめた理由 現在、さまざまな企業がそれぞれの目的でテックブログを運用しています。 マーケティング や人事施策などの トップダウン なアプローチでテックブログを運用している企業も多いと思います。それとは逆に、エンジニア社員の「やってみたい」という気持ちを中心として ボトムアップ に開始する場合もあるでしょう。ISIDテックブログは、まさにエンジニア社員の「やってみたい」から生まれています。より正確に言うと「やってみた」というところです。 ISIDは、 ボトムアップ の改善活動が実は活発です。部門を横断したさまざまな組織改善のプログラムが常時実行されています。専門の本部部署が何かを検討するというよりは、顧客もビジネス形態も異なる部門のメンバーが集結して、社の課題について議論を行い、解決策を組織マネジメントに提言し、実行することが許されるような文化です。 ぶっちゃけ「やってみたい」と言えば「やってみれば」と言われる雰囲気があります（本記事では深く取扱いませんが、自社の行動指針も AHEAD というワードを採用しています）。 2020年に発足した、ISIDグループの長期成長を支える事業基盤の構築を目指し、新たな業務プロセスや働き方を検討する社内プロジェクトの一つである「ワークトランスフォーメーションプロジェクト」というものがあります。ここから派生した技術分科会の2021年度活動から出てきたア イデア の一つが「テックブログの開設」でした。 そもそも社内でもいろいろな事にチャレンジしているエンジニアがたくさんいるけど、情報がうまく共有できていない 社会から見るとISIDのエンジニア像がまったく見えていない（見せていない） そもそもISIDにエンジニアがいると思われていないかも（広告会社のシステム部という誤解もありそう） ISIDのエンジニア像を知ってもらい、共感した人にジョインしてもらいたい ブログを書くのはエンジニアとしての成長機会でもあるよね 実際、個人ブログをやっている人もいるけど、続けるのは大変 もし会社で書けるハコがあれば、書く事はいっぱいある もう、社としてのテックブログをやってみればいいのでは…… いまから準備始めれば、今年（2021年）の アドベントカレンダー に参戦できるんじゃないの？ 夏ごろに上記のような話をして、もうあとは勢いでテックブログの開設へ！ ISIDテックブログのトライアルをはじめるにあたって テックブログを実現する技術スタックの選定については、本テックブログの以下記事で紹介しているので本記事では省略します。テックブログの運用はトライアルであっても業務として扱うため、運用コストを抑えることが重要なテーマでした。そこで文章校正もできる執筆管理 SaaS のShodoの採用は重要でした。 テックブログ始めました。 ISIDテックブログは社としての情報発信に当たることから広報部門との調整、組織が有している ソーシャルメディア 利用に関する ガイドライン 、レビュープロセスを簡単に固めていきました。トライアルということもあり、問題が発生したら見直せば良いので骨子程度の簡単なもので済ませています。 だいたいの方向性が出たところで、ツール類の諸費用およびブログ執筆者とレビュアーの人件費をざっくり見積ってコストを取りまとめて、Makrdownで1ページくらいの企画書を書いてマネジメントと関係者に説明・承諾を得てスタートです。社内で執筆者を公募したところ、あまり苦労せず多様な執筆者を集めることができました（ちょっと心配だったのですが杞憂でした）。 結果として、2021年の アドベントカレンダー では一日も欠かすことなく25記事を投稿することができました。記事の一覧は以下のとおりです。 電通国際情報サービス Advent Calendar 2021 - Adventar トライアルでわかったこと 狙っていなかったのでよいのですが、テックブログは炎上もバズりもせずに、たんたんと続いています。一方で、いろいろとやってみてわかったことがあります。そのいくつかをご紹介します。 ISIDテックブログを始めたことがおどろかれた ある程度予想していたことではありますが、 SNS などの反応を見ているとISIDがテックブログ始めたこと自体にいくつか反応をいただいていました。そもそもISIDが何をやっている企業かわかりにくいこともあると思います。多様なエンジニアが在席していることが示せたのは良かったと思います。 社内コミュニケーション活性化の効果もあった 社内の情報共有の仕組みは各種とりそろえてあるのですが、それでもなお、社内コミュニケーション活性化の効果があったと思います。ISIDテックブログは個人の視点で等身大の技術情報を発信することが特徴です。社内の情報共有というと「プロジェクトや仕事」「お客様」「活躍した人」を中心とすることが多く、割と（いろいろな意味で）デカい話ばかりになりがちです。テックブログに蓄積されるような、小さな情報も大事なんだと改めて気づかされたような気がします。 また「普段仕事で関わらない人の活動や考え方」「他部門、他部署の技術的なこと」がわかることも大きなメリットだと思います。他部門の同世代・同期の書いた記事に刺激を受けている人もいるとか・・・ 個人の成長機会になることもわかった アウトプットを通じて学びが深まり、自己成長するという話はよく聞きます。テックブログに記事を書く事が自己研鑽の機会づくりとして有効だったという声は社内からも上がりました。内容を整理し文書化するという活動が有意義なことに加えて、内容によってはシニアエンジニアや広報部門のレビューも入ります。普段の研究開発やクライアントワーク、プロジェクト活動では経験しにくい活動が良い刺激となっているようです。 そして正式運用へ 現時点で、ISIDテックブログを始めたことにはメリットしかなく、デメリットはほとんどないことがわかりました。そこで（別になにも変わらないのですが）改めて、ISIDテックブログはトライアルから「正式運用」へ移行することになりました。 テック ブログ界 には以下のような記事があり、当然参考とさせていただいています。 テックブログは続かない - 何サイトか潰した後にブログが有名な企業に転職しての気づきと反省｜久松剛／IT百物語の蒐集家｜note ISIDテックブログは当面以下の方針で継続する予定です。 編集長は配置しない（有志による編集部で運用） 数値目標などは設定しない（目安として週1程度の更新頻度は維持したいけど、ゆるく考える） 匿名化はしない。レビューはやる。記事の執筆は業務。 死なないといいな・・・（上記ブログ記事に書かれている「テックブログが死ぬ条件」を意識しています） テックブログのねらい、これから 改めて、ISIDテックブログのねらいを私たちはこのように定義しています。 等身大のISID社員の姿をオープンに伝えていく ISID社員が技術的な取組みを公開していく 自らのアウトプットをする機会を通じて自分たち自身の能力を高める 実はISIDテックブログを企画推進していくにあたってよくあった意見の一つに「もっとトガった人が書くべきではないか・先進的な内容で技術をアピールしたほうが良いのでは」というものがありました。世の中にはそういった方針のアピールメディアとしてのブログもたくさんあることは理解していますが、議論の結果、われわれがやりたいことは違う、と結論づけています。わたしたちは、等身大の自分たちを共有していく方向で、これからもISIDテックブログを継続していこうと考えています。 最後までお読みいただきありがとうございます。ISIDテックブログを引続きよろしくお願いします。 執筆： Ishizawa Kento (@kent) 、レビュー： @higa （ Shodo で執筆されました ）
みなさんこんにちは、ISIDテックブログ編集部の 電通国際情報サービス (ISID) 金融ソリューション事業部の石沢です。ISIDは2021年11月にISIDテックブログを開始し、現時点で50記事を公開しました！ これまでISIDテックブログは社内的に「トライアル」の位置付けでしたが、今月から正式運用へ移行することにもなりました。本記事では、ISIDテックブログをはじめようと思った理由、ねらい、やってみてわかったことについて、ふりかえってみたいと思います。 ISIDがテックブログをはじめた理由 現在、さまざまな企業がそれぞれの目的でテックブログを運用しています。 マーケティング や人事施策などの トップダウン なアプローチでテックブログを運用している企業も多いと思います。それとは逆に、エンジニア社員の「やってみたい」という気持ちを中心として ボトムアップ に開始する場合もあるでしょう。ISIDテックブログは、まさにエンジニア社員の「やってみたい」から生まれています。より正確に言うと「やってみた」というところです。 ISIDは、 ボトムアップ の改善活動が実は活発です。部門を横断したさまざまな組織改善のプログラムが常時実行されています。専門の本部部署が何かを検討するというよりは、顧客もビジネス形態も異なる部門のメンバーが集結して、社の課題について議論を行い、解決策を組織マネジメントに提言し、実行することが許されるような文化です。 ぶっちゃけ「やってみたい」と言えば「やってみれば」と言われる雰囲気があります（本記事では深く取扱いませんが、自社の行動指針も AHEAD というワードを採用しています）。 2020年に発足した、ISIDグループの長期成長を支える事業基盤の構築を目指し、新たな業務プロセスや働き方を検討する社内プロジェクトの一つである「ワークトランスフォーメーションプロジェクト」というものがあります。ここから派生した技術分科会の2021年度活動から出てきたア イデア の一つが「テックブログの開設」でした。 そもそも社内でもいろいろな事にチャレンジしているエンジニアがたくさんいるけど、情報がうまく共有できていない 社会から見るとISIDのエンジニア像がまったく見えていない（見せていない） そもそもISIDにエンジニアがいると思われていないかも（広告会社のシステム部という誤解もありそう） ISIDのエンジニア像を知ってもらい、共感した人にジョインしてもらいたい ブログを書くのはエンジニアとしての成長機会でもあるよね 実際、個人ブログをやっている人もいるけど、続けるのは大変 もし会社で書けるハコがあれば、書く事はいっぱいある もう、社としてのテックブログをやってみればいいのでは…… いまから準備始めれば、今年（2021年）の アドベントカレンダー に参戦できるんじゃないの？ 夏ごろに上記のような話をして、もうあとは勢いでテックブログの開設へ！ ISIDテックブログのトライアルをはじめるにあたって テックブログを実現する技術スタックの選定については、本テックブログの以下記事で紹介しているので本記事では省略します。テックブログの運用はトライアルであっても業務として扱うため、運用コストを抑えることが重要なテーマでした。そこで文章校正もできる執筆管理 SaaS のShodoの採用は重要でした。 テックブログ始めました。 ISIDテックブログは社としての情報発信に当たることから広報部門との調整、組織が有している ソーシャルメディア 利用に関する ガイドライン 、レビュープロセスを簡単に固めていきました。トライアルということもあり、問題が発生したら見直せば良いので骨子程度の簡単なもので済ませています。 だいたいの方向性が出たところで、ツール類の諸費用およびブログ執筆者とレビュアーの人件費をざっくり見積ってコストを取りまとめて、Makrdownで1ページくらいの企画書を書いてマネジメントと関係者に説明・承諾を得てスタートです。社内で執筆者を公募したところ、あまり苦労せず多様な執筆者を集めることができました（ちょっと心配だったのですが杞憂でした）。 結果として、2021年の アドベントカレンダー では一日も欠かすことなく25記事を投稿することができました。記事の一覧は以下のとおりです。 電通国際情報サービス Advent Calendar 2021 - Adventar トライアルでわかったこと 狙っていなかったのでよいのですが、テックブログは炎上もバズりもせずに、たんたんと続いています。一方で、いろいろとやってみてわかったことがあります。そのいくつかをご紹介します。 ISIDテックブログを始めたことがおどろかれた ある程度予想していたことではありますが、 SNS などの反応を見ているとISIDがテックブログ始めたこと自体にいくつか反応をいただいていました。そもそもISIDが何をやっている企業かわかりにくいこともあると思います。多様なエンジニアが在席していることが示せたのは良かったと思います。 社内コミュニケーション活性化の効果もあった 社内の情報共有の仕組みは各種とりそろえてあるのですが、それでもなお、社内コミュニケーション活性化の効果があったと思います。ISIDテックブログは個人の視点で等身大の技術情報を発信することが特徴です。社内の情報共有というと「プロジェクトや仕事」「お客様」「活躍した人」を中心とすることが多く、割と（いろいろな意味で）デカい話ばかりになりがちです。テックブログに蓄積されるような、小さな情報も大事なんだと改めて気づかされたような気がします。 また「普段仕事で関わらない人の活動や考え方」「他部門、他部署の技術的なこと」がわかることも大きなメリットだと思います。他部門の同世代・同期の書いた記事に刺激を受けている人もいるとか・・・ 個人の成長機会になることもわかった アウトプットを通じて学びが深まり、自己成長するという話はよく聞きます。テックブログに記事を書く事が自己研鑽の機会づくりとして有効だったという声は社内からも上がりました。内容を整理し文書化するという活動が有意義なことに加えて、内容によってはシニアエンジニアや広報部門のレビューも入ります。普段の研究開発やクライアントワーク、プロジェクト活動では経験しにくい活動が良い刺激となっているようです。 そして正式運用へ 現時点で、ISIDテックブログを始めたことにはメリットしかなく、デメリットはほとんどないことがわかりました。そこで（別になにも変わらないのですが）改めて、ISIDテックブログはトライアルから「正式運用」へ移行することになりました。 テック ブログ界 には以下のような記事があり、当然参考とさせていただいています。 テックブログは続かない - 何サイトか潰した後にブログが有名な企業に転職しての気づきと反省｜久松剛／IT百物語の蒐集家｜note ISIDテックブログは当面以下の方針で継続する予定です。 編集長は配置しない（有志による編集部で運用） 数値目標などは設定しない（目安として週1程度の更新頻度は維持したいけど、ゆるく考える） 匿名化はしない。レビューはやる。記事の執筆は業務。 死なないといいな・・・（上記ブログ記事に書かれている「テックブログが死ぬ条件」を意識しています） テックブログのねらい、これから 改めて、ISIDテックブログのねらいを私たちはこのように定義しています。 等身大のISID社員の姿をオープンに伝えていく ISID社員が技術的な取組みを公開していく 自らのアウトプットをする機会を通じて自分たち自身の能力を高める 実はISIDテックブログを企画推進していくにあたってよくあった意見の一つに「もっとトガった人が書くべきではないか・先進的な内容で技術をアピールしたほうが良いのでは」というものがありました。世の中にはそういった方針のアピールメディアとしてのブログもたくさんあることは理解していますが、議論の結果、われわれがやりたいことは違う、と結論づけています。わたしたちは、等身大の自分たちを共有していく方向で、これからもISIDテックブログを継続していこうと考えています。 最後までお読みいただきありがとうございます。ISIDテックブログを引続きよろしくお願いします。 執筆： Ishizawa Kento (@kent) 、レビュー： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。今回取り上げるのはTailwind CSS 。 Tailwind CSS は、最近人気急上昇の CSS フレームワーク です。 メジャーなBootstrapなどの フレームワーク は、あらかじめ見栄えの良い コンポーネント が用意されていて、それをカスタマイズします。それに対し、Tailwind CSS は、 CSS の便利なclassが大量に用意されているだけです。それではなぜTailwind CSS の人気が上昇しているのでしょうか。 一番の原因はBootstrapなどの コンポーネント を使うと、見た目が同じ様になってしまうのでサイトの個性が出せなくなることです。 サイトの個性を出すために、出来合いの コンポーネント は使わず自前でデザインを組み立てていくとコストが掛かります。そのコストをできるだけ下げるために、Tailwind CSS では便利なクラスがたくさん用意されています。 最近は、 Adobe XDを使ってプロトタイプを作ることも多くなってきていると思います。XDで作ったものをHTMLに落とし込むときに、出来合いの コンポーネント があってもあまり役に立ちません。自前でかつローコストでデザインするのにTailwind CSS は向いているのです。 Clubhouse や Netflix Top 10 もTailwind CSS を使っているそうです。 前準備 first.html rectangles.html responsive_design.html まとめ 前準備 今回使うHTMLを前もって用意しておいたので、ダウンロードしてください。 tailwindcss_samples.zip あなたが、 VS Code を使っているなら、とても便利なTailwind CSS の機能拡張が用意されているのでインストールしましょう。 メニューの機能拡張（Extensions）を開いて、tainwindで検索してください。Tailwind CSS IntelliSenseという機能拡張があるので、それをインストールしてください。 次のようにclassの補完ができます。 Tailwind CSS にはたくさんのclassが用意されているので、それを全部覚えるのは大変です。しかし、ある程度なれてくるとテキストに関するclassはtextで始まるということが自然に覚えられるので、textと入力し補完すればclassがどんなにたくさんあろうと対応できます。 Tailwind CSS を使うための方法はいくつかありますが、 CDN を使うのが最も簡単です。この記事では CDN を使います。headタグの子要素に次のlinkタグを追加してください。 < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> first.html それでは、first.htmlを Chrome で開きましょう。 Mac を使っている場合は、first.htmlを右クリック -> このアプリケーションで開く -> Google Chrome .appを選んでください。 Windows を使っている場合は、first.htmlを右クリック -> 情報を見る -> このアプリケーションで開くで、 Chrome を選んでください。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body > < span class = "text-red-500" > あああ </ span > </ body > </ html > text-red-500をtext-blue-500に変えてHTMLを保存し、ブラウザをリロードしましょう。文字の色が青くなったはずです。 text-blue-500の500は何を表しているのでしょうか。これは文字の色の濃さです。500を消して補完させると次のような選択肢があることがわかります。 数字が大きくなるほど色も濃くなります。それでは、text-blue-100に変更してHTMLを保存し、ブラウザをリロードしましょう。文字の色が薄くなりましたね。 rectangles.html それでは、いろいろなclassを試してみましょう。rectangles.htmlを Chrome で開きましょう。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Rectabgles </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body class = "pl-4" > < div > w-4 = 1 rem = 16px </ div > < div class = "text-white bg-blue-500 w-4" > あああ </ div > < div class = "mt-4" > w-12 </ div > < div class = "text-white bg-blue-500 w-12" > あああ </ div > < div class = "mt-4" > w-20 </ div > < div class = "text-white bg-blue-500 w-20" > あああ </ div > < div class = "mt-4" > w-20 text-center </ div > < div class = "text-white bg-blue-500 w-20 text-center" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 rounded-xl </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 rounded-xl" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 bg-opacity-80 </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 bg-opacity-80" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 font-bold </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 font-bold" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 border-8 border-red-500 </ div > < div class = "w-20 text-center py-2 border-8 border-red-500" > あああ </ div > </ body > </ html > 左側が16px空いています。 これは、bodyタグのclassに指定したpl-4の効果です。pl-4とは、padding left 16pxのことです。1が4pxになります。 < body class = "pl-4" > 上のタグと距離を開けるには、mt-xxを使います。mtはmargin topの略です。 < div class = "mt-4" > w-12 </ div > 背景色を指定するには、bg-色-濃さで指定します。濃さは500が真ん中の値で、濃くなると数値も大きくなります。900が最も大きい値です。 幅を指定するには、w-数値で指定します。数値は先程と同様1が4pxになります。Tailwind CSS では、数値の4が16px = 1 rem = 1文字分の幅になります。 < div class = "text-white bg-blue-500 w-4" > あああ </ div > ちょうど、1文字の幅で改行されていますね。 次は、w-12 = 3 remにしてみましょう。 < div class = "text-white bg-blue-500 w-12" > あああ </ div > ちょうど文字幅と同じになっています。 w-20にするとどうなるでしょうか。 < div class = "text-white bg-blue-500 w-20" > あああ </ div > 左寄せになりました。 中央寄せにしてみましょう。text-centerを使います。 < div class = "text-white bg-blue-500 w-20 text-center" > あああ </ div > 文字の上下にスペースを入れてみましょう。py（padding y方向）を使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2" > あああ </ div > 角丸にしてみましょう。roundedを使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2 rounded-xl" > あああ </ div > roundedでどのような値が使えるかは、roundedと入力し、補完で確かめましょう。 背景の不透明度を設定しましょう。bg-opacity-xxを使います。xxは0から100までの数字が入ります。数字が大きいほど不透明度は高く、100の場合は透明度なし（何も指定しないのと一緒）です。xxで、どの値が使えるかは補完で確かめましょう。 < div class = "text-white bg-blue-500 w-20 text-center py-2 bg-opacity-80" > あああ </ div > フォントを太くしてみましょう。font-boldを使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2 font-bold" > あああ </ div > 枠線を設定しましょう。border-太さとborder-色-濃さで指定します。 < div class = "w-20 text-center py-2 border-8 border-red-500" > あああ </ div > それでは、幅（width）を4の倍数以外の23pxにしたい場合はどうするのでしょうか。w-[23px]のように[]の中にサイズを指定します。ただし、 CDN 版ではできません。npmでtailwindcssをインストールする必要があります。詳しくは下記をご覧ください。 Installation: Tailwind CLI using-arbitrary-values responsive_design.html Tailwind CSS を使うと簡単にレスポンシブデザインにできます。responsive_design.htmlを Chrome で開いてください。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Responsive Design </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body class = "pl-4 pt-4" > < div class = "bg-blue-500 w-16 md:w-32 lg:w-48 xl:w-60 h-8" ></ div > < div class = "mt-4 md:flex" > < div class = "w-72 h-8 bg-indigo-500" ></ div > < div class = "mt-1 md:mt-0 md:ml-1 w-72 h-8 bg-pink-500" ></ div > </ div > </ body > </ html > Chrome のWindowの幅をできるだけ小さくしてください。次のような青い四角が表示されましたね。 少しづつWindowの幅を大きくしてください。768px以上で四角の幅が16px増えましたね。同様に、1024px、1280px以上で四角の幅が増えたはずです。 タグの定義を見てみましょう。 < div class = "bg-blue-500 w-16 md:w-32 lg:w-48 xl:w-60 h-8" ></ div > w-xxの プレフィックス としてmd:, lg:, xl:が指定されています。これを解釈すると次のようになります。 768px未満は、w-16。 md: 768px以上1024px未満は、w-32。 lg: 1024px以上1280px未満は、w-48。 xl: 1280px以上は、w-60。 レスポンシブデザインでよくあるのが スマホ ではスペースがないので縦に表示し、 タブレット 以上のスペースがある場合は、横に表示するやり方です。 まず、 スマホ で縦に表示するには、普通にdivを使います。 < div > < div > コンテンツ1 </ div > < div > コンテンツ2 </ div > </ div > 幅が768px以上のときに、横に表示するには、md: flex を使います。 < div class = "md:flex" > < div > コンテンツ1 </ div > < div > コンテンツ2 </ div > </ div > つまり、md: flex を使えば、 スマホ では縦に表示し、幅768px以上なら横に表示するということが簡単にできます。 < div class = "mt-4 md:flex" > < div class = "w-72 h-8 bg-indigo-500" ></ div > < div class = "mt-1 md:mt-0 md:ml-1 w-72 h-8 bg-pink-500" ></ div > </ div > 幅が768px未満。 幅が768px以上 mt-1 md:mt-0 md:ml-1を説明しておきましょう。幅が768px未満のときは、縦に並ぶので、mt-1（margin top 4px）で上の要素と4pxあけます。 幅が768px以上のときは、横に並ぶので、md:mt-0（margin top 0px）で上の要素とのスペースを0pxにし、md:ml-1で左の要素とのスペースを4pxあけます。 まとめ Tailwind CSS いかがだったでしょうか。HTMLをみれば、class属性に必要な情報があるため、どういうデザインになるのか予想できます。これによりかなり見通しが良くなります。 ストレスフリーな CSS ライフをお過ごしください。 執筆： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの 比嘉康雄 です。今回取り上げるのはTailwind CSS 。 Tailwind CSS は、最近人気急上昇の CSS フレームワーク です。 メジャーなBootstrapなどの フレームワーク は、あらかじめ見栄えの良い コンポーネント が用意されていて、それをカスタマイズします。それに対し、Tailwind CSS は、 CSS の便利なclassが大量に用意されているだけです。それではなぜTailwind CSS の人気が上昇しているのでしょうか。 一番の原因はBootstrapなどの コンポーネント を使うと、見た目が同じ様になってしまうのでサイトの個性が出せなくなることです。 サイトの個性を出すために、出来合いの コンポーネント は使わず自前でデザインを組み立てていくとコストが掛かります。そのコストをできるだけ下げるために、Tailwind CSS では便利なクラスがたくさん用意されています。 最近は、 Adobe XDを使ってプロトタイプを作ることも多くなってきていると思います。XDで作ったものをHTMLに落とし込むときに、出来合いの コンポーネント があってもあまり役に立ちません。自前でかつローコストでデザインするのにTailwind CSS は向いているのです。 Clubhouse や Netflix Top 10 もTailwind CSS を使っているそうです。 前準備 first.html rectangles.html responsive_design.html まとめ 前準備 今回使うHTMLを前もって用意しておいたので、ダウンロードしてください。 tailwindcss_samples.zip あなたが、 VS Code を使っているなら、とても便利なTailwind CSS の機能拡張が用意されているのでインストールしましょう。 メニューの機能拡張（Extensions）を開いて、tainwindで検索してください。Tailwind CSS IntelliSenseという機能拡張があるので、それをインストールしてください。 次のようにclassの補完ができます。 Tailwind CSS にはたくさんのclassが用意されているので、それを全部覚えるのは大変です。しかし、ある程度なれてくるとテキストに関するclassはtextで始まるということが自然に覚えられるので、textと入力し補完すればclassがどんなにたくさんあろうと対応できます。 Tailwind CSS を使うための方法はいくつかありますが、 CDN を使うのが最も簡単です。この記事では CDN を使います。headタグの子要素に次のlinkタグを追加してください。 < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> first.html それでは、first.htmlを Chrome で開きましょう。 Mac を使っている場合は、first.htmlを右クリック -> このアプリケーションで開く -> Google Chrome .appを選んでください。 Windows を使っている場合は、first.htmlを右クリック -> 情報を見る -> このアプリケーションで開くで、 Chrome を選んでください。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body > < span class = "text-red-500" > あああ </ span > </ body > </ html > text-red-500をtext-blue-500に変えてHTMLを保存し、ブラウザをリロードしましょう。文字の色が青くなったはずです。 text-blue-500の500は何を表しているのでしょうか。これは文字の色の濃さです。500を消して補完させると次のような選択肢があることがわかります。 数字が大きくなるほど色も濃くなります。それでは、text-blue-100に変更してHTMLを保存し、ブラウザをリロードしましょう。文字の色が薄くなりましたね。 rectangles.html それでは、いろいろなclassを試してみましょう。rectangles.htmlを Chrome で開きましょう。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Rectabgles </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body class = "pl-4" > < div > w-4 = 1 rem = 16px </ div > < div class = "text-white bg-blue-500 w-4" > あああ </ div > < div class = "mt-4" > w-12 </ div > < div class = "text-white bg-blue-500 w-12" > あああ </ div > < div class = "mt-4" > w-20 </ div > < div class = "text-white bg-blue-500 w-20" > あああ </ div > < div class = "mt-4" > w-20 text-center </ div > < div class = "text-white bg-blue-500 w-20 text-center" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 rounded-xl </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 rounded-xl" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 bg-opacity-80 </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 bg-opacity-80" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 font-bold </ div > < div class = "text-white bg-blue-500 w-20 text-center py-2 font-bold" > あああ </ div > < div class = "mt-4" > w-20 text-center py-2 border-8 border-red-500 </ div > < div class = "w-20 text-center py-2 border-8 border-red-500" > あああ </ div > </ body > </ html > 左側が16px空いています。 これは、bodyタグのclassに指定したpl-4の効果です。pl-4とは、padding left 16pxのことです。1が4pxになります。 < body class = "pl-4" > 上のタグと距離を開けるには、mt-xxを使います。mtはmargin topの略です。 < div class = "mt-4" > w-12 </ div > 背景色を指定するには、bg-色-濃さで指定します。濃さは500が真ん中の値で、濃くなると数値も大きくなります。900が最も大きい値です。 幅を指定するには、w-数値で指定します。数値は先程と同様1が4pxになります。Tailwind CSS では、数値の4が16px = 1 rem = 1文字分の幅になります。 < div class = "text-white bg-blue-500 w-4" > あああ </ div > ちょうど、1文字の幅で改行されていますね。 次は、w-12 = 3 remにしてみましょう。 < div class = "text-white bg-blue-500 w-12" > あああ </ div > ちょうど文字幅と同じになっています。 w-20にするとどうなるでしょうか。 < div class = "text-white bg-blue-500 w-20" > あああ </ div > 左寄せになりました。 中央寄せにしてみましょう。text-centerを使います。 < div class = "text-white bg-blue-500 w-20 text-center" > あああ </ div > 文字の上下にスペースを入れてみましょう。py（padding y方向）を使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2" > あああ </ div > 角丸にしてみましょう。roundedを使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2 rounded-xl" > あああ </ div > roundedでどのような値が使えるかは、roundedと入力し、補完で確かめましょう。 背景の不透明度を設定しましょう。bg-opacity-xxを使います。xxは0から100までの数字が入ります。数字が大きいほど不透明度は高く、100の場合は透明度なし（何も指定しないのと一緒）です。xxで、どの値が使えるかは補完で確かめましょう。 < div class = "text-white bg-blue-500 w-20 text-center py-2 bg-opacity-80" > あああ </ div > フォントを太くしてみましょう。font-boldを使います。 < div class = "text-white bg-blue-500 w-20 text-center py-2 font-bold" > あああ </ div > 枠線を設定しましょう。border-太さとborder-色-濃さで指定します。 < div class = "w-20 text-center py-2 border-8 border-red-500" > あああ </ div > それでは、幅（width）を4の倍数以外の23pxにしたい場合はどうするのでしょうか。w-[23px]のように[]の中にサイズを指定します。ただし、 CDN 版ではできません。npmでtailwindcssをインストールする必要があります。詳しくは下記をご覧ください。 Installation: Tailwind CLI using-arbitrary-values responsive_design.html Tailwind CSS を使うと簡単にレスポンシブデザインにできます。responsive_design.htmlを Chrome で開いてください。 <!DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Responsive Design </ title > < link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body class = "pl-4 pt-4" > < div class = "bg-blue-500 w-16 md:w-32 lg:w-48 xl:w-60 h-8" ></ div > < div class = "mt-4 md:flex" > < div class = "w-72 h-8 bg-indigo-500" ></ div > < div class = "mt-1 md:mt-0 md:ml-1 w-72 h-8 bg-pink-500" ></ div > </ div > </ body > </ html > Chrome のWindowの幅をできるだけ小さくしてください。次のような青い四角が表示されましたね。 少しづつWindowの幅を大きくしてください。768px以上で四角の幅が16px増えましたね。同様に、1024px、1280px以上で四角の幅が増えたはずです。 タグの定義を見てみましょう。 < div class = "bg-blue-500 w-16 md:w-32 lg:w-48 xl:w-60 h-8" ></ div > w-xxの プレフィックス としてmd:, lg:, xl:が指定されています。これを解釈すると次のようになります。 768px未満は、w-16。 md: 768px以上1024px未満は、w-32。 lg: 1024px以上1280px未満は、w-48。 xl: 1280px以上は、w-60。 レスポンシブデザインでよくあるのが スマホ ではスペースがないので縦に表示し、 タブレット 以上のスペースがある場合は、横に表示するやり方です。 まず、 スマホ で縦に表示するには、普通にdivを使います。 < div > < div > コンテンツ1 </ div > < div > コンテンツ2 </ div > </ div > 幅が768px以上のときに、横に表示するには、md: flex を使います。 < div class = "md:flex" > < div > コンテンツ1 </ div > < div > コンテンツ2 </ div > </ div > つまり、md: flex を使えば、 スマホ では縦に表示し、幅768px以上なら横に表示するということが簡単にできます。 < div class = "mt-4 md:flex" > < div class = "w-72 h-8 bg-indigo-500" ></ div > < div class = "mt-1 md:mt-0 md:ml-1 w-72 h-8 bg-pink-500" ></ div > </ div > 幅が768px未満。 幅が768px以上 mt-1 md:mt-0 md:ml-1を説明しておきましょう。幅が768px未満のときは、縦に並ぶので、mt-1（margin top 4px）で上の要素と4pxあけます。 幅が768px以上のときは、横に並ぶので、md:mt-0（margin top 0px）で上の要素とのスペースを0pxにし、md:ml-1で左の要素とのスペースを4pxあけます。 まとめ Tailwind CSS いかがだったでしょうか。HTMLをみれば、class属性に必要な情報があるため、どういうデザインになるのか予想できます。これによりかなり見通しが良くなります。 ストレスフリーな CSS ライフをお過ごしください。 執筆： @higa （ Shodo で執筆されました ）
こんにちは。XI本部、 AIトランスフォーメーションセンター の徳原 光です。 日ごろの業務では、お客様から預かったデータの分析や、AIシステムの開発を担当しています。 実際にやっていることは、データ理解のために EDA （探索的データ分析）を実施したり、分析やAIモデル開発を行うためにデータのクリーニングを行ったり、いわゆるデータサイエンスのどろくさい部分がほとんどになります。 これらの作業は基本的にjupyter notebook上で行っています。jupyter notebookはAIやデータサイエンスに関わっている方なら誰もが触ったことのあるメジャーなツールです。きっと、この記事を読んでくださっている多くの方も日常的に利用しているのではないでしょうか。 jupyter notebookはこれがないと仕事にならないくらい強力なものですが欠点もあって、複数人で同じnotebookを共有して作業を進めていくには不向だったりします。 ということで、そんなjupyter notebookをGitを用いて管理することで、複数人で同時に分析プロジェクトを進めることを可能にする便利なツールJupytextを紹介しようと思います。 なぜJupytextなのか？ Jupytextの使い方 インストールの仕方 Jupytextの設定 ファイルの保存方法 pyファイルからnotebookを復元する Jupytextを使ってみて デメリットは対応している環境が限られていること なぜJupytextなのか？ 経験のある方もいらっしゃると思いますが、jupyter notebookが出力するipynbファイルをGitで管理しようとするとコンフリクトが頻繁に起こります。 ipynbファイルの中身は json になっていて、コード以外に メタデータ や実行結果が含まれます。それらのデータが実行される度に書き換わるので、処理内容が一緒だとしても複数箇所で異なる部分が生じてしまいます。 また、コンフリクトを解決しようとしても、 json ファイルの差異を比較するのは不可能なので人力では無理です。 Jupytextを使用すると、notebookを保存する度にipynbファイルからコード部分を抽出したpyファイルを自動で作成してくれます。そして作成されたpyファイルのみ、Git上で管理すれば競合の発生を防げるというわけです。 もちろん、ローカルにはipynbファイルが残されるので、実行結果や メタデータ はローカルにしっかりと残ります。 ファイルの復元も簡単でpullしてきたpyファイルをJupyter Notebookで読み込めば、自動でipynbファイルに復元できます。 ※jupyterを VS code で利用している場合、Jupytextは使用できません。 VS code でJupytextを適用しているnotebooのipynbファイルを開いてしまうとipynbファイルが破損します。また、jupytextが適用されていないJupyter Notebookで開いてもipynbファイルが破損するので気をつけてください。 ※この記事では、頭文字が大文字のJupyter NotebookはJupyter Project純正の実行環境を指しています。JupytextはJupyter Notebook以外にJupyter Labでも使用できるようですが、挙動は確認していないです。 Jupytextの使い方 インストールの仕方 まずは導入の仕方から。 公式のドキュメント に書いてあるようにJupytextの導入はpipもしくはcondaを用いて行います。 プロジェクトごとにJupytextの使用の有無を切り替えたい場合は、condaやpyenvを使って仮想環境に導入することをおすすめします。 pip install jupytext --upgrade または conda install jupytext -c conda-forge これだけです。 正常にインストールできていれば、次回のJupyter Notebookの起動時に、 [I 10:28:31.646 LabApp] [Jupytext Server Extension] Changing NotebookApp.contents_manager_class from LargeFileManager to jupytext.TextFileContentsManager と表示されます。 Jupytextの設定 ここまでで、すでにJupytextを使用する準備は整っていますが、後々のことを考えてJupytextの設定をしておきましょう。 Jupytextの設定方法は複数存在しますが、プロジェクト直下のフォルダ（Jupyter Notebookを立ち上げるフォルダ）にjupytext.ymlという yaml ファイルを作成しておくのが簡単な方法みたいです とりあえず、以下を設定ファイルに追加して、保存時にデフォルトで作成されるファイルのフォーマットを指定しましょう。 default_jupytext_formats: "ipynb,py:percent" ipynb はipynbファイルのことです。 py:percent を指定すると、パーセント記号2つ %% でセル間を分けた表記でコードを抽出したpyファイルを作成できます。こうしておくことで、この表記で保存しておけばもし VS code で開いてもセルごとに分割された形で表示、実行できます。 この他に、選択できるフォーマットが複数存在します。こちらの 公式ドキュメント に選択できるフォーマットの詳細が載っています。 保存ファイルのフォーマットを2つ以上選択することも可能です。 設定はJupyter Notebookを再起動すれば、この後作成するすべてのnotebookに対してこの設定が適応されます。すでに作成済みのnotebookに対しては手動で設定する必要があるので、 ツールバー からファイル→Jupyterを選択し、表示されるメニューから保存ファイルのフォーマットを選択してください。 ファイルの保存方法 通常通りnotebookを保存すれば指定された形式でファイルが保存されます。特になにかする必要はないです。 ipynb形式以外にコード部分を抽出したファイルが保存されたら、gitignoreを設定してコード部分を抽出したファイルのみが管理されるように設定します。こうすることで、Gitでjupyter notebookを安全に管理できます。 ちなみに、notebooksというフォルダ上でjupyter notebookを管理している場合、gitignoreファイルを以下のように編集すると、ipynb形式のファイルがGitの管理対象から外れます。 /notebooks/*.ipynb pyファイルからnotebookを復元する こちらも特に何もする必要性はありません。Jupytextが導入されたJupyter Notebookでコード部分が抽出されたpyファイルを開けば、notebookを復元できます。 Jupytextを使ってみて 使い始めてまだ日が浅いですが非常にいい感じに使えています。 jupyter notebookの用途的に、複数の人が1つのnotebookを分担して編集するという使い方はあまりないと思いますが、もし別々の人が1つのnotebookを編集してしまっても簡単にdiffを取ることができるので、gitでのバージョン管理は格段にやりやすくなりました。 さらに、一番恩恵を受けられるのが特にコードに変更を加えていないけどnotebookを実行した場合です。コードに変更がないなら変更を破棄してしまえばいいですが、Jupytextを使っていればそもそもコンフリクトすら生じないのでipynbファイルの差異を意識する必要性がなくなります。 デメリットは対応している環境が限られていること Jupyter Notebook以外にもjupyter notebookを実行できる環境は増えてきていますよね。自分の周りでは VS code にjupyter用の 拡張機能 を入れて利用している人が多く、最近は私も VS code で実行することが増えてきています。 ただ、冒頭でお伝えしたようにJupytextは VS code には対応しておらず、プロジェクトにJupytextを導入するにはメンバー全員にJupyter Notebookまたは、Jupyter Labを使ってもらう必要があります。 現状、Jupyter Notebookよりも VS code のほうが高機能なので、そこは残念なところですね・・・。 jupyter notebookをGitで管理しやすくしてくれるツールJupytextの紹介でした。デメリットもありますがjupyter notebookをGit上で管理している人にはmustなツールだと思います。 この記事を読んで興味が湧いた方は試しに使ってみてください。 最後に、私が所属している AIトランスフォーメーションセンターのwebサイト では、毎月2、3記事のペースでコラムを公開しています。 Kaggle MasterによるKaggleコンペのはじめ方解説や最新の論文に基づいたAIモデル構築手法の提案、さらにAIソフトウェア開発のリアルな現状など、データサイエンスやAIにまつわる様々な情報を発信していますのでぜひ閲覧ください。 それでは。 執筆： @tokuhara.hikaru 、レビュー： @higa （ Shodo で執筆されました ）
こんにちは。XI本部、 AIトランスフォーメーションセンター の徳原 光です。 日ごろの業務では、お客様から預かったデータの分析や、AIシステムの開発を担当しています。 実際にやっていることは、データ理解のために EDA （探索的データ分析）を実施したり、分析やAIモデル開発を行うためにデータのクリーニングを行ったり、いわゆるデータサイエンスのどろくさい部分がほとんどになります。 これらの作業は基本的にjupyter notebook上で行っています。jupyter notebookはAIやデータサイエンスに関わっている方なら誰もが触ったことのあるメジャーなツールです。きっと、この記事を読んでくださっている多くの方も日常的に利用しているのではないでしょうか。 jupyter notebookはこれがないと仕事にならないくらい強力なものですが欠点もあって、複数人で同じnotebookを共有して作業を進めていくには不向だったりします。 ということで、そんなjupyter notebookをGitを用いて管理することで、複数人で同時に分析プロジェクトを進めることを可能にする便利なツールJupytextを紹介しようと思います。 なぜJupytextなのか？ Jupytextの使い方 インストールの仕方 Jupytextの設定 ファイルの保存方法 pyファイルからnotebookを復元する Jupytextを使ってみて デメリットは対応している環境が限られていること なぜJupytextなのか？ 経験のある方もいらっしゃると思いますが、jupyter notebookが出力するipynbファイルをGitで管理しようとするとコンフリクトが頻繁に起こります。 ipynbファイルの中身は json になっていて、コード以外に メタデータ や実行結果が含まれます。それらのデータが実行される度に書き換わるので、処理内容が一緒だとしても複数箇所で異なる部分が生じてしまいます。 また、コンフリクトを解決しようとしても、 json ファイルの差異を比較するのは不可能なので人力では無理です。 Jupytextを使用すると、notebookを保存する度にipynbファイルからコード部分を抽出したpyファイルを自動で作成してくれます。そして作成されたpyファイルのみ、Git上で管理すれば競合の発生を防げるというわけです。 もちろん、ローカルにはipynbファイルが残されるので、実行結果や メタデータ はローカルにしっかりと残ります。 ファイルの復元も簡単でpullしてきたpyファイルをJupyter Notebookで読み込めば、自動でipynbファイルに復元できます。 ※jupyterを VS code で利用している場合、Jupytextは使用できません。 VS code でJupytextを適用しているnotebooのipynbファイルを開いてしまうとipynbファイルが破損します。また、jupytextが適用されていないJupyter Notebookで開いてもipynbファイルが破損するので気をつけてください。 ※この記事では、頭文字が大文字のJupyter NotebookはJupyter Project純正の実行環境を指しています。JupytextはJupyter Notebook以外にJupyter Labでも使用できるようですが、挙動は確認していないです。 Jupytextの使い方 インストールの仕方 まずは導入の仕方から。 公式のドキュメント に書いてあるようにJupytextの導入はpipもしくはcondaを用いて行います。 プロジェクトごとにJupytextの使用の有無を切り替えたい場合は、condaやpyenvを使って仮想環境に導入することをおすすめします。 pip install jupytext --upgrade または conda install jupytext -c conda-forge これだけです。 正常にインストールできていれば、次回のJupyter Notebookの起動時に、 [I 10:28:31.646 LabApp] [Jupytext Server Extension] Changing NotebookApp.contents_manager_class from LargeFileManager to jupytext.TextFileContentsManager と表示されます。 Jupytextの設定 ここまでで、すでにJupytextを使用する準備は整っていますが、後々のことを考えてJupytextの設定をしておきましょう。 Jupytextの設定方法は複数存在しますが、プロジェクト直下のフォルダ（Jupyter Notebookを立ち上げるフォルダ）にjupytext.ymlという yaml ファイルを作成しておくのが簡単な方法みたいです とりあえず、以下を設定ファイルに追加して、保存時にデフォルトで作成されるファイルのフォーマットを指定しましょう。 default_jupytext_formats: "ipynb,py:percent" ipynb はipynbファイルのことです。 py:percent を指定すると、パーセント記号2つ %% でセル間を分けた表記でコードを抽出したpyファイルを作成できます。こうしておくことで、この表記で保存しておけばもし VS code で開いてもセルごとに分割された形で表示、実行できます。 この他に、選択できるフォーマットが複数存在します。こちらの 公式ドキュメント に選択できるフォーマットの詳細が載っています。 保存ファイルのフォーマットを2つ以上選択することも可能です。 設定はJupyter Notebookを再起動すれば、この後作成するすべてのnotebookに対してこの設定が適応されます。すでに作成済みのnotebookに対しては手動で設定する必要があるので、 ツールバー からファイル→Jupyterを選択し、表示されるメニューから保存ファイルのフォーマットを選択してください。 ファイルの保存方法 通常通りnotebookを保存すれば指定された形式でファイルが保存されます。特になにかする必要はないです。 ipynb形式以外にコード部分を抽出したファイルが保存されたら、gitignoreを設定してコード部分を抽出したファイルのみが管理されるように設定します。こうすることで、Gitでjupyter notebookを安全に管理できます。 ちなみに、notebooksというフォルダ上でjupyter notebookを管理している場合、gitignoreファイルを以下のように編集すると、ipynb形式のファイルがGitの管理対象から外れます。 /notebooks/*.ipynb pyファイルからnotebookを復元する こちらも特に何もする必要性はありません。Jupytextが導入されたJupyter Notebookでコード部分が抽出されたpyファイルを開けば、notebookを復元できます。 Jupytextを使ってみて 使い始めてまだ日が浅いですが非常にいい感じに使えています。 jupyter notebookの用途的に、複数の人が1つのnotebookを分担して編集するという使い方はあまりないと思いますが、もし別々の人が1つのnotebookを編集してしまっても簡単にdiffを取ることができるので、gitでのバージョン管理は格段にやりやすくなりました。 さらに、一番恩恵を受けられるのが特にコードに変更を加えていないけどnotebookを実行した場合です。コードに変更がないなら変更を破棄してしまえばいいですが、Jupytextを使っていればそもそもコンフリクトすら生じないのでipynbファイルの差異を意識する必要性がなくなります。 デメリットは対応している環境が限られていること Jupyter Notebook以外にもjupyter notebookを実行できる環境は増えてきていますよね。自分の周りでは VS code にjupyter用の 拡張機能 を入れて利用している人が多く、最近は私も VS code で実行することが増えてきています。 ただ、冒頭でお伝えしたようにJupytextは VS code には対応しておらず、プロジェクトにJupytextを導入するにはメンバー全員にJupyter Notebookまたは、Jupyter Labを使ってもらう必要があります。 現状、Jupyter Notebookよりも VS code のほうが高機能なので、そこは残念なところですね・・・。 jupyter notebookをGitで管理しやすくしてくれるツールJupytextの紹介でした。デメリットもありますがjupyter notebookをGit上で管理している人にはmustなツールだと思います。 この記事を読んで興味が湧いた方は試しに使ってみてください。 最後に、私が所属している AIトランスフォーメーションセンターのwebサイト では、毎月2、3記事のペースでコラムを公開しています。 Kaggle MasterによるKaggleコンペのはじめ方解説や最新の論文に基づいたAIモデル構築手法の提案、さらにAIソフトウェア開発のリアルな現状など、データサイエンスやAIにまつわる様々な情報を発信していますのでぜひ閲覧ください。 それでは。 執筆： @tokuhara.hikaru 、レビュー： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの比嘉です。 それでは、今週も ブロックチェーン 週報3/23いってみようか。 NFTバブル NFTバブルのニュース NFTの発行が活発 NFTの発行が活発のニュース NFTの取り扱いを簡単にしようというソリューションが出てきた NFTの取り扱いを簡単にしようというソリューションが出てきたのニュース ブロックチェーンゲームが活発 ブロックチェーンゲームが活発のニュース NFTバブル NFTバブルの親玉とも言えるYuga LabsがCryptoPunksの 知的財産権 を取得しました。Yuga Labsは、Bored Ape Yacht Clubを作ったところです。取得金額は明らかになっていませんが、Bored ApesとCryptoPunksをあわせて、4200億円以上の価値があると言われているのでかなりの金額が動いたと思われます。 これにより、Bored Apeの持ち主はBored Apeの商用利用権を得られるようになると期待されています。 ここは、注目ポイントです。現在のBored Apeの持ち主は、高額（数億円のものもある）で落札したにもかかわらず、単に 保有 しているだけで商用利用権はないのです。これは、どのNFTでも同じです。 保有 者に商用利用権がついてくるNFTは、ごくまれです。 米ミュージシャンのス ティー ブ・アオキ氏が、過去にリリースした6枚のアルバムから得られた印税よりも、1回のNFTから得られた収入のほうが多かったという報告がありました。 10年間音楽をやってきて、これまで6枚のアルバムをリリースしたけど、 それらを全部合わせた収入よりも 去年のわずか一回のNFTドロップによる収入が上回ったんだ。 NFTの取引高は、2021年8月をピークに減少し、12月に少し盛り返しました。NFTのピークは過ぎたと言われることもありますが、ここに来てバブルな話が出てきたのは要注目です。 本当にバブルが再来しているのか、それとももう一度バブルを起こそうとして誰かが仕掛けているのか。 NFTバブルのニュース Yuga LabsがCryptoPunksのNFTコレクションの権利をクリエイターLarva Labsから取得 Bored ApesのNFTプロジェクトに公式の「ApeCoin」トークンができた プロフィール画像NFTは暗号資産アートを苦しめている スティーブ・アオキ氏「NFT収入が音楽収入を上回った」 NFTの発行が活発 最近、日本でもNFTを発行する例が増えてきました。 2021年のNFTの盛り上がりを見て、自分たちもNFTに取り組もうと思った企業が、ちょうど今ごろ発行しているのかもしれません。 NFTの発行が活発のニュース 明和町の神社で “デジタル御朱印” 配布 「LAWSON TICKET NFT」を発表--思い入れのあるイベントチケットをNFTに NFTの取り扱いを簡単にしようというソリューションが出てきた NFTを売買するには、現状だと暗号資産の知識/経験がそれなりに必要です。一般の人には敷居が高いので、できるだけ簡単にしようというソリューションが出始めてきました。 今のところ、決定的なソリューションはありませんが、NFTが普及するには解決しなければならない問題なので、引き続きウォッチする必要があります。 NFTの取り扱いを簡単にしようというソリューションが出てきたのニュース NFTマーケットプレイスnanakusaが「SBINFT」としてリニューアル。パートナーにはスプツニ子！も PPRP、国内初のNFT購入代行サービスを開始 ブロックチェーン ゲームが活発 ブロックチェーン ゲームが続々と出てきました。どれも、Play to earnが基本コンセプトです。「稼ぐために遊ぶ」ということで、ゲーム内での活動に応じて トーク ンがもらえ、その トーク ンを現金に変えることができます。 また、ゲーム内アイテムがNFTになっていて、 マーケットプレイス で売買できるようになっています。 RMT が可能になったということです。 ブロックチェーン ゲームが活発のニュース ネットマーブル、独自のブロックチェーンエコシステム「MBX」「MARBLEXウォレット」のサービス開始 HashPort、遊んで稼ぐブロックチェーンゲーム「エルフマスターズ」を6月上旬に配信 NFTは4月リリース予定のマーケットプレイス「PLT Place」で販売 XLGAMES，ブロックチェーン適用のMMORPG「ArcheWorld」を発表。7月のグローバルサービス開始を目指す 執筆： @higa （ Shodo で執筆されました ）
電通国際情報サービス 、クロス イノベーション 本部、オープン イノベーション ラボの比嘉です。 それでは、今週も ブロックチェーン 週報3/23いってみようか。 NFTバブル NFTバブルのニュース NFTの発行が活発 NFTの発行が活発のニュース NFTの取り扱いを簡単にしようというソリューションが出てきた NFTの取り扱いを簡単にしようというソリューションが出てきたのニュース ブロックチェーンゲームが活発 ブロックチェーンゲームが活発のニュース NFTバブル NFTバブルの親玉とも言えるYuga LabsがCryptoPunksの 知的財産権 を取得しました。Yuga Labsは、Bored Ape Yacht Clubを作ったところです。取得金額は明らかになっていませんが、Bored ApesとCryptoPunksをあわせて、4200億円以上の価値があると言われているのでかなりの金額が動いたと思われます。 これにより、Bored Apeの持ち主はBored Apeの商用利用権を得られるようになると期待されています。 ここは、注目ポイントです。現在のBored Apeの持ち主は、高額（数億円のものもある）で落札したにもかかわらず、単に 保有 しているだけで商用利用権はないのです。これは、どのNFTでも同じです。 保有 者に商用利用権がついてくるNFTは、ごくまれです。 米ミュージシャンのス ティー ブ・アオキ氏が、過去にリリースした6枚のアルバムから得られた印税よりも、1回のNFTから得られた収入のほうが多かったという報告がありました。 10年間音楽をやってきて、これまで6枚のアルバムをリリースしたけど、 それらを全部合わせた収入よりも 去年のわずか一回のNFTドロップによる収入が上回ったんだ。 NFTの取引高は、2021年8月をピークに減少し、12月に少し盛り返しました。NFTのピークは過ぎたと言われることもありますが、ここに来てバブルな話が出てきたのは要注目です。 本当にバブルが再来しているのか、それとももう一度バブルを起こそうとして誰かが仕掛けているのか。 NFTバブルのニュース Yuga LabsがCryptoPunksのNFTコレクションの権利をクリエイターLarva Labsから取得 Bored ApesのNFTプロジェクトに公式の「ApeCoin」トークンができた プロフィール画像NFTは暗号資産アートを苦しめている スティーブ・アオキ氏「NFT収入が音楽収入を上回った」 NFTの発行が活発 最近、日本でもNFTを発行する例が増えてきました。 2021年のNFTの盛り上がりを見て、自分たちもNFTに取り組もうと思った企業が、ちょうど今ごろ発行しているのかもしれません。 NFTの発行が活発のニュース 明和町の神社で “デジタル御朱印” 配布 「LAWSON TICKET NFT」を発表--思い入れのあるイベントチケットをNFTに NFTの取り扱いを簡単にしようというソリューションが出てきた NFTを売買するには、現状だと暗号資産の知識/経験がそれなりに必要です。一般の人には敷居が高いので、できるだけ簡単にしようというソリューションが出始めてきました。 今のところ、決定的なソリューションはありませんが、NFTが普及するには解決しなければならない問題なので、引き続きウォッチする必要があります。 NFTの取り扱いを簡単にしようというソリューションが出てきたのニュース NFTマーケットプレイスnanakusaが「SBINFT」としてリニューアル。パートナーにはスプツニ子！も PPRP、国内初のNFT購入代行サービスを開始 ブロックチェーン ゲームが活発 ブロックチェーン ゲームが続々と出てきました。どれも、Play to earnが基本コンセプトです。「稼ぐために遊ぶ」ということで、ゲーム内での活動に応じて トーク ンがもらえ、その トーク ンを現金に変えることができます。 また、ゲーム内アイテムがNFTになっていて、 マーケットプレイス で売買できるようになっています。 RMT が可能になったということです。 ブロックチェーン ゲームが活発のニュース ネットマーブル、独自のブロックチェーンエコシステム「MBX」「MARBLEXウォレット」のサービス開始 HashPort、遊んで稼ぐブロックチェーンゲーム「エルフマスターズ」を6月上旬に配信 NFTは4月リリース予定のマーケットプレイス「PLT Place」で販売 XLGAMES，ブロックチェーン適用のMMORPG「ArcheWorld」を発表。7月のグローバルサービス開始を目指す 執筆： @higa （ Shodo で執筆されました ）