Notion で2024年のダッシュボード作ってみた | DevelopersIO
こんにちは。AWS 事業本部 オペレーション部 アカウントチームの chicca です。 一年の計は元旦にありということでタスク管理用のダッシュボードを作ってみました。 作ってみたといっても、You Tube 観てテンプレートをささっとコピペしてきただけです。 まずはこの動画をみた ダッシュボードの作成にあたり sum さんの動画を視聴しました。 概要欄に掲載されているテンプレートを複製して、動画をみながら自分用のダッシュボードを作成しています。 動画を観てから続きを読んでもらえるとわかりやすいと思います。 実際に作成したダッシュボード テンプレートを複製して自分用に作ったものがこちらです。 大きく3つのパートに分かれています。 ①：カテゴリ 各カテゴリごとに子ページを作成しています。子ページには自分用に情報を書いていきます。 ②：to do ダッシュボードの中でメインに使うパートです。
[ChatGPT API][AWSサーバーレス]ChatGPT APIであなたとの会話・文脈を覚えてくれるLINEボットを作る方法まとめ | DevelopersIO
シークレット類の取り扱い シークレットやAPIキーをソースコードにハードコードするのはあまり良くない習慣です。 [レポート][GitGuardian]ハードコードされたシークレットに対応することはなぜ急務なのか？ – CODE BLUE 2022 #codeblue_jp | DevelopersIO これらの値は環境変数経由で読み込ませるのが良いでしょう。今回はSSMパラメータストアに値を手動でセットし、それをCDKデプロイ実行時に読み取ってLambda環境変数にセットするようにします。 ちなみにパラメータストアやSecretsManagerから直接読み込む方法もあるようです。 [アップデート] Lambdaから直接Parameter Store/Secrets Managerから値を取得できるようになりました！ | DevelopersIO Lambda関数とAPIGateway Re
![[ChatGPT API][AWSサーバーレス]ChatGPT APIであなたとの会話・文脈を覚えてくれるLINEボットを作る方法まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/282fb3217ad4059f9bd0462360450c5018904535/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Fline-eyecatch.jpg)
Flutterでdotenvを利用して環境変数を管理する方法 | DevelopersIO
dotenvをインストール flutter_dotenvのパッケージをインストールします。 flutter pub add flutter_dotenv .envファイルを作成 環境変数を管理するためのファイルを作成します。 .env VAR_NAME ="dummyValue" ファイルをgitで管理しない場合は.gitignoreに追加しておきます。 .gitignore 〜〜〜 .env .envファイルをアセットに追加 Flutterアプリからファイルを読み込めるようにするために、pubspec.yamlのassetsへ.envファイルを追加します。 pubspec.yaml assets: - .env 環境変数を読み込み .envファイルをFlutterアプリで読み込みます。 lib/main.dart import 'package:flutter_dotenv/flutte
Notionでの「カラムレイアウト」作成がスラッシュコマンドで超簡単に出来るようになりました！ #notion | DevelopersIO
Webページデザインにおいて「マルチカラムレイアウト」は良く利用されるかと思いますが、Notionでも(Notionの仕組みを利用して)この「カラムレイアウト」を実現することが出来ます。 WEBデザインでよく聞く「カラム」について デザイン-新潟のホームページ制作会社 (株)アテンド 情報量が多いサイトにおすすめ 最新版マルチカラムレイアウト | ウェブラボ（株）スタッフブログ 任意のブロック(空でも何か入っていても大丈夫です)を複数用意し、 そのうちの一つをドラッグして横に持っていくことで ブロックの境界線(？)が横に表示されるようになります。このタイミングでドロップすると ブロックを横に配置されるようになり、カラムレイアウトの下地が出来ました。 ただこのケースの場合、上記のような操作をしなければならないのでちょっと面倒ではあります。 若干の手間を感じていながらも、この手法を使ってページ
Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
Notionを快適に使うには必須かもしれない拡張「Notion Boost」を導入してみた | DevelopersIO
Notionでの編集でちょくちょくとストレスを感じるシーンがありました。何か対策が取れないものかと設定を確認したものの、特に変更はできず。そこで拡張をストアで検索してみたところ、まさにそのものといった拡張がありました。 上記の様に色々と機能はあるのですが、とくにイチオシな機能を紹介します。 OUTLINEの表示 Headerを使っている場合、右上にToCが表示されるようになります。勿論単なる表示ではなく、該当する目次をクリックすることでジャンプします。 スペースでスラッシュコマンドをキャンセル スラッシュを単体で入力したい時にはとても役立ちます。 オフ オン うっかりを防止するためにはとても有効です。 テーブル内コンテンツをプレビューなしで開く 標準では「ページとして開く」のステップをはさみますが、これを挟まなくなります。 ページとして開いて編集したい場合は1ステップ挟まなくなるためとても
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
クラスメソッドが抱えていた組織の悩みを解決したProflly | DevelopersIO
2014年から10倍に拡大したクラスメソッド。私達は急成長する中でいくつもの悩みや課題を抱えてきました。本記事では私達が抱えていた組織の悩みをお伝えし、またその解決策として私達が開発しているProfllyというサービスをご紹介します。 はじめに 私がクラスメソッドに入社したのは2014年1月。当時は社員数も50人程度で、オフィスは東京にしか無く、和気あいあいと仕事していました。しかしその後組織は急成長。2017年末には100人、2019年頭には200人と急増しました。現在では日本本社だけで350人、グループ全体で500人弱と、2014年から比べて10倍に成長しています。 多くの企業が経験することだと思いますが、クラスメソッドも急成長する中でいくつもの悩みや課題を抱えてきました。本記事では私達が抱えていた組織の悩みをお伝えし、またその解決策として私達が開発しているProfllyというサービス
NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO
最近話題のVercelを試してみました。競合のNetlifyと同様に、ビルドとホスティング他をまとめてやってくれます。Netlifyと比べて1人で開発をするならほぼフル機能が使えますし、無料プランのままでも100回/日までデプロイできるのが利点です。 前提 Next.jsと親和性の高いVercelですが、今回アプリはGatsby + Contentfulで構築しています。 詳しくは過去に書いた記事がありますので、下記の「1. Contentfulの準備」「2. Gatsbyアプリの立ち上げ」を参考にしてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Githubリポジトリを作成し、masterにソースコードをプッシュしておきます。 Vercelにアプリをデプロイする https://vercel.comにアクセスし、「Sta
レビューしやすいプルリクエスト | DevelopersIO
普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 割と大きめなソースコードに対するレビューの話が主となります。 ざっくりまとめ 本記事では以下のようなトピックについて記載しています。 差分の目的が1つ レビューをしながら「私はいま何のレビューをしているのか」のコンテキストスイッチが発生しないので嬉しい 何を達成したいのかがわかる レビューの多くは「やりたいこと」と「実現方法」のすり合わせなので、前者の精度を上げたい 分割されすぎていない 他のコードとの関連性や構造についてのレビューがしやすい レビューの強弱をつけるための情報がついている 機械的な変換の差分だったりした場合、それが事前にわかると嬉しい 検証結果が書いてある コードだ
【必見！】TOEIC 910点の英語の勉強ノウハウ本格公開 | DevelopersIO
こんにちは！コンサルティング部のキムです！:D 今回は私が今までどうやって英語の勉強をしていたのかについて、ざっくりまとめて共有したいと思いました。 韓国ではTOEICの点数だけで言えば TOEIC910点ってあまり高い点数ではありません。ですが、それは韓国人が日本人に比べて英語が上手だからというわけではないです。 ただ、韓国ではTOEICやTOEFLみたいな英語試験対策の為の塾が圧倒的に多く、その辺りのビジネスも凄く発達していて、 世界のどこよりも効率的にそのテストの点数向上に最適化されているためです。 つまりTOEIC点数が高くても、英語が上手じゃない人もいます。（点数が高い人は英語力が高い傾向性は当然ありますが） 私は韓国で大学を卒業し、大学院でも1年間修士課程の勉強をしましたが、 韓国語ではなく英語で全ての講座、テスト、課題等をやってましたので、最初は本当に辛かったです。 なぜなら
Flaskのローカル開発環境を構築してみた | DevelopersIO
こんにちは。プロダクトグループの坂井です。 Pythonのフレームワークの一つであるFlaskを使う機会がありましたので、まずはローカル開発環境をDockerで構築してみました。 作業環境 macOS Mojave 10.14.6 Docker 19.03.1 Docker Compose 1.24.1 Dockerのインストールについては割愛します。 構築するローカル開発環境 Python 3.7.4 Flask 1.1.1 さっそく構築 Pythonの公式イメージがDocker Hubにありますので、公式イメージを利用してコンテナを作成します。 Dockerfile FROM python:3.7.4 ARG project_directory WORKDIR $project_directory RUN pip install flask 6行目で最新バージョン1のFlaskをインス
Xcodeの面倒なキャッシュ削除をGUIで行えるMacアプリ『DevCleaner for Xcode』 | DevelopersIO
Xcodeは使用していると開発速度向上を目的としたキャッシュデータを大量に蓄積していきます。開発をしているとそのようなデータを消したくなる時があります。 Xcodeは〜/ Developerフォルダにキャッシュファイルやシンボルを格納していきます。 ディレクトリの場所は決まっているので手動かスクリプトで削除することが多いと思います。今日iOSやFlutterの情報を発信しておられる@_monoさんがそのような内部データをGUIで削除できるアプリケーションを紹介しておられました。 素晴らしいツールを手に入れた( ´･‿･｀) > There’s a great tool called DevCleaner which will easily delete up to 20GB of unused data for you. This is how it looked for me after
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
Amazon CloudFrontとEC2(Nginx)で作る国・地域対応Webサイト構築 | DevelopersIO
ども、大瀧です。 CloudFrontによるグローバル対応サイトの構築は、横田の以前のエントリーでRoute 53と組み合わせを紹介済みですが、Route 53のレイテンシーレコードはAWSのリージョンごとの区分けなので、「日本」向けや「台湾」向けなど特定の国や地域別にコンテンツを区別する用途には向いていません。 そこで今回は、7月にリリースされたCloudFrontのジオターゲティング機能を利用して、国・地域に対応するWebサイトを構築してみます。まずは構成図をどーんと。 CloudFrontのジオターゲティングは国・地域の地理データベースとクライアントの接続元IP照合するのですが、その結果をオリジンに転送するHTTPリクエストのヘッダに付与します。国・地域によってオリジンを振り分ける機能ではありませんので、CloudFrontのジオターゲティングによって付与されたHTTPヘッダを解釈す
[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO
Material design with Polymer Google I/O 2014 で発表になった「Material Design」ですが、Web の場合は Polymer で提供されています。Polymer は Web Components を使ったフロントエンドフレームワークです。昨年の Google I/O で発表されました。 ということで、リファレンスを参考に Polymer を使って Material Design の Web ページ制作を試してみたいと思います。 デモで Material Design の世界を体験してみよう その前に、Material Design でどのような Web ページが作れるのか、デモの Web ページが公開されているので、ちょっと触ってみましょう。以下の 3 つのデモが公開されています。 Topeka (クイズアプリ) Paper Eleme
![[Polymer] Material Design を使った Web ページを作ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/72ef0cd6f2febb767fc5805699941053937cbb1b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F06%2Fpolymer.png)
「深津貴之氏に学ぶ、スマホUI/UX講座 〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO
「デザイン = かっこ良くすること」だとは限らない。 デザインとは? 設計 複雑な問題を整理して解決すること わりとエンジニアリングに近い 文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。 ヒューマンインターフェースの原則 インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡し ヒューマンインターフェース = 人とモノをつなぐもの ヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル 機能と外見が調和しているか？ TPOにあわせた格好をさせる ユーザーとコミュニケーションを取る ドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。 とっつきやすくなる 2.一貫性 アプリ全体でル
[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ | DevelopersIO
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています（※拡張子はerb）。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERｂ のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
Hamlで開発効率アップ｜Sublime text 2でビルドしてみました。 | DevelopersIO
先日、弊社で開催ししている勉強会:【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」のスピーカーを務めさせていただきました。 人生初のスピーカーということで、緊張して時間を10分巻いてしまいました。。。 さて今回はHaml with Sublime text 2と題しまして、ご紹介できればと思います。 アジェンダ Hamlとは？ Hamlの書き方 Sublime text 2でビルド(ファイル出力) おまけ Hamlとは？ XHTML Abstraction Markup Languageの略称です。 と言われましてもなんのことだ？？ってなるかと思います。 日本Hamlの会というユーザーグループで以下のように、説明しれくれてます。 HamlはHTML/XHTMLを生成するためのマークアップ言語です。インデントや簡略構文によって簡潔な記述
Sublime Text 2の基本とカスタマイズ【Vim風】
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！ Sublime Text 2は有料（$59）の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
