マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sad
docker-composeを利用してdockerコンテナを作成する方法メモ（複数コンテナ対応） - エンジニアを目指す日常ブログ
はじめに 本記事の目的 dockerコンテナを立ち上げる。 また、今回はdocker-composeというツールも利用する。 基礎知識として、docker-composeツールを使わずにDockerを立ち上げる方法は以下の記事に記載している。 いかの記事ではAWSのEC2上で実施しているが、もちろんEC2を使わずローカルで実施も可能。 EC2サーバ（Linux）上でdockerコンテナを起動する方法メモ（nginxベース） - エンジニアを目指す日常ブログ 前提 Linux環境とする。 今回はWindows上にVagrantで仮想環境を用意している。 tomiko0404.hatenablog.com はじめに 本記事の目的 前提 dockerインストール Dockerfileの作成 docker-compose.ymlファイルの作成 今回作成したdocker-compose.ymlファイ
バーコード検出 API - Web API | MDN
バーコード検出 API (Barcode Detection API) は、線形および二次元のバーコードを画像内から検出します。 ウェブアプリケーションでバーコード認識に対応することで、対応しているバーコード形式を通じてさまざまな用途に利用できるようになります。 QR コードはオンライン決済、ウェブナビゲーション、ソーシャルメディア接続の確立に、アステカコードは搭乗券のスキャンに、ショッピングアプリは JAN、EAN、UPC バーコードを使用して物理的なアイテムの価格を比較するために使用することが可能です。 検出は detect() メソッドで行われ、これに画像オブジェクトを渡します。これは 要素、Blob、ImageData、CanvasImageSource の何れかです。オプションの引数を BarcodeDetector コンストラクターに渡すことで、検出するバーコード形式のヒントを
Quagga.js でバーコード読取してみた - Qiita
はじめに 自分は以前に Cordova を使って「蔵書台帳」アプリを作りました。このとき 書籍の ISBN のバーコードを読取するのに、Cordova のプラグインを使っていました。 改めて調べてみると、ブラウザ上の JavaScript コードで直接、カメラ画像からバーコードの読取できるんですね。 JavaScript でバーコード読取できるライブラリは幾つもありましたが、これがよさそうでした。 GitHub - serratus/quaggaJS: An advanced barcode-scanner written in JavaScript GitHub - ericblade/quagga2: An advanced barcode-scanner written in Javascript and TypeScript 紹介している記事も多く、幾つか試してみました。 Quag
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
実務経験ほぼゼロでTypeScriptやNext.jsを扱う開発案件にアサインされた人のための備忘録 - Qiita
はじめに 筆者は2022年8月に株式会社ニジボックスに入社し、翌月の9月に現在のプロジェクトにアサインされました。 入社時はフロントエンドの実務経験はほぼゼロで、HTML/CSSやJSの基礎的な文法・ルールをスクールや独学で勉強していた程度の新人エンジニアでした。 そんな私がいきなりTypeScriptでNext.jsをガリガリ書くようなプロジェクトにアサインされ、困ったことや技術的につまずいたところを備忘録としてまとめていきたいと思います。 （読者の方が私と同じ轍を踏まなくて済むように、先輩方からいただいた解決策や私なりの解説を載せておきます） 対象読者 フロントエンド初心者、実務経験があまりない人 これからNext.jsやTypeScriptなどを扱う業務もしくは学習を始める人 前提 フロントエンドの実務経験が少ない筆者が、あくまで同じような技術レベルの方に向けて書いた記事です。 この
LINE SDK(Node.js)でメッセージの一斉送信
すぐにわからなくなるので覚書 前提 Messaging APIでチャンネル作成済み 作成したアカウントを友達追加済み チャンネルのAccess Tokenを取得している 一斉送信 broadcast APIを利用する c […] すぐにわからなくなるので覚書 前提 Messaging APIでチャンネル作成済み 作成したアカウントを友達追加済み チャンネルのAccess Tokenを取得している 一斉送信 broadcast APIを利用する curlの場合 curl -v -X POST https://api.line.me/v2/bot/message/broadcast \ -H 'Content-Type:application/json' \ -H 'Authorization: Bearer YOUR_CHANEL_ACCESS_TOKEN' \ -d '{ "message
【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
FacebookログインのJavascriptのSDKをサクッと試す方法 | Casual Developers Note
最近ではスタートアップ企業がログイン機能を付ける場合、名前とメールアドレスを利用した通常のログインを実装するのではなく、ソーシャルログインを実装するのが一般的になっています。これはログイン機能が本質的に価値を提供しないにもかかわらず、必ずサービスには必須なので低コストで実装したいという企業側と、新しいサービスを利用するたびに新しいアカウントを作りたくないというユーザ側の双方にメリットがあるからです。今回はソーシャルログインの中でも最も人気のあるFacebookログインを実装する前段階として、JavascriptのSDKを試す方法を紹介します。 ソーシャルログインとは？ ソーシャルログインとは、Facebook、Google、Twitter、LINEなどのSNSをすでに使用しているユーザが、新しいサービスを利用する時に新しくアカウントを作らずに、元々持っていたSNSアカウントを利用してログイ
LINEのBot開発 超入門（前編） ゼロから応答ができるまで - Qiita
概要 この記事ではLINEで動作するBotを開発する方法をチュートリアル形式で記載しています。カバーする内容は、「寿司の出前を受付するBot」を開発するというもので、LINE側での必要な設定、Bot本体の開発とクラウド環境へのデプロイ、そして自然言語解析を組み込んでユーザーの意図を特定する機能などBotに共通して求められる基本的な動作を含みます。今回のBot本体はNode.jsで作っていきます。 必要なスキルと環境 Node.js/Javascriptの基本的な知識 Herokuのアカウントを作成済みでHeroku CLIが作業PCにインストールされていること 開発の流れ まず最初にBotのアカウントを作成します。この作業はLINE Developers コンソールというWebサイトで「Channel」を作成するという作業になります。 ＊以後BotのアカウントのことをChannelと呼びま
毎週アプリをリリースして3ヶ月経ったので振り返る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、Yuiです。 実は5月後半から週イチ発信と称して、週一でアプリをリリースして日本語と英語両方で記事を書くという挑戦をしておりました。 まだもう少し続ける予定ですが、一旦は3ヶ月完走したということでこのチャレンジ期間中に開発したアプリやできるようになったことを紹介していこうと思います。 参考になったと思えばLGTM してもらえれば大変励みになります。 1週目: TensorFlowを使って画像にマスクをかけるアプリを作った TensorFlow.jsを使った初めての開発でした。 最初face-api.jsで動かそうとしてたんで
苦しんで覚えるDraft.js -リッチテキストエディタをシュッと作る- - Qiita
株式会社LITALICOでWebエンジニア（Rails）を担当しています、@YudaiTsukamotoです。 この記事は『LITALICO Advent Calendar 2017』1日目の記事です。 記念すべき1記事目は、Facebook謹製のリッチテキストエディタフレームワークのDraft.jsについて書こうと思います。 はじめに 弊社では、conobie, LITALICO(りたりこ)発達ナビ, U2Plusを始めとするメディアを中心としたWebサービスを複数運営しております。様々な歴史的な経緯で、記事編集画面をスクラッチで実装しているのですが、以下のような辛さを抱えています。 記事UIパーツの修正・追加をする事が結構しんどい 書いた見た目と表示される見た目が異なるので、いちいちプレビューを見ないといけない Undo/Redoなどの履歴管理が辛い コンテンツの順序を変更することが辛
完全カスタマイズOK！ブロックスタイルのテキストエディタを開発可能な「Editor.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Mediumなどにも採用されているブロックスタイルのテキストエディタを開発できるJavaScriptライブラリをご紹介します！ ヘッダー要素・リスト・画像など、それぞれのコンテンツを独立したブロックで管理することができ、保存時の出力はクリーンなJSONデータとして取得することができます。 また、簡単に開発できるプラグインにより、欲しい機能を好きなだけ拡張していくことも可能なので、オリジナルのテキストエディタにご興味ある方はぜひ参考にしてみてください！ なおpaizaラーニングでは、JavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。そちらも合わせてチェックしてみてください。 【 Editor.js 】 ■「Editor.js」の導入方法 それでは、最初にEditor.jsをどのように使えばよいのかを見て
【Javascript】リアルタイムプレビュー付き簡易htmlエディタ - Qiita
今回はJavascriptを使ってhtml作成をある程度楽にする簡易エディタをつくりたいと思います。 似たようなhtmlファイルを大量につくりたいならいいかも 内容をゴリゴリ書くなら然程労力は変わらないと思う… プレビュー 必要最低限の機能しか実装してないけどちょっと工夫すれば そこそこ実用的なものが作れるかと思います。そして楽！ クリックでデモページのzipファイルダウンロード Win,MacのChromeでのみ動作確認済みです 10/17 リンク間違ってました…ごめんなさい ソースコード <html> <head> <title>qiita_js003</title> <meta charset="utf-8"> <meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=2.0"> <style
Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法
ホームテクノロジーWebサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webサイトにエディタ実装なら！ブロックスタイルのWYSIWYGエディタ「Editor.js」の設置方法 Webアプリで入力を受け付けるコンテンツにtextareaタグがある。これは複数行テキスト入力が可能なコンテンツだ。メールフォームなどのフリーテキストの入力を求める場合に設置することが多く、お問い合わせページやアンケートページなどに入力した覚えがあるのではないだろうか。 このtextarea要素は、複数行入力できるとはいってもプレーンテキストであって、文字入力だけ許されている。機種依存ではあるが、絵文字を表現する程度だろうか。 もし太字や文字サイズをカスタマイズするような要件には向かない。というかtextareaで、これらカスタマイズはできない。文字通りテキストエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【完全ガイド】LINEミニアプリ開発からデプロイまでを丁寧に解説 | ギークの逆襲 🐟
Node.js, WebSocket 使った簡易チャットの作成 - Qiita
表をドラッグ & ドロップで並び替えたい - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
Editor.js
