【React】シンプルな「TODOアプリ」を作ってみる | バシャログ。
こんにちわ。kyamashitaです。 「React」の連載第三弾ということで、シンプルなTODOアプリを実際に作ってみたいと思います。 完成イメージ ざっとこんな感じのイメージで作ってみます。 コンポーネントは「入力用」「フィルター用」「一覧表示用」の3つです。 構成 前回の記事を参考に雛形を作り、以下のファイルを修正、追加します。 src/ App.css （修正） App.js （修正） InputComponent.js （追加） InputComponent.css （追加） FilterComponent.js （追加） FilterComponent.css （追加） ListComponent.js （追加） ListComponent.css （追加） 各コンポーネントの表示 まずは各コンポーネントをApp.jsで読込表示させてみます。 各コンポーネントをとりあえず以下の
ブラウザで録音した音源とアップロードした音源を合成する | バシャログ。
こんにちわ。kyamashitaです。 前回はブラウザから録音させてみましたので、今回は録音した音源とアップロードした音源を合成させてみます。 アップロードした音源を保持 audioContext.decodeAudioData()を使ってデコードした音源を保持します。 const audioContext = new (window.AudioContext || window.webkitAudioContext); let audioBuffer = null; document.querySelector('#file').addEventListener('change', function () { const file = this.files[0]; const reader = new FileReader(); reader.readAsArrayBuffer(file
getUserMedia、MediaRecorderを使ってブラウザで録音する | バシャログ。
久しぶりの投稿となりました。kyamashitaです。 今回はgetUserMedia、MediaRecorderを使ってブラウザで録音してみます。 準備 browser-syncを使えるようにします npm init npm install browser-sync browser-syncの設定します 録音処理にはhttpsが必須のためhttpsをtrueにします。 npx browser-sync init bs-config.jsを修正します。 module.exports = { "files": ["htdocs/index.html"], "server": 'htdocs', "https": true, "startPath": '/', }; npmのコマンドを書いておきます package.json "scripts": { "start": "browser-syn
URLクラスを使って、クエリストリングを簡単に扱う | バシャログ。
みなさん。こんにちは。 久しぶりの投稿となります。 今回はとある案件でURLにクエリストリングを付与したり削除したりという機能を開発していた時、URLのクエリ部分をオブジェクトにしたり、そのオブジェクトをクエリストリングに戻したりという処理がすごく面倒だったので、 クエリストリングの操作が楽になるライブラリを探していた所、JavaScript(ES6以降)標準で入っているURLクラスで簡単にいったので記事にしてみました。 今回は、チェックボックスにチェックがついたらnewKeyというパラメーターがURLに追加されるようにしようと思います。 デモ 画面収録 2021-04-14 16.56.24.mov HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>URLSearchParamsを使ってみ
Browser Image Compressionで画像をアップロード前に圧縮する[Javascript] | バシャログ。
どうもfujiharaです。本日は画像をアップロード前に圧縮できる BrowserImageCompressionをご紹介します。 インストール npm install browser-image-compression --save or yarn add browser-image-compression コード 以下が簡単な確認用コードになります。(react-create-appで作成) import './App.css'; import { useState } from 'react'; import imageCompression from 'browser-image-compression'; function App() { const [image_url, setImageUrl] = useState(''); const compressOption = {
【Gulp】gulp-renameで出力ファイルを簡単操作 | バシャログ。
どうもfujiharaです。本日はgulpの便利プラグイン gulp-rename をご紹介します。 背景 gulpを使う場合src, dist でソース、出力先を指定するとかと思います。 gulpfile.js import gulp from 'gulp'; const { src, dest } = gulp; export default () => { return src('src/js/*.js') .pipe(processA()) // 処理A .pipe(processB()) // 処理B .pipe(dest('dist/js')); } tree (ディレクトリ抜粋) ├── dist │ └── js │ └── index.js ├── gulpfile.js └── src └── js └── index.js gulp-rename gulp-r
Autolinkerでテキスト内のURLなどをリンクに変換する(Javascript) | バシャログ。
どうもfujiharaです。本日はテキストで記載れたURLなどをリンクタグに変換してくれる便利なAutolinkerを紹介します。 Autolinker.js テキストエリアで入力されたURLなどを自動でリンクにするために npmで探していたら出会いました。 Autolinker.js はURLだけでなく他にも色々変換してくれます 使い方 以下のようにAntolinker.link('変換対象', option) で変換してくれます。 <div id="before-link"> URL: https://c-brains.jp<br> Mail: mail-check@test.mail.com<br> Tel: 0120-000-9999<br> Mention: @matsu_bouzu<br> HashTag: #コロナ </div> <script src="https://cd
ファイルを分割してアップロードする(Javascript, PHP) | バシャログ。
どうもfujiharaです。本日はファイルを分割してアップロードする方法をご紹介します 背景 ファイルをアップロードするシステムを作るときに容量の要望にアップロードサイズ、アップロード時間の変更で対応するには 大きすぎるサイズだったので分割してアップロードして、結合するという方法にしました。 ファイル構成 以下のようになります。uploadsはアップロード先になりますので作成しておいて下さい。 ├── js │ └── upload.js ├── index.html ├── upload.php └── uploads HTML まずは簡易HTMLです <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Upload</title> </head> <body> <p>input size <sp
便利なモーダルSweetAlert2 | バシャログ。
どうもfujiharaです。 恥ずかしながら最近まで知らなかった便利なモーダルSweetAlert2をご紹介させていただきます。 背景 フォーム実装していて通信中にモーダル出したいと思い、npmで探していたら 出会いました。Start数(12k超:2020/12/17時点)、Weekly Downloads数共に凄い数です。 使い方 いくつかご紹介します。詳しい使い方は公式サイト を参照下さい。 読み込み <script src="sweetalert2/dist/sweetalert2.all.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script> もしくは npm install して importします。 一番簡単な開くは以下で
Movable Type, JavaScript) Data API を使ってコメントをする | バシャログ。
どうもお久しぶりですfujiharaです。弊社は最近引っ越しをしたのですが、最寄り駅が日本大通りという駅になりました。 名前の由来とかは全くわからないのですが、大それた名前じゃんと毎回思っています。 本日はMovable Type Data APIでコメントをする方法をお伝えします。 背景 フロントからコメントをする場合にはMTの通常機能でもできるのですが、コメントのカスタムフィールドも更新したかったため Data APIを使用しました。 仕様 こちらになります。 前回ご紹介した投稿時と基本は同じです。 コード //記事基本データ const postComment = { body: 'body', customFields: [] }; //カスタムフィールド設定 postComment.customFields.push({ 'basename': '{カスタムフィールドの値}',
【three.js】【parcel】【dat.GUI】環境を作る | バシャログ。
こんにちは。kyamashitaです。 前回は three.js の example を修正して海を表示してみました。 今回は環境を作ってみましたので、ご紹介しようと思います。 構成 sampledir/ src/index.html src/index.js pacage.json インストール npm init -y npm i --save-dev parcel-bundler three npm run start で実行できるようにします。 package.json "scripts": { "start": "parcel start ./src/index.html --no-cache --no-source-maps --target browser" }, 正方形を表示 src/index.html と src/index.js を以下のようにし、正方形を回転させながら
Movable Type, JavaScript) Data API で記事のカスタムフィールドにアセットを紐付ける | バシャログ。
どうもfujiharaです。リモート勤務になりめっきり平日に歩かなくなりました。（1日外出しないことも多々あり） 本日はMovable TypeのData APIを使って記事を操作する時に、カスタムフィールドに画像アセットがある場合の登録方法をご紹介いたします。 はじめに Data APIを使うと管理画面にログインせずに各種データの操作を行えます。 詳細 説明 本来だと以下の流れになります、今回は記事の登録箇所のみ説明いたします。(3) ユーザー認証(2,3の際のリクエスト時に取得したアクセストークンを使用) 画像を登録 登録した画像のデータを付与して記事登録 コード //記事基本データ const postEntry = { title: 'title', body: 'body', excerpt: '', status: 'Publish', allowComments: true,
【Three.js】海を表示してみる | バシャログ。
こんにちは。kyamashitaです。 今回は three.js のexampleを修正して海を表示してみました。 Three.js の example https://threejs.org/examples/ にすばらしい例がたくさんありますので、参考にします。 今回は webglshadersocean2 を参考にしました。 https://threejs.org/examples/webglshadersocean2.html すでに海なのですが、カメラの位置等変更してみます。 構成 Three.jsの公式サイトからダウンロードし、以下のような構成にします。 index.html に webglshadersocean2 のコードをコピーし修正していきます。 build/ docs/ editor/ examples/ files/ src/ test/ utils/ index.
JSのソート | バシャログ。
こんにちは。kyamashitaです。 JSで配列のソート実装した際に、ちょっとハマったので、備忘録として残しておきます。 単純な数値配列 let items = [5,2,3,1,4]; // 昇順 items.sort((a,b) => a < b ? -1 : 1); > [1, 2, 3, 4, 5] // 降順 items.sort((a,b) => a < b ? 1 : -1); > [5, 4, 3, 2, 1] 連想配列でキーを指定する let items = [ {"name":"BB", "val":5}, {"name":"EE", "val":2}, {"name":"DD", "val":4}, {"name":"AA", "val":3}, {"name":"CC", "val":1}, ]; // val の 昇順 items.sort((a,b) => a
MovableType.net フォームにバリデーション付きの確認用メールアドレスフィールドを追加する | バシャログ。
どうもfujiharaです。今回はMovable Type .netフォームにバリデーション付きの確認用メールアドレスフィールドを追加する方法をご紹介いたします。 背景 弊社でもサイト構築時によく利用させてもらっているMovableType.netですが サイトにフォーム機能をもたせる時はMovableType.net フォーム機能を使用します。 フォームを作成してサイトで使用するにはフォーム用のドメインに飛ぶか iframeで埋め込んでサイトに表示するのですが フィールドにバリデーションを設定する時にはカスタムバリデーションをつかった方法で実装します。 カスタムバリデーション 確認用メールアドレスの追加 確認用メールアドレスフィールドを設けるかの是非は一旦置いておいて、追加したいとなった時にデフォルトの機能では どこかのフィールドと比較するといったような機能が無いのでカスタムバリデーショ
JSでエクセルを扱う ( SheetJS js-xlsx が凄い ) | バシャログ。
どうもfujiharaです。本日はブラウザJSでエクセルを扱える、SheetJS js-xlsx を紹介します。 背景 あるデータをブラウザ上で表示したいが、スプレッドシート(apiを利用)やCSVファイルを編集(エクスポート)するのは 避けたいということで探していたところ、npmにSheetJS js-xlsxというものがありました。 サンプル 今回はエクセルからHTML, CSV(配列)への変換をします。 npm インストール npm install xlsx csv-parse javascript ※IE11対応の場合の箇所追記しました。 import XLSX from 'xlsx'; import parse from 'csv-parse'; //IE11対応の場合は import parse from 'csv-parse/lib/es5'; fetch( '/data/s
React-Calendar が便利 | バシャログ。
どうもfujiharaです。先日人生2回目となる鳥の糞被弾を味わいました。ドラゴンボールスクラッチでもやってみようかな。 本日はReactでカレンダーを実装する時に便利だと思ったReact-Calendarをご紹介します。 React Calendar React でカレンダーないかなぁって探していたら見つけました。以下が売りらしいです。 React Calendar 様々な表示形式（月、年、10年) レンジセレクトができる マルチ言語対応 moment.jsを使用していない 実装 react-calendar を npm でインストールしたら、以下のようにして使えます。 import React from 'react'; import Calendar from 'react-calendar'; export default class App extends React.Compo
Create React App で SSR してみた。 | バシャログ。
どうも fujihara です。あけましておめでとうございます。今年もよろしくおねがいします。 本日は勉強がてら Create React App で初回に表示されるものを Server Side Rendering する方法をご紹介します。 はじめに Create React Appでプロジェクト作ると、いい感じの開発環境できるんですが、 サーバサイドレンダリングはしてくれていないので、どうにかできないかと思って 初期段階のもので設定してみました。 webpack.config.js などの設定は要リファクタリングです。 また自動生成された src 配下は極力いじらないようにしてあります。 必要モジュールのインストール Create React App した時点でかなりのモジュールがインストールされているので必要な分だけインストールします $ yarn add webpack-cli e
ブラウザで特定のドメインをブロックする方法 (Chrome 小ネタ) | バシャログ。
どうもfujiharaです。あつすぎて氷ばっかり食べちゃいます。 本日は社内ネットワークから特定のドメインへのアクセスが許可されていない状況を擬似的に作る方法をご紹介いたします。 背景 Webページに YouTubeの埋め込み動画を表示するサイトで、環境によってはYouTubeドメインへのアクセスが許可されていない場合が あるのでその場合はスライドショーを表示して欲しいという要望がありました。 発見 どうやってこの状況を作るかってときにネットを探すと hosts を書き換えればできるよってことでなるほどと思い書き換えました。 そうしたら、「あれ？つながってる」。。ブラウザを一旦閉じるとうまくいきました。 確認方法ですが、Chromeの開発ツールでネットワークタブを見てブロックしたいNameのstatusを確認していました。 何気なく右クリックしたら、なんとありました！ 赤枠部分が上の画像で
MTプラグインを使わずにページングを実装する (Movable Type 6, 7) | バシャログ。
どうもfujiharaです。 梅雨っぽいですね。 本日は Movable Type でMTプラグインを使わずにページング機能を実装する方法をご紹介します。 背景 Movable Type 7 が出ましたね。弊社の案件で更新作業があったのですが、よく使われるPageButeがまだ 対応していないことがわかっておりました(Movable Type 7 RC リリースのお知らせと、正式リリース日のご案内)ので 今回実装を考えました。 仕様 以下の方針で実装しました。 インデックステンプレートに記事用のjsonを登録する アーカイブページは1ページ出力のみ(カテゴリー、年月) アーカイブページでjson を取得して、記事をフィルタリングする。 クエリーでページを指定 ページング表示は外部 jQueryプラグインを使用 インデックステンプレート インデックステンプレートは記事のタイトル、日付、リンク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
