課題「入力フォームにひらがなだけを入力できるようにしなさい」
なぎせ ゆうき @nagise 課題「入力フォームにひらがなだけを入力できるようにしなさい」 駆け出し「おっ。このクエストなら簡単そうだし行けるんじゃないか！？」 ベテラン「……若いの、気を付けろ。そいつは闇が深い」 駆け出し「は？何言ってんだこいつ。ひらがなだぞ？そんなの小学生でもわかる」 ベテラン「……」 2023-12-27 09:27:04 なぎせ ゆうき @nagise 駆け出し「この間、正規表現の修行したからな。こんなのは str.matches("\\p{InHiragana}+")で一発だぜ！」 ギルド受付「これは受け取れませんね……」 駆け出し「なんでだよ！！」 ギルド受付「『こゝろ』が通りません」 駆け出し「漱石！！！」 2023-12-27 09:47:18
【徹底解説】カスタムフィールドの新定番！Custom Field Suiteの使い方 | WEB Que / ウェブキュー
一番有名なAdvanced Custom Fields (ACF)ではもちろん繰り返しフィールドを使うことができます。しかし、繰り返しフィールドを使うためには有料版（サブスク）のAdvanced Custom Fields Proの購入が必要です。 一方、Cusutom Field Suiteであれば無料で繰り返しフィールドを使用することができ、繰り返しフィールドを入れ子にすることも可能です。もちろん繰り返しフィールド以外の入力フィールドで必要なものは一通りすべて揃っています。 また、ほかにもSmart Custom Fieldsでも繰り返しフィールドを無料で使用できますが、繰り返し処理を入れ子構造にすることができません。（ちなみにSmart Custom Fieldsは更新が2年以上ストップしており、作者ご本人も他のプラグインへの乗り換えを推奨しています。） Custom Field S
JPCERTコーディネーションセンター(JPCERT/CC: Japan Computer Emergency Response Team Coordination Center)は1月17日、「JVNVU#94855660: SMTPのデータの終端の処理の実装に関する問題」において、SMTP(Simple Mail Transfer Protocol)に違反する終端を受信した際の処理が実装によって異なる問題について注意喚起した。RFCのSMTPでは終端を「<CRLF>.<CRLF>」として定義しているが、これ以外のデータを受信した場合にSPF(Sender Policy Framework)保護をバイパスしてなりすましメールを送信される可能性がある。 JVNVU#94855660: SMTPのデータの終端の処理の実装に関する問題 SMTPにまつわる問題の詳細 問題の詳細と影響を受ける実装
正規表現の一覧 - Qiita
正規表現とは 正規表現とは、文字列のパターンを記述するための言語。文字列が指定したパターンを含んでいるかチェックできる。 Ruby3.0.0 リファレンスの引用文 正規表現(regular expression)は文字列のパターンを記述するための言語です。また、この言語で記述されたパターンも正規表現と呼びます。 正規表現を用いると、文字列が指定したパターンを含んでいるかどうかを判定し、また含んでいるならばそれが文字列中のどの場所であるかを知ることができます。 正規表現の例
Webサイトでよく見かけるQA要素。コンパクトなアコーディオンタイプなら、ページが長くならず、スッキリ見せることができます。 今回はレベル1の名にふさわしく、超・超、簡易的なモジュールを作成します。はっきり言って汎用性は低いですが、基本的な知識も書いていますので「最近CMS Hubを始めたばかりなんだよね」という方にもオススメの内容となっています。 （次回は【レベル2】と称して、もう少し汎用性の高いアコーディオンモジュールの作成方法の記事を書こうと思っていますので、乞うご期待！） アコーディオンモジュール（レベル1）の仕様 モジュールのドラッグアンドドロップ配置が可能 QAの個数、記載内容、デザインは固定（記載内容を書き換えたい場合は、モジュールの大本を書き換える必要あり）※この仕様が「レベル1」とした理由です。 手順 【下準備 1】モジュールをドラッグアンドドロップできるテンプレートを作
キーワード: 【▲→川俣晶の縁側→ソフトウェア→技術雑記】 本文先頭: .NET Framework 4.8のRandomクラスの挙動に関して、感想みたいなものをまとめます。Randomクラスから普通に取得した値は割と規則性が見えることがある。(RanPlay2016で
はじめに この記事の概要 こんにちは、株式会社TOKOSエンジニアのスギタです！ 今回は、GreenSock社が開発したGreenSock Animation Platform(GSAP)を使いテキストアニメーションを行ってみようと思います。 アニメーションはハードル高いなーと感じていた自分ですが、公式HPに「コードを使用したアニメーションは、最初は威圧的に見えるかもしれませんが、心配しないでください。私たちのプラットフォームは、シンプルで直感的になるように設計されています。(和訳)」とあるように手軽に実装できたので、 紹介したいと思います🥺 対象読者 CSS/HTML等にアニメーション実装させたい方 GSAPの使用方法 使用方法 GSAPを利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。 今回はCDNを利用していきた
リンクを全体に広げる方法【CSS】
<div class="recipe_box"> <span class="bold red"> <a class="" href="#"></a></span> <p class="img_recipe"> <img src="https://nacchi.org/wp-content/uploads/2019/04/casserole-dish-2776735_1280.jpg"> </p> <div class="right_text"> <p>トマトとマッシュルームとパプリカの料理</p> <p class="recipe_button">レシピを見る</p> </div> </div>
前提 MySQL: 5.7.43 ORDER BY句によるソート結果でのNULL 以下のようなテーブルがあるとします。 mysql> select name, x from tmp; +------+------+ | name | x | +------+------+ | A | 3 | | B | 0 | | C | NULL | | D | 1| +------+------+ ここで、xについてORDER BYで指定し昇順で表示させると、NULLが最も上位に表示されます。 逆に、降順でORDER BYを指定すると、NULLは最下位に表示されます。 これはNULLに対する仕様として把握しておいた方が良い内容です。 mysql> select name, x from Greatests order by x; +------+------+ | name | x | +------
僕がプログラミングを始めてから2年8ヶ月が過ぎました。 今までは基本的にフロントエンドをメインに取り組んできましたが、勉強しているうちに興味が移り、今後はバックエンドに方針転換するつもりです。良いタイミングなので、今までの取り組みを振り返っておこうと思います。
LPなどでテキストと写真が交互にレイアウトされているデザインを見たことはありませんか。今回はそのままコピペするだけで、テキストと写真を交互にレイアウトしたデザインを反映させることのできるコードを詳しく解説していきます。 結論：テキストと写真を交互にするためには『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』 テキストと写真を交互にするレイアウトを作るためには疑似クラス『nth-child(odd)』を使用したセレクタのプロパティ、値に『flex-direction: row-reverse;』を指定する必要があります。 それではここから、この『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』についての解説やそれ以外のコードについても順序立てて解説していきます。 <main> <se
ワードプレスの始め方 ～稼ぐためのしくみづくりまでを 徹底解説！！ 好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました
OSS-DB Silverの資格勉強の際、トリガーのBEFOREとAFTERに関する問題があり、いまいち違いがわからなかったため、トリガーのBEFORE・AFTERに関して試した内容をまとめます。 気になった点 productテーブルの変更をトリガーとして、product_log()関数(後述)が呼び出されるように設定した時、「トリガーの定義がBEFOREの場合、テーブルproductのカラムidの値は新しい値から-10されたものになる」という選択肢が正しいとされており、以下の点が気になりました。 AFTERの場合にはproductのidの値はどうなるのか product_logに挿入される値にBEFORE・AFTERは影響を与えるか(OLD・NEWの値に影響を与えるか) product_log()関数の戻り値はどのように扱われるのか よってこれらを以下で確認していきます。 実験準備 問題
こんにちは茨城県水戸市でホームページ制作・コーディング業務を承っています。フリーランスのレターズです。 今日はcssで縦書き設定してルンルンしていたら、あれ手持ちのiphoneじゃ効いていないなとなりまして。そういえばそうだった思い出し、下記を設定で解決。 Before <td class="course">ここに縦書きにしたい文字</td> .course { white-space: pre; writing-mode: vertical-rl; display: inline-block; } これだと、普通にブラウザではいけるんですが、iphoneではダメでした。 After <td class="course"><span>ここに縦書きにしたい文字</span></td> .course span { white-space: pre; writing-mode: vertica
もう画像に逃げないコードを書こう！ 見た目の凝ったデザインをコーディングする際、表示領域（以下：わかりやすく画面幅と書きます）の拡大縮小に合わせてレイアウトが崩れてしまって、デレクターさんやデザイナーさんから、「デザイン通りになんとかならない？」と言われた経験ありませんか？ そんなときはvw単位とcalc()関数を使うとかんたんに画面幅に合わせてレイアウトを保ってくれる要素を作ることが出来ます。 「いや、流石に無理でしょこんなん…画像にしちゃいましょ？」と逃げてる人、メディアクエリを大量に設定してごまかしている人、ちょっと理解するのが難しいですが、以下を試してみてください！ 結論を急ぎたい人へ 前置きはいいから結論を教えて！という人へ。 こちらの計算式にを使うと表示させたい画面幅に対して表示したいピクセル数を指定できます。 calc( 表示させたいピクセル数 vw/ 表示させたい画面幅 ÷
Javaでコーディングを行う際に必ずと言ってもよいほど使用するコレクションについて、今まで使用したことがないものも含めて改めて学習したので備忘録としてまとめてみます。 Listインターフェース コレクションでよく使用するやつ。学習した3つの実現クラスについてまとめます。 Arraylist 内部に配列を持っていて、あらかじめ要素数を決めておかなければならない配列とはことなり、要素数を必要に応じて増やすことが可能です。 要素数が増える場合、最初に内部で持っていた配列より大きな要素数を扱うことができる配列を新たに作成しそこに元の要素をコピーします。そのため、扱う要素数が増えていくにつれて処理が遅くなります。 具体的に言うと値の読み書きは高速ですが、要素の追加、削除は遅いです。 LinkedList 要素それぞれが前要素の情報と後要素の情報を持っており、繋がっているリスト。各要素にアクセスする際
![[Java]List、Queue、Setのクラスメモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/abf8ac5a34f492cec5b0d09f55fb5b71fce58350/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YSU1RExpc3QlRTMlODAlODFRdWV1ZSVFMyU4MCU4MVNldCVFMyU4MSVBRSVFMyU4MiVBRiVFMyU4MyVBOSVFMyU4MiVCOSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjgwM2EzNzNjMDMyNjE4OTNlNzIxYmQyOWI2MGExNmE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByeW8ta2Etbm90dGkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI3MTdjZGU5NjhhOTczNGJiOWFhYzkzZjcyMzk0ODQz%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-VklTSU9OQVJZIEpBUEFO%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dae4d4733fe44a45972958605cd119b2c)
ウェブページで通知バッジ的表示をしていて目を惹かれた
とある情報を検索していて、ブログのページを開いたらヘッダーになにか見慣れない表現がありました。（※スクリーンショットはその会社のトップページです） ウェブページのヘッダーで通知バッジ表示フッターにも見慣れない表現。 ウェブページのフッターで通知バッジ表示スマホの画面でみるとこんなイメージです。 スマホの画面ではヘッダーには通知バッジ的表現はないメニューをタップすることで通知表示のような表現の部分が出てくる厳密には見慣れないというか、見慣れまくっていますけど、ウェブページでは見慣れないものですね。 スマホではみなさんも毎日見ていると思います。アプリアイコンの右上にバッジとして赤丸の中に数字という表現。 以下の画像の例では未読メールが3件という意味です。 続きを読む
XmlSerializer で DefaultValueAttribute を使ったときのモヤっとした動き - Qiita
XML の読み書きをしているコードを見る機会がありまして色々と調べたところ、モヤモヤした気持ちになったので、皆さんに共有します。 XmlSerializer を使っているとき DefaultValueAttribute で指定した値のときは XML に書き込まれない 見出しのタイトルの通りなのですが、XmlSerializer を使っていて、DefaultValueAttribute で指定している初期値の値になっている要素はXMLに書き出しされません。 例えば、シリアライズするクラスに Title というプロパティがあって、Title プロパティ の初期値は default title が必ずセットされるとします。さらに、 DefaultValue 属性で初期値を明記してXMLの要素として読み書きできるようにしておきます。 [DefaultValue("default title")]
「パフォーマンス向上のため、無駄に大きい範囲の型にしない方がいい」と認識していたので、今までVBAでも普通にInteger型を使っていました。 先日オーバーフローのエラーが発生したのですが、原因は予想以上に取り込むデータが多く、計算結果がInteger型の範囲を超えてしまったという初歩的なミスでした。（完全に見通し不足。） それを見た先輩に 「VBAでIntegerは使わないよ」 と言われ、そうなの！？と驚いたことが今回の記事の発端です。 そもそもVBAでInteger型を使っても意味ない 以下、Microsoftのサイトから引用したものです。 最近のバージョンでは、VBA は、整数型として宣言されている場合でも、すべての整数値を Long 型に変換します。したがって、Integer 変数を使用することによるパフォーマンス上の利点はなくなりました。 この記載、完全にInteger型使う意味
コピペできる！CSSリボンデザインのまとめ
<h2>CSSでつくるリボンデザイン</h2> h2 { position: relative; display: inline-block; height: 50px; line-height: 50px; padding: 0 2rem; border-top: 3px solid; border-bottom: 3px solid; background-color: #a9acd3; color: #353535; font-size: 26px; font-weight: bold; text-align: center; } h2::before, h2::after { position: absolute; content: ''; top: 0; width: 0px; height: 0px; border-color: transparent #fff; border
軽量かつ高機能なJavaScriptのアニメーションライブラリ『GSAP』ですが、ただアニメーションさせるだけでなく、スクロールして表示領域に入ったらアニメーションを開始させることが可能です。 今回は、それをGSAPのプラグインの1つであるScrollTriggerを使った方法で解説していきます。
はじめに 先日、iPhoneで画面を確認した時に画像が縦に伸びるという事象が起きました。 Google Chrome（以下、Chrome）のデベロッパーツールでiPhoneでの見え方を確認した時には問題なかったのに...と焦ったので解決方法についてまとめようと思います。 事象 Chrome（Windows）で見た時 Safari（iOS）で見た時
はじめに この記事の概要 こんにちは、株式会社TOKOSのスギタです！ 今回はGreenSock社のGreenSock Animation Platform(GSAP)を使い、オープニングアニメーションを実装していきたいと思います。GSAPの基本的な使い方は下記の記事を参考にしてください!!! 【初学者向け】GSAPでテキストアニメーションをやってみた！！ 対象読者 web制作でアニメーションの実装をしたい方 今回の完成予定 今回はGSAPを用いてオープニングアニメーションを実装してみたいと思います！ GSAPのTimelineを使って実装していきます。 今回はHTML&CSSからJavaScriptまで手順を分け解説していきたいと思います。 環境 動作確認環境は Chrome バージョン113 です。 今回はリセットCSSを使用しています。normalize.css です。 環境によって
ゴム紐（ゴムひも）の製品規格や仕様・物性について ゴム紐は、繊維製品の生地などとは違って、伸縮する（伸びる）ものなので、伸びない製品と違い、物性や耐久性などいろんな性能について説明する必要がありますし、お客様より説明を求められます。 当社では、製造部門にて、ゴム紐（ゴムひも）の製品規格や物性について、以下の項目について測定・記録・管理等をしています。 （1）幅 単位は、mm（ミリメートル） ｍｍ単位で最小目盛の十分の一（0.1ｍｍ単位）まで測定する。（定規を使用） （2）厚み（平ゴムの場合） 単位は、mm（ミリメートル） ｍｍ単位で最小目盛の十分の一（0.01ｍｍ単位）まで測定する。 （0.01ｍｍ単位：厚みは、ノギスではなく、ダイヤルシックネスゲージにて測定する。） 上の画像は、ダイヤルシックネスゲージの写真です。 百分の1ミリ単位で測定します。 （3）伸度（全伸長率） 単位は、「倍」
OpenAIから新しいLLMのGPT-4oが、発表されました。 Microsoft Copilotに質問して調べました。 その回答です。 GPT-4o（ジーピーティーフォーオムニ）は、OpenAIによって開発された最新のマルチモーダル大規模言語モデルです。テキスト、音声、画像の組み合わせを入力として受け取り、それらの組み合わせを出力することができます。 GPT-4oは、英語やコードにおけるテキスト処理のパフォーマンスはGPT-4 Turboと同等でありながら、非英語言語のテキスト処理において大幅な改善が見られ、APIの速度も向上し、コストは半分になっています。また、視覚と音声の理解に関しては、既存のモデルよりも優れています。 このモデルは、より自然な人間とコンピュータのインタラクションを目指しており、まだその可能性や限界を探求する段階にあります。しかし、すでに多くの新しいアプリケーションに
現代のソフトウェア開発において、効率と品質は最も重要な要素の一つです。タスクランナーは、開発者が日々行う繰り返し作業を自動化し、より高速かつエラーの少ない開発プロセスを実現するために不可欠なツールです。例えば、コードのコンパイル、テストの実行、デプロイメントプロセスの管理など、多岐にわたる作業を簡素化し、開発の生産性を向上させます。 おすすめタスクランナー Gulp ウェブ開発者に人気の高いJavaScriptベースのタスクランナー。プラグインシステムが充実しており、様々な作業を効率的に自動化できます。 Gulp：公式サイト Webpack モダンJavaScriptアプリケーションのためのモジュールバンドラーであり、タスクランナーの機能も提供。大規模なプロジェクトに適しています。 Webpack：公式サイト Grunt JavaScriptのタスクランナーの中で最も古くから存在するものの
【Java22】super()をコンストラクタの先頭以外に書けるようになる【JEP 447】 - Qiita
public class SuperClass{ public SuperClass(long value) { /* なんか重い処理 */ } } public class SubClass extends SuperClass{ public SubClass(long value) { super(value); // super呼ぶ前に検証したいんじゃが if(value <= 0){ throw new IllegalArgumentException("non-positive value"); } } } これまでsuper()は必ずコンストラクタの一番最初に書かなければなりませんでした。 2024/03/19にリリースされたJava22において、ようやく次の書式が合法化されました。 public class SubClass extends SuperClass{ publ
案件によっては下記画像みたいに、テキストが縦書きになってるレイアウトがありますよね。 これ実は、たった1行で実装可能です。
はじめに OCI Runtime Specificationを読んだので概要を書きました。読んだのは仕様を理解して、簡単なところだけ実装しようと思ったからです。 Dockerとの関連を簡単に説明します*1。Docker Clientはdockerコマンドを提供するCLIです。Docker ClientはDocker Engineに要求を出してDocker Engineがcontainedを操作し、containedはruncを操作します。runcというのはLinuxの機能を利用してコンテナを実際に作ったり操作するプログラムです。今回はコンテナを実際に作るruncにあたるレイヤーの仕様の話です。コンテナを作るレイヤーの仕様なので、コンテナとは？のような話が含まれます。 OCI (Open Container Initiative) OCIとはOpen Container Initiative
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Naomi Suzuki on X: "【簡単な解説】… https://t.co/s4pJc5hAKp"
SMTPに問題、誤った終端文字使ってなりすましメールの危険性
QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub
.NET FrameworkのRandomクラスの挙動に関するメモ 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
【初学者向け】GSAPでテキストアニメーションをやってみた！！
MySQLによる"NULL"の扱いについて - Qiita
稼ぐために始めたプログラミングのこれまでの振り返り。勉強方法や役立った本も紹介。
【頻出デザイン】テキストと写真を交互にレイアウトするには『flex-direction: row-reverse;』
【したいことが探せる】Luxeritas（ルクセリタス）使い方目的別ガイド
PostgreSQLのトリガー関数のBEFORE・AFTERの細かな挙動の違い - Qiita
cssでの縦書き設定がiphoneで効かないとき | 【ホームぺージ作成・動画編集 】茨城県水戸市 | レターズ
calc()関数、vw単位を使った絶対に崩れないCSSの書き方 - Qiita
[Java]List、Queue、Setのクラスメモ - Qiita
高知県のホームページ制作会社 / Web制作会社一覧から発注依頼の比較・見積｜PRONIアイミツ
「VBAでInteger型は使わない」って、知ってた！？ - Qiita
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
Safariで画像が縦に伸びてしまう時の解決方法 - Qiita
【GSAP】初学者向け！Timelineで作るオープニングアニメーション
ゴム紐（ゴムひも）の製品規格や仕様についてゴム紐の専門家が説明いたします
『OpenAIからGPT-4oが発表されました。すべてのユーザーで使えるそうです。』
コーディング効率を変える！おすすめタスクランナー完全ガイド｜DAD UNION – エンジニア同盟
【CSS】テキストを縦書きにする方法【英数字・safariの注意点】
OCI Runtime Specificationを読んだので概要を書く - 射撃しつつ前進