Movatterモバイル変換


[0]ホーム

URL:


はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

タグ

関連タグで絞り込む (106)

タグの絞り込みを解除

web制作に関するstealthinuのブックマーク (399)

  • 【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識

    概要 4年ほどProductionで使っていたリッチテキストエディタ(Quill on Nuxt.js v2)をTiptap onNext.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発

    【React】リッチテキストエディタ(Quill、Tiptap、Slate...)の考え方や前提知識
    stealthinu
    stealthinu2024/08/13非公開
    リッチテキストエディタときどき必要になるけどその時ごとにまったく過去の知見が役に立たなくなってる
    • TypeScript入門 2024

      2024年度リクルートエンジニアコース新人研修の講義資料です

      TypeScript入門 2024
      stealthinu
      stealthinu2024/08/11非公開
      TypeScriptの型指定や使い方についていい感じにまとめられている。
      • React 研修 (2024)

        2024年度リクルートエンジニアコース新人研修の講義資料です

        React 研修 (2024)
        stealthinu
        stealthinu2024/08/11非公開
        Reactがどういう経緯で開発されたかという歴史の文脈から語られていて非常に丁寧な説明。
        • 2日でファン限定支援サイトを作った話

          はじめまして。新時代IP創出事業を手掛けるsaipと申します。 普段は社員3人のスタートアップ株式会社TrippyでCCO兼CTOを務め、生成I受託事業の傍ら、AIキャラクターとのゲーミフィケーションされたコミュニケーションが楽しめるアプリ「Oz-オズ-」を開発・運営しています。 最近、「Oz-オズ-」のキャラクターのプロモーションのためにXで発信し始めた漫画の後日譚的コンテンツがメンバーシップ制で楽しめる「Oz Fanz」というWebサイトを思い立って2日で公開しました。 この記事では、どのような技術スタックを用いてそのような高速開発が可能になったかを公開し、皆様からのご鞭撻をもとに、粗いシステムを改善していこうという魂胆です。私のWeb開発歴は1~2年くらいなので、かなり考慮漏れが存在しています。テストを一切書いていないなど…。 選定の方針 あまり資金に余裕がないので、コストを極力抑え

          2日でファン限定支援サイトを作った話
          stealthinu
          stealthinu2024/05/31非公開
          今すばやくサービス作ろうと思うとこういう設計になるんだなという学びがあった。外部サービスをうまく使ってLLM使ってNextjsで書く。
          • [VSCode] REST Client は変数を使うとAPIの環境やパラメータ変更が楽になる! | DevelopersIO

            APIGatewayで作成したAPIの動作を確認するとき、何らかのRESTクライアントを使うと思います。curlコマンドPostman Insomnia REST ClientChrome拡張機能 など 今回は、私が使っているVisual Studio Codeの拡張機能を紹介します。特に変数が使えるため、APIの環境(開発・番など)やリクエストパラメータの変更がとても楽に行えます。 REST Client - Visual Studio Marketplace おすすめポイント たくさんあるので、抜粋してご紹介します。 テキストファイルで管理できる 複数のリクエストを同じファイルに書ける 変数が使えるcurlコマンドを作れる コードスニペットを作成できる など この中でも、「変数が使える」がとても便利です! 「GETしたResponseのパラメータを参照してPOSTする」や

            [VSCode] REST Client は変数を使うとAPIの環境やパラメータ変更が楽になる! | DevelopersIO
            stealthinu
            stealthinu2023/11/24非公開
            VSCodeから簡単にRestのテストが出来るプラグイン。未だにターミナルからcurlでやってたわ… テキストファイルに保存されて再利用できるのと変数が使えるのがとても良い。
            • Midjourneyを1年間使って見つけた、Webデザインに使えるプロンプト全ガイド

              「どうすればAIWebデザインに活用できるだろう」人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを1年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何?」というひとは、基の使い方をまとめた以下のガイドを参考にど

              Midjourneyを1年間使って見つけた、Webデザインに使えるプロンプト全ガイド
              stealthinu
              stealthinu2023/11/14非公開
              画像生成を使ってWebデザインのアイデアを作ってもらう使い方。現時点だと全部作らせるツール系よりこっちの用途のほうがマッチしてる気がする。
              • ADDS Web Hosting and Applications

                サーバ構築、管理運営・ウェブサイト製作・ウェブアプリケーション開発など、 写真や動画も含めたインターネット上の様々なコンテンツをご提供いたします。

                ADDS Web Hosting and Applications
                stealthinu
                stealthinu2023/10/19非公開
                白馬でホームyページ制作とかシステム開発系してるところ。須坂のコワーキングスペースとかもしてるらしい。
                • 忘れ去られたドメイン名に宿る付喪神 | IIJ Engineers Blog

                  開発・運用の現場から、IIJエンジニア技術的な情報や取り組みについて執筆する公式ブログを運営しています。 こんにちは。IIJ EngineersBlog編集部です。IIJの社内掲示板では、エンジニアのちょっとした技術ネタが好評となって多くのコメントが付いたり、お役立ち情報が掲載されています。 そんな情報を社内に留めておくのはもったいない!ということで、IIJ EngineersBlog編集部より、選りすぐりの情報をお届けします。 今回は、使わなくなったドメイン名はどのようにすればよいかを紹介します。 そのまま放置しておいてよいのか?(ダメ) 廃止すればよいのか?(もっとダメ) どういった対応を行えばよいのか? どうぞご覧ください。 終わったサービス・キャンペーンのドメイン名、放置されていませんか? ドメイン名を放置すると付喪神がやどり、ひとりでにサイトを公開したりメールを出し始め

                  忘れ去られたドメイン名に宿る付喪神 | IIJ Engineers Blog
                  stealthinu
                  stealthinu2022/10/14非公開
                  この辺まったく意識してない人たちが多いよね… なんで○○キャンペーンみたいなやつ、独自ドメインでとっちゃうんだろうなあ。社内調整よりもドメイン取るほうが楽なのか。
                  • Google Analytics 4 ガイド

                    アクセス解析ツール「Google Analytics 4」の実装・設定・活用のための情報サイト 株式会社HAPPY ANALYTICSの代表、小川卓によって個人運営されています。

                    Google Analytics 4 ガイド
                    stealthinu
                    stealthinu2022/04/19非公開
                    GA4への移行が始まるので確認用
                    • なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita

                      1.はじめにエンジニアの私がデザインを気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの

                      なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
                      stealthinu
                      stealthinu2021/12/13非公開
                      これもろに自分はAさんの発想だからデザイナの人の発想は参考になった。
                      • 「やばすぎる」 Javaライブラリ「Log4j」にゼロデイ脆弱性、任意のリモートコードを実行可能 iCloudやSteam、Minecraftなど広範囲のJava製品に影響か

                        Webセキュリティ製品などを手掛ける米LunaSecの報告によると、Minecraftの他、ゲームプラットフォームのSteamAppleの「iCloud」もこの脆弱性を持つことが分かっており、影響は広範囲に及ぶと考えられるという。 この脆弱性の影響があるのは、Log4jのバージョン2.0から2.14.1までと当初みられていたが、Log4jGitHub上の議論では、1.x系も同様の脆弱性を抱えていることが報告されている。対策には、修正済みのバージョンである2.15.0-rc2へのアップデートが推奨されている。セキュリティニュースサイト「Cyber Kendra」によれば、この脆弱性に対して付与されるCVE番号は「CVE-2021-44228」という。 脆弱性の報告を受け、Twitter上ではITエンジニアたちが続々反応。「やばすぎる」「思っていたよりずっとひどいバグだった」「なぜこんな

                        「やばすぎる」 Javaライブラリ「Log4j」にゼロデイ脆弱性、任意のリモートコードを実行可能 iCloudやSteam、Minecraftなど広範囲のJava製品に影響か
                        stealthinu
                        stealthinu2021/12/10非公開
                        これはめちゃくちゃ色んなとこに影響あるな… 自分がやった仕事だけでも該当いくつも思い浮かんでしまうもの。ある意味、前の仕事先さんから離れててよかったかも。
                        • Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも

                          Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。PuppeteerスクリプトへのエクスポートもGoogleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました。 Introducing the new Recorder panel You can now record, replay and measure user interactions with @ChromeDevTools. Seeit in action - ordering coffee. Learn more about this preview feature (available inChrome Canary now): https://t.c

                          Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも
                          stealthinu
                          stealthinu2021/11/06非公開
                          SeleniumでやってるようなことをChromeだけでできる感じなのかな?
                          • phpが32bitか64bitか確認する方法 - Qiita

                            Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                            phpが32bitか64bitか確認する方法 - Qiita
                            stealthinu
                            stealthinu2021/11/05非公開
                            XAMPPで64bit版入れたと思ったのに32bit版入ってた。PHP_INT_SIZE を見ることで確認出来る。なるほどな。
                            • Web Application開発に10080番ポートは使ってはいけない

                              要約 現在最新のGoogle Chormeで10080番ポートが使用できなくなった Firefoxではすでにブロック済み NAT Slipstreaming v2攻撃への対応のため ブラウザからアクセスするサーバを建てる場合は10080以外のポートにするべき 回避方法は一応あるChrome 91以降は10080番ポートがブロックされるGoogle Chormeの91 (2021/05/25 リリース)から10080番ポートへのサーバに接続できなくなります。 例えばGoogleChrome 90だと以下のように10080番のポートを受け付けるサーバにアクセスできますが、91以降だとアクセスできなくなります %python -m http.server 10080 Serving HTTP on 0.0.0.0 port 10080 (http://0.0.0.0:10080/) .

                              Web Application開発に10080番ポートは使ってはいけない
                              stealthinu
                              stealthinu2021/11/05非公開
                              XAMPPの設定でポートを10080にしたらアクセスできずなんで??となったのこういう特殊事情だったのか。いろんな落とし穴にハマる。
                              • ワクチン予約のシステム、納期ありきのクソプロジェクトあるあるすぎ

                                https://anond.hatelabo.jp/20210517201151 あれさ、少なくとも東京会場側のサイトは、最初のボタンに「認証」って書いてあんだよね。 端的に言って、認証も何もしてないんだから嘘なんだよね。 んで、取れる手立てはいくつもあると思うんだけどさ、 ドメインについて(なんでmrso.jpのドメインなのよ、厚労省のドメインじゃだめなんか)市区町村コードについて(6桁だけど、これは既知の情報で無効な番号は弾ける)誕生日について(なんで1歳でも予約できんだよ、これは後述するが弾いてるものもある)一番下のコピーライトについて(自衛隊東京 予約システムというタイトルなら、一番下にも入れとけよ)最初に書いとくと、できるチェックはしてるんだよ。 例えば、「現在の入力桁数:4桁」みたいなチェックはしてんだよ。これはわかりやすい。頑張ってる。 んでな、2月31日みたいな存在しない日

                                ワクチン予約のシステム、納期ありきのクソプロジェクトあるあるすぎ
                                stealthinu
                                stealthinu2021/05/18非公開
                                『できてないのは「仕様を確認して、まともな仕様を練る」時間がないから』この指摘はわかるな… 今みんな叩いてることなんてコード書いた人らは当然わかってたことだろう。
                                • stealthinu
                                  stealthinu2020/12/24非公開
                                  決済システムのテーブ設計で、ユーザと支払い方法が1:NやN:Nに対応できるように設計しとかないと大変という話。
                                  • 個人開発・スタートアップで採用すべき最強のアーキテクチャを考えた - Qiita

                                    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 結論 「アジリティ」「コスト最適化」「スモールな構成」「開発スピード」という観点でWebアプリケーションのアーキテクチャを考えてみました。 ServerlessFrameworkを使い倒すフロントエンドはS3 hosting + CloudFrontで。SSRもLambda@Edgeでできます データベースはRDSは使わずにDynamoDBAPIは基的にGraphQL。必要に応じてRESTも簡単に追加できるよ。 補足(2022/04/12) 最近個人開発しているこちらのWebサービスはこのアーキテクチャに沿って作られています。

                                    個人開発・スタートアップで採用すべき最強のアーキテクチャを考えた - Qiita
                                    stealthinu
                                    stealthinu2020/10/29非公開
                                    今の流行りの構成ってこんな感じなんか。ブコメも参考になってDynamo使わずに普通にRDS(RDB)使うかFirebase使うのでよい感じ。とりあえずNext.jsは触らんといかんぽい。
                                    • Referrer Policy のブラウザ対応状況

                                      Referrer Policy に対応したブラウザが増えてきましたが、ブラウザによって機能ごとの対応状況が異なるので調べてみました。確認した環境は以下の5つです。Windows 10 +Chrome 69Windows 10 + Firefox 62Windows 10 + Edge 18Windows 10 + Internet Explorer 11 iOS Safari 12 通常、リファラーを送信するかしないかはブラウザによって決定されますが、 Referrer Policy を設定することでウェブサイト側で制御することができます。 現在は8つのキーワードが定義されており、これによってリファラーを「送らない」から「常に送る(HTTPS→HTTPを含む)」まで、様々なケースに対応することができます。 キーワード 挙動

                                      stealthinu
                                      stealthinu2020/10/29非公開
                                      リファラーポリシーはHTML毎にMETAで指定できるしリンクごとにもreferrerpolicy属性でも指定できるっぽい。
                                      • chromeのreferrer-policyについて - ishikawa_pro's memorandum

                                        [9/8追記]chrome 85がリリースされたのに、defaultのreferrer-policy変わってないなと思ったら段階的に変わっていくみたいです。 A new default Referrer-Policy forChrome: strict-origin-when-cross-origin こんにちは。 業務でchromeのreferrer-policyについてちょっと調べることがあったので、今日は軽くまとめです。 referrer-policyとは そもそも僕が、referrer-policyについてそんなに詳しくなかったのでまずは簡単な説明。 Referrer-policyは、リクエスト時にreferer headerにどれくらいreferer情報をつけるかを設定するためのヘッダーです。 refererの情報量とは、具体的に origin, path, query 全て

                                        chromeのreferrer-policyについて - ishikawa_pro's memorandum
                                        stealthinu
                                        stealthinu2020/10/29非公開
                                        chromeがv85からリファラーポリシーが変わってデフォルトだとクロスオリジンの場合にはoriginのみ送信に変わっているとのこと。これによりrefererチェックするプログラムだとchromeやedgeだと動かなくなる。
                                        • PR活動がSEOにも効果あり? 広報担当者に意識して欲しい4つのポイント(文・辻正浩) - 週刊はてなブログ

                                          株式会社JADEの辻と申します。SEOの専門家としてさまざまな企業のSEOのサポートをしてきました。その仕事の中で企業のSEOを成功させるためにはWeb担当者の他、さまざまな社内担当者と関わる必要があります。最近、特に仕事で関わることが増えたのがPRの領域です。 ここでの「PR」とはパブリックリレーションズのことで、「組織体とその存続を左右するパブリックとの間に、相互に利益をもたらす関係性を構築し、維持するマネジメント機能」(『体系パブリック・リレーションズ』より)を指します。もちろん、PR部門で担当者が日々実践している活動の種類は多岐にわたり、どの領域をどのような手法で、どういった優先順位で実践するかは、企業によってさまざまな戦略があるかと思います。 私はPR・広報は専門ではありません。勉強はしていますが詳しいとは申せません。ただ、専門のSEOとPRは密接な関係を持つことは自信を持って言

                                          PR活動がSEOにも効果あり? 広報担当者に意識して欲しい4つのポイント(文・辻正浩) - 週刊はてなブログ
                                          stealthinu
                                          stealthinu2020/10/19非公開
                                          PRを使ってSEOにつなげるという話。辻氏の解説なので信頼できる。

                                          お知らせ

                                          公式Twitter

                                          • @HatenaBookmark

                                            リリース、障害情報などのサービスのお知らせ

                                          • @hatebu

                                            最新の人気エントリーの配信

                                          処理を実行中です

                                          キーボードショートカット一覧

                                          j次のブックマーク

                                          k前のブックマーク

                                          lあとで読む

                                          eコメント一覧を開く

                                          oページを開く

                                          はてなブックマーク

                                          公式Twitter

                                          はてなのサービス

                                          • App Storeからダウンロード
                                          • Google Playで手に入れよう
                                          Copyright © 2005-2025Hatena. All Rights Reserved.
                                          設定を変更しましたx

                                          [8]ページ先頭

                                          ©2009-2025 Movatter.jp