Concrete CMSのマーケットプレイスにてver.8アドオン・テーマの取り扱い終了のお知らせ
Concrete CMSのアドオン・テーマが入手できるマーケットプレイスがリニューアルされると2024年5月7日に公式サイトより公表されました。 発表によると、リニューアルに伴い2024年5月15日をもってver.8のアドオン・テーマがマーケットプレイスから削除され、以降はver.8向けのバージョンが取得できなくなります。 また、アドオン・テーマのライセンスの取り扱いが大きく変更されます。 従来は一度ライセンスを購入すれば以降はずっと新しいバージョンを取得できましたが、5月15日以降は以下のような対応となります。 ・月額、または1年契約のサブスクリプション方式に変更 ・購入後にサブスクリプション契約を解除することは可能だが、その後新しいバージョンの入手は不可 アドオン・テーマのライセンス取り扱いの変更移行期間中は以下の措置がとられます。 過去1年間に購入されたアドオン・テーマ: ver.9
Tailwind CSSを本気でカスタマイズする方法
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ
背景 小ネタです。 先日以下のようなバグ改修タスクでソースレビューを担当しました。 「全画面モーダルを実装したら、グローバルメニューより上に表示されてしまった。なのでz-indexを修正しました！」 我々が開発しているマナリンクでは、画面右上の自分のアイコンをクリックするとメニューが表示されます。 ところが全画面モーダルを実装したら、モーダルがメニューよりも上に表示されてしまい、モーダル表示中にメニューを操作できなくなってしまったとのこと。 最初のPull Requestの時点では、以下のような差分になっていました。 <div - className={'z-50 w-full border-b border-b-gray-shadow} + className={'z-10 w-full border-b border-b-gray-shadow} > これをレビューするときの僕の気持ち
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
Google Analytics 4 以外でウェブサイトを分析・改善するための無料ツール群とオウンドメディアでの活用法（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4はアクセス解析ツールのスタンダードとして、多くの企業やサイトに導入されています。しかし利用ハードルが高いのもまた事実です。数多くあるレポートや、自由度が高すぎて迷ってしまう探索レポート、独自の用語なども沢山あり、利用に苦労されている方も多いのではないでしょうか。 そこで、GA4以外でウェブサイトのユーザー行動を理解し、サイト改善するためのツールを厳選して紹介します。今回紹介するツールは無料で利用できるものをピックアップしています。無料プランと有料プランの両方があるサービスの場合は、その旨を記載しています。また、無料でも期間限定のサービスは追加していません。 数多く紹介することを目的とせず、全て筆者が利用している（あるいは利用経験があるもの）に絞り込み、その中で良かったと思うツー
メールが届かない原因と解決方法を分かりやすく解説 - カゴヤのサーバー研究室
メールが届かない原因は、「添付ファイルの容量が大きすぎる」など送信側にある場合と、「迷惑メールフォルダに紛れこんでいる」など受信側にある場合があります。 ここでは原因特定のためのチェック項目とともに、メールが届かない場合の原因ごとの解決方法、今後の対策を分かりやすく解説しています。
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
Gmail への転送エラーを回避する方法 | IIJ Engineers Blog
本記事で紹介する方法は、企業や組織のセキュリティポリシーで禁止されていることがあります。利用前に必ず組織の管理者にご確認ください。技術的に利用可能だったとしてもルールで禁止されている場合があります。 本記事の内容は便宜のために公開しており、無保証・非サポートです。IIJ のお客様でも、Gmail についてのサポート窓口へのお問い合わせはご遠慮ください。 正確な内容になるよう努めていますが、Google 社の仕様変更やポリシー変更等によって不正確になることもあります。各自の責任においてご利用ください。 以前、当エンジニアブログでも記事になっている通り、2024年 2月から Gmail 宛(※1)のメールは、なりすまし対策として有効な 送信ドメイン認証の対応が必須 となることが告知されています。(→Google, Yahoo の Sender Guidelines について) したがって Gm
VSCodeのソース管理をはじめよう！ Gitの連携機能について解説
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
Midjourneyを１年間使って見つけた、Webデザインに使えるプロンプト全ガイド
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO
はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブランチにmainブランチの取り込みを行うGitコマンドを自動化してみます。mainブランチを取り込むために、以下のコマンドを毎回手で実行しているとします。 git stash git pull origin main git stash pop これをtasks.jsonに定義して自動化したいと思います。 タスクの作成 タスクを作成するには、VS CodeのメニューのTerminal⇒Configure Tasksを選択します。 Create tasks.json file fr
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
名古屋のホームページ制作なら ＷＷＧ ｜ 企業のWeb制作会社
2024.4.30 岐阜県岐阜市の企業様から、お問い合わせいただきました。 2024.4.26 名古屋市中区の企業様から、お問い合わせいただきました。 2024.4.26 愛知県一宮市の企業様から、お問い合わせいただきました。 2024.4.25 愛知県大府市の企業様から、お問い合わせいただきました。 2024.4.25 名古屋市南区の企業様から、お問い合わせいただきました。 2024.4.24 名古屋市天白区の企業様から、お問い合わせいただきました。 2024.4.24 名古屋市守山区の企業様から、お問い合わせいただきました。 2024.4.23 名古屋市南区の法人様から、お問い合わせいただきました。 2024.4.23 愛知県北名古屋市の企業様から、お問い合わせいただきました。 2024.4.23 名古屋市中村区の法人様から、お問い合わせいただきました。 2024.4.22 愛知県安城
MicroCMSと11tyで作るかんたん静的サイト | DevelopersIO
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを作成する手順を紹介します。よく使われているフレームワークにGatsbyやNext.js、Nuxt.js等がありますが、HTMLコーダーである自分にとっては難易度が高く、また、作りたいサイトが小規模であるため、HTMLテンプレートを使用しての作成を検証してみました。 今回は個人的に興味のあったMicroCMSと静的サイトジェネレーターである11ty（Eleventy）を使ってAPIの取得とHTMLの生成をします。 HTML CSS JS GulpやWebpack等のビルドツール利用経験 11tyとは 11tyは複数のテンプレート形式に対応している静的サイトジェネレーターで、HTMLを出力することができます。Markdown（.md）やEJS（.ejs）、Nunjucks（.njk）といった複数のテンプレート形式に対応しているほか、AP
STUDIO | Web制作を、ノーコードで。
コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはSTUDIOだけです。
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Image credit: Relume ワンセンテンスの Web デザインは、もはや夢物語ではない。Wix、Weebly、Webflow のテンプレートを使えば、自分のスタイルで Web サイトを組み立てることができる。 しかし、これはレイアウトに限ったことではなく、Web サイトの構成を考え、各ページの内容も、訪問者を惹きつけるために慎重に設計する必要がある。例えば、「About」ページでは、サービス紹介やビジネスストーリー、将来のビジョンなどを掲載するため、コンテンツの設計に手間がかかる。 この問題を解決するために、デザインスタートアップ Relume は、AI が生成する Web サイトデザインプラットフォーム「Relume Ipsum」を開発した。これにより、数週間から1ヶ月程度かかっていた Web サイトを完成させるまでの作業負荷をわずか数分にまで軽減することができる。このプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Fundamentals — Google Developers
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
