OpenAI API を用いた文書校正(誤字脱字検出) | blog.jxck.io
Intro OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。 文章校正と誤字脱字検出 執筆を補助するツールは多々開発されているが、基本は形態素解析を用いた品詞分析の延長で行うものが多かった。 よくある「助詞の連続」、「漢字の開き閉じ」、「一文の長さ」などは、ある程度の精度で検出可能ではあるが、結局執筆時に一番検出して欲しいのは「誤字脱字」だ。 文体をどんなに揃えたところで、誤字脱字があるとやはりクオリティが低く感じるし、そこさえ抑えられていれば、他のスタイル統一は訓練である程度なんとかなる。 英語のスペルチェックはかなり進んでいるが、日本語においてはそこまで革新的なものが見当たらない。あらゆるツールを試したが、結局満足のいく精度が出る誤字脱字検出は「Word の校正機能」しかなかった。 そこで筆者
エンジニア向けチートシート集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として毎回コードを書くたびに「チートシート集でカンニングすればええや」と思うのではなく「最初はチートシートでカンニングしつつ徐々に体で覚えていく」ことを意識して使うことが大切です。 最終的にはチートシートは見ずに「自分の使える技術」として定着させるための道具だと思って使ってください。 この記事の対象者 エンジニア初心者~中級者 作業効率を上げたい
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
[サーバレス] Googleスプレッドシートでスクレイピング - Qiita
スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。 やりたいこと 献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。 たとえば 宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。 これ以外の県も、各県の献血センターに掲載されている こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。 ない
![[サーバレス] Googleスプレッドシートでスクレイピング - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/887726243bc177ea271bd5e4156739bf5152ac79/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JTVEJTIwR29vZ2xlJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJTk0JUUzJTgzJUIzJUUzJTgyJUIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jMDMxYmRhZGMzYzgxODQ4YzQ4OWVjOTIzYTk5NjgzNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb2d5YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y1YTI5ZDlmNGVjNjYwMWRkYjAyNjZiM2UyMTMyMDg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%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%3D6702fb6f54a8fa3741edd3899a82a324)
ワイ「なに！？ジェネレーター関数を使えば複雑なCSSアニメーションも簡単やと！？」 - Qiita
業務中ワイ ワイ「お、また株式会社ブラックはんからお仕事依頼のメールが来てるで」 ワイ「どれどれ・・・」 暗井「お世話になっております。株式会社ブラックの暗井 暗人（くらい・あんと）です」 暗井「クリックするとフワフワっとだんだん縦横に大きくなるボックスを作ってください」 暗井「予算は800万円です」 ワイ「これまた何ちゅうフワフワっとした指示や」 ワイ「でもjQueryのanimateメソッド使えば余裕やろ」 ワイ「かしこまりました」 ワイ「何とか800万円以内に抑えます」 ワイ「送信っと」 ワイ「お、早速お返事や」 暗井「なお、発注元の都合でjQueryの使用はできません」 ワイ「ファッ！？」 ワイ「まじか・・・jQuery禁止か」 ワイ「800万円で出来るかな・・・」 社長「（それは出来るやろ・・・何年かける気や・・・）」 ザコーダーワイ、jQuery禁止で困る ワイ「jQueryな
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
TweenMaxを使ってみる | なんかいろいろデザインする人
アニメーション系のプラグインとしては大御所のTweenMax.js。 ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。 いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。 TweenMaxとは 公式サイトはこちら https://greensock.com/tweenmax 世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ！」ってサイトでも使ってたりする。このプラグインすげえええ！ 実際問題、アニメーションと聞くとhtmlとcssと簡単なjs（スムーススクロールとか）しかしたことない人にとっては小難しいと感じるかもしれない。 特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない！ってなる。少なくとも自分は
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。 - かもメモ
HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使っちゃうのが一番楽な気がしています。 ただ、レスポンシブとかにするならスマートフォンのキーボードの関係もあってinput[type="date"]を使いたいってケースも多いです。 そこで今回は、input[type="date"]でフォームを作成して、input[type="date"]をサポートしていないブラウザの時だけjQueryUIのdatepickerを使うようにするメモです。 modernizr.jsを使う modernizr.jsはJavaScriptのライブラリです。 閲覧者の
![input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。 - かもメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c9c3d8269c7f1cea26f415408037cbfda12323f/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fa9dee7a0f25826f7229489fef211d5679dab08e3%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkikiki-kiki%252F20150928%252F20150928175206.png)
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
metaのviewportの値を動的に変更するJavaScript | briccolog
レスポンシブ・デザインのウェブページが一般的になって久しいですが、あまり開発期間や費用をかけられない場合など、「PCで閲覧した場合（＝PCビュー）」と「スマホで閲覧した場合（＝SPビュー）」の二種類の表示のみを設定するということも少なくありません。 例えばPCビュー時の基準の横幅を980px、SPビュー時の基準を320pxとして作成したページがあるとします。単純に考えればCSSのメディアクエリでブレークポイントを一つ設定すればいい話なんですが、 画面幅768pxのタブレット端末で見た場合もPCでの閲覧時と同じように（PCの画面が縮小したような状態で）見せたい。 画面幅320px以上のスマホ端末で見た場合に、画面幅320pxの端末で見ているのと同じ状態（画面を拡大して）見せたい。 というようなご要望を受けることもしばしば。特にレスポンシブということでなければ、普通にmeta[name="vi
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
css3とjQueryで柔軟に実装できるSVG線画アニメーション
アジケでフロントエンドエンジニアを始めて10か月の小松です。 今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。 実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。 画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。 目次 ・SVGとは？ ・線画アニメーションを実装するために必要な技術 ・サンプル実装 1. SVGとは？ 「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用) なんだかよくわかりませんが凄くざっくり
Electronでデスクトップアプリを作ってみよう！ |
こんにちは。 最近、登山をにハマり始めた武田です。 今回は [Electron] なるものを触ってみたいと思います。 Electronって何？ クロスプラットフォームに対応したデスクトップアプリ開発ができるオープンソースソフトウエア 対応OSは Mac, Windows, Linux 実装にはウェブ技術で可能 HTML5 CSS JavaScript 実運用されている例 Slack Atom Visual Studio Code ウェブプログラマーの私にぴったりですね！ ※近頃は色んな所でクロスプラットフォーム対応の開発環境を見かけますね。 ほんとにスゴイ時代になったもんです。。。 実験環境 Windows 10(64bit) node.js 6.2.2(x64) インストール とりあえず環境整えないと話進まないですな。 node.jsのインストール node.js公式からダウンロード 今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
