【お知らせ】バシャログ。メンバーが所属する株式会社シーブレインのWebサイト制作サービスのサイトがリニューアルしました | バシャログ。
本日は弊社シーブレインのWebサイト制作サービスのサイトをリニューアルしましたので、お知らせします。 →リニューアル以前のデザインはこちら 今回のリニューアルにより、下記の2点が主に変更になっています。 （その他細かな部分も修正しています。） キービジュアルの変更 構成の変更 キービジュアルの変更について 爽やかな青空が広がる横浜の風景にキャッチコピーを載せています。 弊社のWeb制作事業部がもっとも大切にしていること、それは「お客様に対してどこまでも誠実な対応を誇りとする」ということです。 ファーストビュー（最初に目にする部分）を変更したことにより、コンセプトが一目で伝わるデザインとなりました。 構成について リニューアル以前は縦長1ページで構成していたのですが、今回のリニューアルで「シーブレインにできること」「制作実績」「料金例」「会社概要」をそれぞれ階層に分けました。 縦長1ページの
【Docker】初心者向けDocker基礎編 | バシャログ。
こんにちは。nakagiriです。 今年は梅雨が明けるのが早くて毎日真夏並みに暑いですね。( ´∵｀) みなさんも熱中症にならないように気をつけてください。 今回からDockerについて全四回に分けて解説していきます。 一回目の本記事では、「Dockerって何だろう？」、「Dockerを使うとどんなメリットがあるのだろう？」といった疑問を解決するDockerの基礎編です。 Dockerに関する記事はたくさんありますが、難しい言葉が多く羅列されていてなんとなく難しいイメージを持たれている方もいるかもしれません。そこで、イラストを使ってなるべくわかりやすく噛み砕いてお伝えしていきたいと思います。 二回目以降の記事では、実際にDockerを使って解説していくので、ぜひ一緒にやってみてください。（※実際の構築は、Docker Composeを使用して解説する予定です。） Dockerとは？ Doc
【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で読込表示させてみます。 各コンポーネントをとりあえず以下の
【React】「Create React App」を用いた「React」の環境構築手順について | バシャログ。
こんにちわ山崎です。今回は「React」の連載第二弾として、Facebook社が公式で出している「React」の環境構築ライブラリの「Create React App」を用いたReactの環境構築について書きたいと思います。 なお、「Create React App」の公式サイトは以下になります。 https://ja.reactjs.org/docs/create-a-new-react-app.html "https://ja.reactjs.org/docs/create-a-new-react-app.html 動作環境 OS: Mac OS Catalina 10.15.7 Node.js: v18.2.0 yarn: 1.22.18 ※「Node.js」と「yarn」は動作確認時の最新バージョンを使用しています。 「Create React App」をインストールして利用する。
【React】イラストで基礎を解説してみる（初心者向け） | バシャログ。
はじめまして。去年の9月にコーダーとして入社したnakagiriです！ 今日は、勉強中のReactについて解説します。 勉強する前は、先輩がReactをつかって開発をしているのは知っているけど、実際よく分からない。 そんな状態だったので、この機会にReactについてどのような特徴があるのか一つ一つ整理してまとめてみます。 この記事のゴール Reactにはどのような特徴があるか理解すること この記事の対象となる方 HTML、CSS、jQueryを使ってWEBサイトを作ってみたことがある方 Reactの特徴を知りたい方 そもそもReactとは？ Facebookが開発しているUIに特化したJavaScriptライブラリです。 FacebookやInstagram、Netflix やYahoo!にも使われている技術。 Vue.jsやAngular.jsと比較されること多い。 Reactの特徴 R
ブラウザで録音した音源とアップロードした音源を合成する | バシャログ。
こんにちわ。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
【WordPress】ページや権限によってアクセス制限をかける | バシャログ。
みなさんこんにちは、yamashitaです。 今回はWordPressでログインの有無やユーザー権限によってアクセスできるページを設定する方法を紹介します。 これにより、クローズドな情報などを掲載することができます。 パスワード保護もありますが、複数ページを同時にアクセス制限する場合などに使えます。 ログインしていない場合はどのページも見られない // アクセスされてるURLを取得 $url = $_SERVER['REQUEST_URI']; $parseUrlArray = parse_url($url); // ログインページのURLを取得 $parseLoginUrlArray = parse_url(wp_login_url()); // ログインページの一致していない且つ、ログインしていない if ((strpos($parseUrlArray['path'], $parseL
Compoships 関連モデルを複数の外部キーで紐付ける[Laravel] | バシャログ。
どうもfujiharaです。今回はLaravelで関連モデルを設定する時に複数の外部キーで紐付ける方法をご紹介します。 同じ悩みを抱えてる方がこの記事のタイトルで発見してくれるか不安です。 背景 外部サービスからデータをインポートする時に以下のような状態でした。（例） Cityのcodeがユニークかと思ったら、prefecture_codeとの複合ユニークでHospitalと紐付けるには 外部キーを複数で設定する必要がありました。 インポートする時にidで紐付けるようにすればとも思ったんですが、インポート時に検索クエリを出したくないのもあり そのままインポートしました。 Compoships 今回の場合、HospitalはCityにBelongsToなのですが、LaravelのBelongsToを 設定する際に設定できる外部キーは1つだけなのでComposhipsを導入しました。 設定する
![Compoships 関連モデルを複数の外部キーで紐付ける[Laravel] | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/38df73ea9287c2b00c7f1fa73834a56a2278336c/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2FLaravel-logo.jpg){kind=logo}
ShifterやWP2Staticで出力されないパスを出力する（リクエストする）[WordPress] | バシャログ。
どうもfujiharaです。 今回はShifterやWP2Staticで 任意のパスを書き出したいときのTips紹介になります。 背景 Jamstack流行ってますね。WordPressでもちらほら対応することが増えてきました。 ShifterやWP2Staticは自動でパスを探して出力してくれるのですが、 追加でwp-jsonのパスも出力して欲しいことがある場合もあります （URL検索ではヒットしない）。 そんな時に、出力時このパスもチェックしてね！という機能があるのでご紹介します。 Shifter ShifterURLS::AppendURLtoAll フィルターを使います. function append_additional_url ( $urls ) { $urls[] = home_url('任意のパス'); return $urls; } add_action( 'init'
React Testing Libraryとjestを使ってReactアプリケーションのテストをしてみた | バシャログ。
こんにちわ、山崎です。久々の投稿になります。 今まで自動テストをやってこなかったので、「React Testing Library」と「jest」を組み合わせてReactアプリケーションのテストをする方法を学んだので、アプリケーションテストの簡単なサンプルを紹介したいと思います。 create-react-appでReactアプリの雛形を作成する まずcreate-react-appでReactアプリケーションの雛形を作成します。 （今回仕様したnode.jsのバージョンはv15.14.0になります。） npx create-react-app rts テスト対象のコンポーネントを作成する そして、次にテストするReactのコンポーネントを作成します。 今回は超シンプルなToDoアプリを作成しました。 まず、srcディレクトリにTodo.jsを作成します。 import React fro
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
BrowserSyncでAliasっぽい設定 | バシャログ。
どうもfujiharaです。ジメジメして生活しづらい季節ですね。本日はBrowserSyncでAliasを使いたいと思い調べていたら、似たように 使用できる方法があったのでご紹介いたします。（知らなかった。。。） 背景 弊社ではシステム開発する際にコーディングリポジトリとシステムリポジトリを分けることがあるのですが、 コーディングのCSS,JS,IMGをシステムリポジトリに反映するのが結構手間で、以前ブログに書きました gulp-directory-syncを使い、同じリポジトリで開発できるようしていました。 しかしこの方法だとファイルが2重管理になるので嬉しくありませんでした。 でAliasの設定ってないのかな（あるだろう）と思い調べていたら、 なかったのですがオプションでMultiple base directoriesというものがありました。 これを使えばdirectory-sync
【MovableType】include_blogsを使わないテンプレート運用 | バシャログ。
どうもfujiharaです。今年は全国的に梅雨が入り早いそうです。人は話題が無い場合天気の話をすることが多いらしいです。 本日はMovableTypeのマルチブログ機能 のinclude_blogsを使わないで、ターゲットとなるブログ情報を取得する方法をご紹介します。 背景 ブログ（サイト）で別のブログを出力する場合以下のようにするのが一般的かと思います。 <mt:Entries include_blogs='x'> ... ... ... </mt:Entries> ただ、サイトをバックアップ、復元するとブログ、サイトのIDがずれるのでそのたびに直さないといけません。 なのでブログ名で判定し以下のようにしていました。(今回の場合ブログ名はtarget_blog_name） <mt:Blogs> <mt:If tag="BlogName" eq="target_blog_name"> ..
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 = {
SVG画像のHTMLでの使い方 | バシャログ。
こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
【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
429 (Too Many Requests)を回避する(Laravel 8) | バシャログ。
どうもfujiharaです。先日ステータスコード429というのに出会いました。 調べると利用していたLaravel8が出していました、今回はこれを回避する方法をご紹介します。 背景 先日アップした分割アップロードの バックエンドの処理をLaravel8で行っていました。ローカルでは問題なく動いてたのですが本番で動作確認を行うと ファイルが大きいときにエラーを出していました。 レスポンスコードを見ると、"429 (Too Many Requests)"とはじめはNginx側で制限とかあるのかなと 調べていたのですが、LaravelのApi Routeは1分間で60回のリクエスト制限があることがわかりました。 解決方法 変更方法は本サイトのRate Limiting を参考にRouteServiceProviderに以下のようにしました。 protected function configur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG画像のHTMLでの使い方 | バシャログ。