【Next.js】さくらのレンタルサーバーへのデプロイを自動化する（GitHub Actions）
やりたいこと Next.jsで作成したwebサイト（SSG）を、さくらのレンタルサーバーにデプロイする作業を自動化する。 自動デプロイのタイミングは 手動でボタンを押す mainブランチへのマージ（厳密にはmainにpushされたとき） 環境 yarn 4.1.1 Next.js 14.1.0 App Routerを利用 Static Exportsを使い、静的サイトを生成 手順の流れ Next.jsのSSG設定を行う GitHub Actionsのymlを作成する レンタルサーバーにFTP接続するためのSecretsを設定する レンタルサーバー側のIPアドレス制限を解除する ①まずはNext.js側の設定 Static Exportsの機能を利用するためには、next.config.jsの修正が必要。 next.config.jsを以下のように修正する。 /** * @type {imp
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
1行もコードを書かずに画像生成AIツール作ってみた - Qiita
以下のXを見て、早速「Create」を試してみたので、実際に使った所感をまとめます AIがリアルタイムでWebページを作ってくれる神サイト ㅤ 会話だけで、理想のUIを実現することが可能 ㅤ 使い方・活用法をツリーにまとめます！ ㅤ ブックマーク保存をおすすめします↓ pic.twitter.com/J1cJkUkyO8 — すぐる | ChatGPTガチ勢 𝕏 (@SuguruKun_ai) March 25, 2024 一言で言うとヤバいです... 詳細は以下のサイトでも解説しています Createとは Create 公式サイト Createは、1行のコードを書かなくても自然言語を使って、高度なAIを搭載したアプリやツールが作成できる生成AI搭載のノーコードツールです。 エンジニアでなくともChatGPT APIやStable Diffusion APIを組み込んだアプリが簡単に作れ
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力することが可能です。 なぜLogpointsを使うの？ Logpoints を使うのには以下のメリットがあります。 デバッグや動作確認のためにコードを変更する必要が無い console.log() を誤ってcommitに含めてしまう心配が無い console.log() を入れた後に再ビルドやホットリロードを待つ必要が無い どうやってLogpointsを使うの？ logpoints は以下のように使用します。 Chr
ブラウザでCORSを無効化する方法 - Qiita
警告 本記事に記載している内容はCORSだけでなく、ブラウザの様々なセキュリティ機能を無効化する危険な行為です。 今すぐにセキュリティを無効化しないといけない事情がある場合を除いて安易に実施しないでください。セキュリティを無効化した状態でのインターネット接続など言語道断です。 上記内容、そして本記事に記載している行為を理解している方のみ自己責任でお願いします。 Google Chrome 以下のコマンドでChromeを起動する。--user-data-dirを指定しないと既存の設定でChromeが起動し、セキュリティは有効のままだった。 不要になったらここで作成したデータディレクトリは消せばよい。 <Chrome実行ファイル> --disable-web-security --user-data-dir=<データディレクトリ>
なぜ抽象クラス(Abstract)を実装するのか - Qiita
抽象クラスを実装するメリットがいまいちよくわからなかったので、抽象クラスとは何か、どんな意図で（どんなメリットがあって）抽象クラスを実装するのかをまとめました。 本記事の内容 抽象クラスとは 抽象クラスを実装すると何が嬉しいのか Template Methodパターン（抽象クラスが用いられるデザインパターン） Template Methodパターンの実装例 抽象クラス（AbstractClass）とは 抽象クラスとは、抽象メソッドを１つ以上持つクラスです。 抽象クラスは、自身だけでは意味をもたず、サブクラスに継承されることで初めて機能します。 上記のように、abstractの後に、戻り値の型、メソッド名、引数の型、引数の数のみを定義し、実装を持たないのが抽象メソッドです。具体的な実装は、この抽象クラスを継承するサブクラスで実装されます。 抽象クラスの特徴 抽象クラスを継承したサブクラスは、
DAOとかDTOとかVOとかEntityとか
Strutsを使っていたときにこのへんすごく迷った。SAStrutsでもでてきたのであらためて調べ直しておさらいしてみる。 VO vs DTO vs DAO vs Entity VOは不変でなければならないので、MVC間でやりとりされるオブジェクトは、DTOといったほうがいいらしい（参考：OZACC.blog: VOとDTOの違い）。 WikipediaのDTOをみると「過去、VOとも呼ばれていた」とある。よって、藤原はVOをもう使わないようにします（会社で使ってるな・・・）。 DAOはSelectとかInsertとか、DBにアクセスしてくれる人のこと。結果としてEntityを返してくれたりする。 Entityはレコードを表現する。DTO（VO）っぽいけど、DAOみたいなこともしやがるらしい（参考：DAOとかVOとかDTOとか – 人生全て暇つぶし） DTOは、EntityからDTOが作ら
VO, DTO, POSO, DAO, Entity の違い - Qiita
はじめに try! Swift ではじめてDTO、POSOという言葉を聞いて、Entityとの違いとかよくわからなかったので調べてみた。 すると、類似の用語が5つでてきた。 VO (Value Object) DTO (Data Transfer Object) POSO (Plain Old Swift Object) JavaだとPOJO (Plain Old Java Object) DAO (Data Access Object) Entity いずれもシンプルに関連するデータをまとめたobjectだが、微妙に性質が異なる。 VO (Value Object) getterのみ 不変 DTO (Data Transfer Object) VO + setter 可変。外から変更可能 異なるレイヤー間（モデル層、ビュー層など）でデータを受け渡すのに使う POSO (Plain Old
【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々
柔軟性と拡張性の両立––LINEのデザインシステム構築における、フロントエンドエンジニアたちの挑戦
柔軟性と拡張性の両立 LINEのデザインシステム構築における、フロントエンドエンジニアたちの挑戦 デザインシステムにおけるフロントエンド #2/2 2019年11月20、21日の2日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2019」が開催されました。1日目は「Engineering」をテーマに、LINEの技術の深堀りを、2日目は「Production」をテーマに、Web開発技術やUI/UX、プロジェクトマネジメントなど、より実践的な内容についてたくさんのプレゼンテーションが行われました。「デザインシステムにおけるフロントエンド」に登壇したのはLINE Front-end Standardizationチーム Front-end Engineerの岡崎晶彦氏。LINEはなぜデザインシステムを必要としたのか？ どのようにデザイ
要件定義～システム設計ができる人材になれる記事 - Qiita
はじめに 株式会社デジサク がお送りするプログラミング記事、 今回は要件定義・システム設計について扱っていこうと思います。 プログラミングを勉強していて、こんな事を感じた経験はないでしょうか。 「勉強してもプロダクトが作れない」 「そもそも開発ってどうやるの？」 「要件定義ってなに？」 その悩みを解決するために、まずは開発の全体感を理解しましょう。 下図『ソフトウェア開発プロセス』をご覧ください いつも勉強しているプログラミングは 『実装』 の部分に該当します。 つまり、プログラミングの実力を発揮する前に４つも壁が存在するのです。 そのため、本記事では実装（プログラミング）を開始する前に必要となる、 『企画～設計』 について順を追って説明して行きます。 特に、エンジニアが理解しておくべき 『要件定義』『設計』 にフォーカスします。 なお、開発全体において実装（プログラミング）に使用する時間
Flutterで社員研修用のアプリを作った話 - pixiv inside
みなさんはじめまして。初めてじゃない方はお久しぶりです。ピクシブでAndroidアプリエンジニアをしておりますconsommeです。 ピクシブでは基本的に年一回、社員同士の交流を深めるという目的のもと、社員研修を開催しています。2018年は2泊3日の沖縄研修が計画されました。そのなかで研修運営チームから「社員研修で使うアプリを作れないか？」という相談を受けました。 研修中は基本的にチーム行動になるので、自分のチーム以外の人が何をしているかがわかりづらい。それなら各自で研修中に撮った写真を共有して、みんなで楽しめれば社員同士の交流につながるのではないか、そのためのアプリが欲しい、とのこと。 そう言われるとアプリエンジニアとしては作らないという選択肢はありません。ぜひやりましょう、ということで、社員研修を盛り上げるためのアプリを開発することになりました。 システム構成 アプリ側 アプリはFlu
無料で使えるAdobe XDの社内導入を後押しする活用事例5選 - ICS MEDIA
2018年5月の アップデートリリース に合わせてAdobe XDが無料で利用できるプランが発表されました。2017年10月に正式版がリリースされ、その後も毎月機能追加や機能改善が行われ、現在もハイスピードで開発されています。 XDはUI/UXデザインに特化しており、デザイン制作はもちろんウェブ上で動作するプロトタイプまで作成できます。PhotoshopやIllustratorと比べるとデザインに関する機能は少なめですが、XD単体でデザインを完結させることも十分に可能です。また、起動が非常に早いことや、圧倒的に動作が軽いことも魅力です。macOS専用デザインツールのSketchも人気ですが、XDはmacOSとWindowsどちらでも動作します。 XDはデザインツールと称されていますが企画や仕様策定の段階から使用されることも増えており、筆者もワイヤーフレームなどの資料作成によく使用しています
[Gyazo] 今更聞けない？簡単画像共有アプリ Gyazo のプライベート環境構築方法 | ランサーズ（Lancers）エンジニアブログ
こんにちわ！ランサーズのsatoshiです。 今回は、ランサーズの開発メンバーがスクリーンショットの共有に利用している Gyazo という技術についてご紹介したいと思います。 Gyazo とは？ Gyazo とはもともと、「スクリーンショットの瞬間共有」というキャッチフレーズで知られる無料の画像アップロードサービスのことです。ユーザーは Gyazo に画像を投稿するための専用のクライアントをダウンロードする必要があります。このクライアントを起動すると、すぐにマウスが画面キャプチャモードになります。この状態でスクリーンショットを撮影する範囲を指定すると、すぐにアップロードが始まります。アップロードが完了すると、その画像 URL がアップロードした人の手元に返ってきます。 Gyazo は、このように少ない手数でスクリーンショットを「瞬間共有」できるため、便利なツールとして人気を博しています。
![[Gyazo] 今更聞けない？簡単画像共有アプリ Gyazo のプライベート環境構築方法 | ランサーズ（Lancers）エンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d79709f7c82b6552ea9862e6173daf8eb1954905/height=288;version=1;width=512/https%3A%2F%2Fs3.ap-northeast-1.amazonaws.com%2Fwp.lancers.jp%2Fengineerblog%2Fwp-content%2Fuploads%2F2013%2F11%2Fgyazo_logo_large.png){kind=logo}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
