VSCode で React + Vite 環境に Tailwind CSS を導入して自動整形させてみた | DevelopersIO
Tailwind CSS を使っていると、class の書き順がバラバラになったり、冗長な class が増えたりなどの問題が起きてしまいました。 そこで VSCode で Tailwind CSS の自動整形をやってみました！ 環境 "react": "^18.2.0", "vite": "^5.0.0" "tailwindcss": "^3.3.6", "prettier": "^3.1.0", "eslint-plugin-tailwindcss": "^3.13.0", React + Vite の環境構築 まずは、React + Vite の環境を構築します。 npm create vite@latest my-app -- --template react-ts cd my-app npm install Tailwind CSS を導入 次に、Tailwind CSS を導入
mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsのアプリケーション開発をしている際に、HTTPSでアクセスしたいことはないでしょうか？私はあります。 ということで、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。 前提 OS環境としては、MacOSで検証を行っています。 mkcert について mkcertはローカル開発環境に信頼された証明書を作成できるツールです。 今回はこちらを利用して証明書を発行してみます。 インストール インストールはMacOSの場合brewコマンドで簡単にインストールすることができます。なお、MacOS以外についてもREADMEにインストール方法が記載されています。 % brew install mkcert ==> Fetching mkcert ==>
GitHub Trendingを毎日見てると同じリポジトリが頻繁に出るので、まだ見たことないリポジトリだけ表示されるビューワーを作った | DevelopersIO
GitHub Trendingでは特定のリポジトリが流行ると数日ずっとTrendingに乗っていたり、有名どころのリポジトリが頻繁にTrendingに乗っていたりします。 トレンドを知りたい、という意味ではそれで問題ないのですが、個人的には「最近流行ったやつの中で自分がまだ見たことないやつ」を見たいなーと思っていたので、見たことあるやつは表示されなくていいやという気持ちがありました。 なので、ビューワーを作りました。 inabajunmr/treview 何ができるのか 基本的にはただのGitHub Trendingのビューアーなのですが、以下のような特徴があります。 自分の興味のあるプログラミング言語を保存しておいて、すぐに1ページでまとめて参照できる 一度も表示したことのないリポジトリだけにフィルターできる 大雑把に以下の雰囲気で動作します。 使い方 GUIは現在macOSのみに対応し
【コンテナ技術入門】コンテナ要素技術をDocker使わずに基礎から手を動かして学べる超有用なテキスト #dockerTokyo | DevelopersIO
「Dockerって、結局中でなにやってんの？」 先日、以下のミートアップに参加して、LT登壇してきました。 Docker Meetup Tokyo #31 (初心者歓迎LT祭り＋KubeConCN報告) 自分はLTの一番手として、「雰囲気でコンテナ使っている 全ての人が読むべき 「コンテナ技術入門」の紹介」で喋ってきたので、それの登壇報告となります。 「コンテナ技術入門」は、Dockerコマンド一通り使えるようになってきたけど、もっとDockerやコンテナについて深く知っておきたいという方にはむちゃくちゃ有用なコンテンツなので、一度目を通して、実際に手を動かして試してみることをオススメします。 （祭） ∧ ∧ Y ( ﾟДﾟ) Φ[_ｿ__ｙ_l〉 ｺﾝﾃﾅﾏﾂﾘﾀﾞﾜｯｼｮｲ |_|＿| し'´Ｊ 講演概要 当日のセッションスライドはこちら。 この記事では、LTという時間枠の中
コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた | DevelopersIO
はじめに スマホアプリやWebアプリで、ボタンなどのUIを作る場合を考えます。例えばボタンの色と、その上の"OK"などのテキストの色を決める際に注意すべき点を紹介します。UIだけでなく、ドキュメントの図やプレゼン資料など、色を使う全ての場面に使えます。 例えば、スマホアプリに次のようなボタンがあるとします。 こういう配色のボタン、よく見ますよね。ところが、このボタンは背景の黄緑色と「今すぐ購入」のフォントの白の「コントラスト比」が低い、つまり「色の明るさの差」が少ないので、「文字が薄くて読めない」と感じるユーザーが存在します。 人間の色の感じ方はみな同じではなく、遺伝子の状況や疾患などによって異なります。例えば、正常とされる人とは異なった色に見えたり感じたりする「先天性色覚異常」は、日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、男性ではAB型の血液
書評「入門 監視」雰囲気で監視をやっているすべての人にオススメ | DevelopersIO
監視という一種マニアックな領域を真正面から解説した貴重な本です。監視で悩む人のみならずシステム開発に携わるすべての人にオススメ。 「全然わからない。俺たちは雰囲気で監視をやっている」 自分はAWS事業本部コンサルティング部所属ということもあって、いろんなお客様にAWSインフラのコンサルティングしてます。最初のインフラ構成設計時に監視の話をすることも非常に多いんですが、 「どうしましょう。CloudWatchでいけますかね？」 「MackerelとかDatadogとかもありますが、どうしましょ。マネージドとの違いは〜」 「とりあえず、ディスク使用率80%でしきい値設定しておきましょうか。みんなそうしてますよ」 とか言っていた昔の自分に見せつけたい本、それが今回紹介する「入門 監視」。 監視設計の原則がよくわかんない メトリクスのしきい値決めるところから監視を考えてしまいがち よく考えずに、い
新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent | DevelopersIO
突如として我々の目の前にAWS Amplify Consoleが登場！ re:Invent 2018の初夜、早速AWSの各サービスのアップデートが届きました。 モバイル・Webアプリ関連では AWS Amplify Console なるものが登場！ AWS Amplify Console 早速触ってみました。 AWS Amplify Consoleとは？ AWS Amplify Consoleは簡単に言うと Webアプリを公開する環境を超簡単にセットアップできるサービス です。 Management Console上から、AWSを利用したWebアプリを作る上では欠かせないライブラリ「AWS Amplify」を組み込んだWebアプリを、構築、ビルド、リリースできます。 サーバーレスをバックエンドにしたスケーラブルな静的Webアプリをホスティング グローバル対応 簡単なドメインセットアップ シ
WebサイトのGDPR対応用パッケージを作ったので、GDPR準拠のランディングページを作ってみた | DevelopersIO
GDPRの施行が迫る中、いくつかの著名サービスがGDPRの趣旨を正しくとらえずに回避する手法で不誠実に対応していると批判されています。 例えばTwitterは、広くソーシャルログインを提供しているにも関わらずユーザーのローカルストレージの使用に選択権を与えず、複雑なプライバシーポリシー文書とともに「嫌なら見るな」「見ているということは合意したことだ」という旧態然とした運用を行なっているためこの批判を浴びています。 ドイツおよびヨーロッパのデータ保護やセキュリティ標準を多く作り出してきた DSK: Datenschutzkonferenz は、今年4月にWebトラッキングはオプトアウトではなく明確にオプトインで実装せよと声明を出しています。 9. Es bedarf jedenfalls einer vorherigen Einwilligung beim Einsatz von Track
Rails開発でWebMockを使ってAPIアクセスをスタブ化する | DevelopersIO
外部API呼び出しのあるアプリケーションを開発する場合、テストやローカル環境での動作確認まで本物のAPIを呼び出していると、時間がかかり開発の生産性が下がるのでAPIモックを使いたくなります。 そこでWebMockというGemを使うと、外部へのHTTPリクエストをスタブ化してくれるので、開発が非常にやりやすくなります。 今回はRailsアプリケーションでのWebMockの使い方を説明します。 インストール方法 Gemfileに書いてbundlerでインストールします。 gem 'webmock' bundle install --path vendor/bundle 設定方法 事前に自分の欲しいレスポンスを返却できるようにスタブを登録します。 (ここではレスポンスデータを事前に作成して、そのファイルを読み込むように指定しています) require 'webmock' WebMock.ena
[小ネタ] mkdir したディレクトリに cd する方法 9 選 +1 (BASH) ※追記あり | DevelopersIO
$ mkdir /very/_very/Very-long/directory_name/20170915 なんて操作をしたあと、そのディレクトリにcdしたい場合ってまれによくありますよね。 どんなやり方があるか考えてみました。 1. コピペする そのまんまですが、これをやりたくなくてこの blog を書いてます。 2. TAB 補完で頑張る これも無いわけではないですが、間違えたりすることを考えると正直あんまりやりたくないです。 3. 上矢印キーで前コマンドを呼び出し、右矢印キーで先頭に戻ってmkdirをcdに書き直す よく見る方法ですが、もうすこし少ない手数でできないでしょうか。 4. 上矢印キーで前コマンドを呼び出し、Ctrl-Aで先頭に戻ってCtrl-Dx5 のあとにcd BASH のキーバインドはデフォルトだと emacs モードなので、このやり方が出来ます。 でもまだちょっと手
![[小ネタ] mkdir したディレクトリに cd する方法 9 選 +1 (BASH) ※追記あり | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7b8c53126aa60512b58b0d0cce02a7b7a36ab4/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2017%2F09%2Feyecatch-bash.jpg)
node.jsのいろいろなモジュール14 – node-cronでcron的にプログラムを実行する | DevelopersIO
cronをnode.jsで実行 指定した日時や定期的に実行したいスクリプトがある場合、UNIX系OSの場合はcronを使用することが多いとおもいます。 cronとは、スクリプトを自動実行するためのデーモンプロセスで、crontabファイルに特定の書式で記述をすることにより、 指定した日時/定期日時にプログラムを実行することができます。 今回紹介するcronモジュールは、node.jsプログラム内で任意の処理をcrontabと同じ書式を使って記述することができます。 ではモジュールのインストールからサンプル作成をやってみましょう。 環境構築 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 適当なディレクトリを作成し、そこでnpmを使用してインストールしましょう。 % mkdir cron % cd
Sinatraで簡易APIサーバーを作ってみた | DevelopersIO
はじめに 最近、RubyでAPIサーバーの処理を記述する案件が多い、t.hondaです。Rubyでサーバー側の処理を記述すると言えばRuby on Railsを思い浮かべることが多いと思いますが、今回は別の選択肢となるSinatraを紹介したいと思います。 Sinatraについて Sinatraについては、公式ページに以下のような記述があります。 Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort: Sinatra - Getting Started より 超訳すると「SinatraはRubyで最小限の労力で素早くWebアプリケーションを作るためのドメイン固有言語」という感じになるでしょうか・・・。この「ドメイン固有言語」であることが、Sinatraの特徴と言えると思います。こ
CloudFront + S3 によるCDN (Cache Distribution パターン) 構築手順 | DevelopersIO
渡辺です。 4月でも札幌は雪が降りますが、異常気象でもなんでもなく平常運転です。 今日は、いわゆるCache Distribution パターンでのCDN構築手順をまとめておきます。 CloudFrontの細かい設定は行いません。 S3を静的サイトホスティングで公開し、CloudFrontをキャッシュサーバとして設定し、独自ドメインで公開します。 構築手順 構築は以下の手順で行います。 S3バケットを作成し、静的サイトホスティングで公開する CloudFrontを作成し、オリジンにS3バケットを設定し、代替ドメインを設定する Route53に代替ドメインのCNAMEレコードを追加する S3バケットの設定 S3バケットを作成し、静的サイトホスティングで公開します。 S3バケット名は、最終的に公開するドメインとするのが無難でしょう（例: cdn.example.com）。 バケットを作成したな
【社内資料公開】運用手順書を作る時のポイントについて書いてみた | DevelopersIO
はじめに こんにちは植木和樹＠上越妙高オフィスです。本日は私がここ10年くらい意識している運用手順書を書くときのポイントについてまとめてみました。 対象読者 開発・構築したシステムを別の人に引き継ぐ予定のある人 他の人が作ったシステムを引き継ぐ担当の人 半年後の自分でも分かる手順書の書き方に困っている人 （この記事を読むのにかかる時間の目安：5分） 1. ドキュメントの冒頭に書くこと まず個々の詳細手順の前に、ドキュメント自体について記載してもらいたいことです。 1.1. ドキュメントに書かれていることを3行で書く ドキュメントの最初には、このドキュメントに何が書かれているのかを100文字くらいで書いておくと良いでしょう。 システムが増えれば増えるほど手順書も増えていくものです。見つけたドキュメントに自分の期待するものが書かれているのか、冒頭数行でわかるようになっているとうれしいです。 1
【メモ】githubの複数アカウントにSSH接続するための設定手順 | DevelopersIO
すでにGitとgithubアカウント（以降メインアカウントとする）を設定済みという前提で別のgithubアカウント（以降サブアカウントとする）を設定したいという場合があります。例えば仕事用のgithubアカウントとは別にプライベート用のアカウントに接続したい、案件毎に接続先を変える必要があるなどでしょうか。 すでに色々なブログで書かれていますが、具体的な手順を社内のあるメンバーに共有する必要があったので設定の手順をメモとして残しておきたいと思います。 github以外に接続する場合でも基本的には同じ手順になります。 まだgithubの設定を行っていないという方はこちらの「Set up git」の手順を進めてください。SSH Keyの生成はこちら「Generating SSH Keys」です。 また、そもそもGitって何？という方はこちら「サルでもわかるGit入門」をどうぞ。 この記事の解説
【Middleman】Tokyo Middleman Meetup #2 でLTさせていただきました。 | DevelopersIO
はじめに こんにちは、清田です。 2014年5月16日(金)に開催されたTokyo Middleman Meetup #2に参加してきました。 今回はMiddlemanの開発者でもある、Thoms Reynoldsさんが来日されるとのことで、すごく楽しみにしていました。 プロローグ その前に、今回のTokyo Middleman Meetup #2に参加にあたり、本来弊社で筆頭のMiddleman使いは山田先輩ですが、今回は予定があわず自分が参加させていただくととなりました。 山田さん、Tokyo Middleman Meetup #2が開催されるそうですよ。 何？めっさ行きたい!いつやるの？ ５月16日(金)の19:00みたいなんですが、もう定員いっぱいなんすよ。。。残念。。。 俺その日、私用で無理だわ。ん？ちょっとまて、LT募集してるよ？良い経験だ登壇してきなはれ ...? 大丈夫、M
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
【Fontello】アイコンを選んでWebフォント化してくれるジェネレータ | DevelopersIO
SIL Open Font License (OFL) 参考URL : SIL Open Font License (SILオープンフォントライセンス) CC BY 参考URL : 表示 3.0 非移植 (CC BY 3.0)ク CC BY-SA 参考URL : Creative Commons — 表示 - 継承 3.0 非移植 MIT 参考URL : MIT License - ウィキペディア BSD 参考URL : BSDライセンス - ウィキペディア Webフォントアイコンを選んでみる。 http://fontello.com/ それでは、実際に上記サイトへアクセスして使用してみたいと思います。 サイトへ行くと沢山のWebフォントアイコンが用意されています。 Webフォントアイコンの選択 今回は、Webフォントアイコンで有名なFont Awesomeを使ってみたいと思います。 Fo
SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1 | DevelopersIO
こんにちは山形です。 htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。 DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。 Rubyをインストールする Windowsの場合 Engineyard社が提供しているRailsinstallerでサクッと入れてしまいましょう。 Railsinstallerはこちらからダウンロード出来ます ダウンロードできたらexeを起動しウィザードに従ってインストールを実行してください。 Mac OS Xの場合 rbenvでのインストールを紹介します。 先にXcode Command line Toolsのインストールを済ませておいてください。 Xcodeの環境設定からインストールできます。 # rbenvをgithubから
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
