タグ

*web制作に関するokudenのブックマーク (520)

  • 「GPT-4o with canvas」がスゴい! 文章作成やコーディング生産性が爆上がり

    「GPT-4o with canvas」がスゴい! 文章作成やコーディング生産性が爆上がり
  • オープンソース住所正規化エンジンを地番住所に対応したメジャーバージョンをリリースしました!

    Geolonia がオープンソースで公開している住所正規化エンジン normalize-japanese-addresses のバージョン 3 を公開しました。 住所マスターの更新 これまでのバージョンでは、国土数値情報や郵便局データを使った住所マスターをベースに動作していました。今回のバージョンでは、住所マスター自体も更新しております。具体的には、デジタル庁が公開しているアドレス・ベース・レジストリ(ABR)を元に作り直しました。 これにより、正規化できる住所の網羅性、精度の向上、更新頻度の安定化が期待されます。 デモサイトのご案内 新バージョンを早速お試しいただけるデモサイトをご用意しました。ぜひご利用ください。 デモサイトはこちら 出力形式の変更点 v3 へのアップグレードの際には、出力形式が変更されているためご注意ください。 v2 はそのまま利用いただく場合は出力形式が変わりません

    オープンソース住所正規化エンジンを地番住所に対応したメジャーバージョンをリリースしました!
  • 人に優しいフォームを作ろう、特に日本人に

    皆さん、フォーム作ってますか? Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

    人に優しいフォームを作ろう、特に日本人に
  • Eleventy v3.0.0 is now available

  • UXデザイン用AIツールはまだ実用段階ではない: 最新状況

    我々の調査と評価によると、UXデザインのワークフローを実質的に向上させる、デザインに特化したAIツールは今のところほとんどない。 AI UX-Design Tools Are Not Ready for Primetime: Status Update by Caleb Sponheim and Megan Brown on April 12, 2024 日語版2024年9月4日公開 AIツールがUXデザイナーにすぐに取って代わることはないだろう。現在入手可能なLLMベースのツールはまだ、デザインプロセスのステップを省略できるものではないからだ。 調査概要 AIに関する大げさな広告宣伝が横行しているため、どのツールや戦略が「今すぐ」UXに役立つのかを見極めるのは容易ではない。 そこで、UX実践者がAIを業務に取り入れる有益で具体的な方法を見つけるために、我々は2024年初頭にUX実践者(

    UXデザイン用AIツールはまだ実用段階ではない: 最新状況
  • 採用サイトリニューアル徹底解説~求職者の業務理解に役立つアンダーソン・毛利・友常法律事務所のサイト | knowledge / baigie

    サイトリニューアルの背景 2023年8月から始まったプロジェクト。古沢さんによると、サイト制作の構想は実は数年前から頭の中にあったと言います。 古沢さん「私がAMTに入所する前に、転職活動中にウェブサイトを見たときから、もし入所できたらサイトをリニューアルしたいと考えていました。法律事務所ならではの厳格な雰囲気のウェブサイトは、敷居の高さを感じさせていると思ったからです」 既存の採用サイトは、弁護士の採用とスタッフの採用が1サイトにまとまったもの。敷居の高さに加え、情報量や構造の整理が十分ではなく、使いづらさを感じさせる部分が多々ありました。 加えて、AMTのスタッフ採用において課題になっていたのが下記の3点です。 ・新卒採用において優秀層の採用難易度が上昇した ・面接に来る求職者の職種理解が浅い ・内定辞退が多い職種がある 布上さん「募集職種の種類が多く専門性が高いため、業務の内容をあ

  • フレームワークだけじゃない! 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ

    TOPコラム新発見!フロントエンド技術の今フレームワークだけじゃない! 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない! 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTMLJavaScriptの基』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念

    フレームワークだけじゃない! 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
  • has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA

    2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

    has()疑似クラスでコーディングが変わる! CSS最新スタイリング - ICS MEDIA
  • VisualStudioCodeで絶対にしておくべき設定ベスト20

    Visual Studio Codeで絶対にしておくべき設定ベスト20 はじめに Visual Studio Code(VSCode)は、開発者にとって非常に人気のあるエディタであり、その柔軟性と拡張性から多くのプログラミング言語やフレームワークに対応しています。VSCodeを最大限に活用するためには、適切な設定を行うことが重要です。記事では、VSCodeで絶対にしておくべき設定ベスト20を紹介し、それぞれの設定がどのように開発体験を向上させるかを詳しく解説します。 1. テーマの選択 1.1 ダークテーマとライトテーマ VSCodeでは、ダークテーマとライトテーマの両方が利用可能です。開発環境の明るさや好みに応じてテーマを選択することで、目の疲れを軽減し、作業効率を向上させることができます。特に、長時間のコーディング作業を行う場合、適切なテーマ設定は重要です。 1.2 テーマの変更方法

    VisualStudioCodeで絶対にしておくべき設定ベスト20
    okuden
    okuden 2024/08/05
    “開発をサポートす”
  • ステップバイステップで学ぶ初めてのPHPアップデート | 株式会社divx(ディブエックス)

    目次[非表示] 1.はじめに 2.なぜPHPバージョンアップが必要なのか? 3.PHPバージョンアップ手順 3.0.1.PHP 7.4とPHP 8.3の変更差分調査 3.0.2.Laravelのバージョンアップ(7.3から10へ)の調査 3.0.3.Composerライブラリのバージョンアップ 3.0.4.PHP 8のローカル環境設定を更新する 3.0.5.静的解析の実施 3.0.6.テスト仕様書の作成 3.0.7.エラーの修正 3.0.8.テスト環境へのデプロイ 3.0.9.デバッグ 3.0.10.番環境へのデプロイ 4.静的解析ツールの活用 4.0.1.PHPStanを使用した理由 4.1.ルールレベルの設定 4.1.1.使用した感触 5.まとめ 6.お悩みご相談ください はじめにこんにちは、株式会社DIVXでエンジニアを務めております、間と申します。 今回は、PHPのバージョンを

    ステップバイステップで学ぶ初めてのPHPアップデート | 株式会社divx(ディブエックス)
  • Tailwind CSS初心者が絶対ハマる落とし穴

    ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>

    Tailwind CSS初心者が絶対ハマる落とし穴
  • 生成AIでコーディング効率化!→待っていたのは“失敗の日々” とあるITエンジニアとAIの試行錯誤の記録

    生成AIでコーディング効率化!→待っていたのは“失敗の日々” とあるITエンジニアAIの試行錯誤の記録(1/3 ページ) 「生成AIに振り回された3カ月間の成功と失敗」──コンサルティング事業などを手掛けるリンクアンドモチベーションは6月29日、エンジニア向けの転職サービス「Findy」を運営するファインディ(東京都品川区)が開催したイベント「開発生産性Conference 2024」で、こんな講演を行った。登壇したのはソフトウェアエンジニアである山西陽平さん。開発生産性を上げるため、生成AIでコードを編集するために試行錯誤した3カ月間の体験談を話した。 山西さんが作ったのは「GitHubのIssueを基に、AIがPull Request(PR)を作成してくれるツール」だ。米OpenAIの大規模言語モデル「GPT-4」を活用し作成したツールで、これで型注釈を付けるタスクの自動化を試みた。

    生成AIでコーディング効率化!→待っていたのは“失敗の日々” とあるITエンジニアとAIの試行錯誤の記録
  • なぜWebサイト制作は失敗しやすいのか?巨大プロジェクトから学ぶ成功の鍵とは | [マーケターコラム] Half Empty? Half Full?

    みなさん、こんにちは。瀬川義人(@motoy0shi)です。 突然ですが、みなさんはWebサイト制作で「こんなはずじゃなかったのに……」という経験はありませんか? お恥ずかしい話、私はあります。 かつて自社のWebサイト制作に関わったときのことです。制作のプロジェクトマネージャーとして入ったのですが、始まって早々、別の急ぎ案件が入ってしまい、なかなか時間が捻出できず、プロジェクトが停滞。さらにいざ再開してからも、思わぬトラブルに巻き込まれてしまいます。 結果的には納期が数ヵ月遅延し、工数もかなり超過してしまいました。思い出すと、今でも苦い気持ちになります。 データを調べてみると、Webサイト制作での失敗は意外と多いようです。ナノカラー社の調査によれば、71.7%の回答者がWeb制作会社に依頼して”失敗した”と感じた経験があるそうです。 なぜWebサイト制作は失敗するのでしょうか? リスクを

    なぜWebサイト制作は失敗しやすいのか?巨大プロジェクトから学ぶ成功の鍵とは | [マーケターコラム] Half Empty? Half Full?
  • プログラミングのためのBGMや環境音など。仕事や勉強の邪魔にならない無料で使えそうな音源集。2024年版

    プログラミングのためのBGMや環境音など。仕事や勉強の邪魔にならない無料で使えそうな音源集。2024年版 在宅で仕事や勉強をしている時間が増えてくると、ずっと無音だと寂しい気がして、できればあまり気にならないBGMや環境音があるといいなあ、と思ったことはありませんか? 昨年、そうした音源集を記事として紹介しましたが、1年が過ぎると紹介した音源の多くが配信を終了したりURLが変わったりしています。そこで、現在配信中の音源にアップデートしつつ、昨年の記事のコメントやブックマークで教えていただいた読者のお気に入りの音源なども加えた音源集まとめの2024年版を作りました。 記事の前半は音楽、後半は環境音を中心に紹介します。紹介した音源のほとんどは無料で聴けるものにしましたので、仕事や勉強に気軽に役立てていただければ幸いです。 作業用BGMの定番としてのLoFiチャンネル 今回も、まずはBGMの定番

    プログラミングのためのBGMや環境音など。仕事や勉強の邪魔にならない無料で使えそうな音源集。2024年版
  • Git不慣れ勢を束ねて安全なチーム開発をするメモ - Qiita

    稿は当初チーム開発時のメンバー向けにまとめたものです。 ある程度、端折っていた背景などを記載しました。 git初心者同士でのチーム開発において、git操作を詳しく知らないメンバーも含め安全に行う必要がありました。しかし、開発期間はごくわずか...この状況を回避するために、下記の対応をとりました。 Gitコマンドの基礎的な内容を理解する(私) 各種操作をGUI上で完結させる拡張機能を色々と導入する シンプルな開発フロー(Github flow)を採用し、コマンド実行に相当する操作を限定する 各操作をGUI上での操作に置き換え、チームメンバーに教える 稿はその際の、コマンドやGUI操作に関するメモをまとめたものになります。 こういった取り組みのおかげか、チームの開発をすんなりフローに乗せることができました。 ■ 前提条件 対象とする動き Github flowを回すうえで、 cloneする

    Git不慣れ勢を束ねて安全なチーム開発をするメモ - Qiita
  • Concrete CMSのマーケットプレイスにてver.8アドオン・テーマの取り扱い終了のお知らせ

    Concrete CMSのアドオン・テーマが入手できるマーケットプレイスがリニューアルされると2024年5月7日に公式サイトより公表されました。 発表によると、リニューアルに伴い2024年5月15日をもってver.8のアドオン・テーマがマーケットプレイスから削除され、以降はver.8向けのバージョンが取得できなくなります。 また、アドオン・テーマのライセンスの取り扱いが大きく変更されます。 従来は一度ライセンスを購入すれば以降はずっと新しいバージョンを取得できましたが、5月15日以降は以下のような対応となります。 ・月額、または1年契約のサブスクリプション方式に変更 ・購入後にサブスクリプション契約を解除することは可能だが、その後新しいバージョンの入手は不可 アドオン・テーマのライセンス取り扱いの変更移行期間中は以下の措置がとられます。 過去1年間に購入されたアドオン・テーマ: ver.9

    Concrete CMSのマーケットプレイスにてver.8アドオン・テーマの取り扱い終了のお知らせ
  • Tailwind CSSを本気でカスタマイズする方法

    2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」(サイボウズ)での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/

    Tailwind CSSを本気でカスタマイズする方法
  • 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} > これをレビューするときの僕の気持ち

    Tailwind CSSでz-indexの値をマジックナンバーにしないための小ワザ
  • Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita

    普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは?」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選! 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日語設定 日人なので日語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec

    Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
    okuden
    okuden 2024/04/26
    “Postman”
  • 2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

    すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を

    2024年版 HTMLで作るフォームバリデーション - ICS MEDIA