PWA化とは？ PWA(Progressive Web Apps)化とは、「Webサイトをアプリのように動くようにする」ことです。 例えばスマホのアプリのようにホーム上にアイコンが表示されるようになり、一つの単独のプロセスとして動作するようになったり、アプリ同様にプッシュ通知が送れるようになったり、またキャッシュによりオフライン状態でもある程度動かすことも可能になります。 以前はモバイルサイトのみの対応でしたが、現在はデスクトップでもPWAに対応しています。 既存のWebサイトをあとからPWA化することもさほど難しくありませんし、特にデメリットもネイティブアプリを既に運用している場合以外見当たりませんので、導入を検討してみてもよいのではないでしょうか。 WordPressでのPWA化 WordPressでも自力でPWA化することは可能ですが、簡単なのは、プラグインを利用することです。 プラ

正規表現 (Regex) を利用してCSVファイルやTSVファイルを読み込むコードを紹介します。 概要 Regex.Split()メソッドを利用すると、CSVをカンマの区切り文字でパージングすることができます。 正規表現の作成 基本は区切り文字となる「,」(カンマ)を探す正規表現を利用します。 下記の正規表現式では「,」を検索できますが、「"」(ダブルクォーテーション)内のカンマも検索されてしまします。 , 「"」で囲まれた内部のカンマを除外するため以下の条件を追加します。 カンマ以降の文字列に「"」が無い カンマ以降の文字列に「"」が偶数個ある 具体例として文字列の途中で「,」が見つかった状態で「,」以降の文字列が分かっている場合、下記の例では先頭の「,」は区切り文字のカンマと判定できます。

2017-07-23日記事の一部を変更しました。 はじめに はじめまして、いつもQiitaでいろんな方の投稿を見させて頂いています。 今回環境構築でどっぷりハマったので備忘録＋誰かが見てくれたらいいなと思って書いてみます。 結論 ~/.laradock/data/mysql下のファイルが壊れている可能性があります！ Delete or Rename後 docker-compose up -d nginx mysqlで幸せになれるかも？ ->ERROR 1146 (42S02): Table 'information_schema.SCHEMATA' doesn't exist #1047 - 引用 Removed image $ docker rmi laradock_mysql Remove container $ docker rm laradock_mysql Located DAT

こんにちは、@yoheiMuneです。 Laravelで実装していて、親テーブル取得時に関連する子テーブルの一覧も合わせて取得したいことがあると思います。そんな時に便利なwith関数について、今日はブログを書こうと思います。 目次 何がしたいのか 例えば、投稿を表現するpostsテーブルと、その投稿内容(=1〜N枚の画像)を表現するpost_contentsテーブルがあるとします。特定のPostを取得した際に、それにひもづくPostContentsを一覧で取得したい場合に、どうしたら良いかを記載しています。 手順1：モデル定義で関連(hasMany)を表現する まずは、PostsとPostContentsのモデルを定義し、hasManyを用いて関連も合わせて定義します。 <?php namespace App; use Illuminate\Database\Eloquent\Model;

text.md はじめに formrun (フォームラン）という「急なフォームの設置を依頼されたときに短時間で導入できるお問い合わせフォーム」を作ったので，具体的な利用例のコードを紹介したいと思います。 https://form.run/ 対象の読者 フォーム設置にストレスを感じたことのあるエンジニア・デザイナー 背景 IT企業にお勤めのエンジニアの中で、 お問い合わせフォームの設置を意味不明な納期で依頼されるという経験はありませんか？ （私の日常の中では、年に数回ほどそのような依頼を社内から受けることがあります。） 例えば、 「コーポレートページのお問い合わせを新設したいからフォーム付けといて」とか、 「採用エントリー20xx年版の公開をしたいからフォーム作って」とか、 「資料請求用のフォームを設置しといてよ」 というような依頼がくるわけですね。 しかもほとんどの場合、その依頼はリリース

サイトのSSL対応。一昔前は、閲覧者が個人データを送信する必要のないサイトでは、わざわざSSL対応させる必要は無く、せいぜいフォームページのみの対応で良かったものだったけど、近頃はどんなサイトでもSSL化していないと、ブラウザがアドレスバーでわざわざ「保護されていない通信」とか注意して不安を煽って来ます。 この「大石制作ブログ」も、これまでずっとSSL未対応で運営してきましたが、サイト制作のプロとしてお金を頂く立場である以上、それくらいやっておけよって話なので、重い腰を上げてSSL対応させる事にしました。 SSL対応するだけでサイト表示がちょっと高速化したり、SEO的にも優位だったりするはずなのでがんばろうぜー……という訳で、今回はその作業メモです。 目的 http通信で表示されていた大石制作ブログをSSL対応し、https通信で表示できるようにする 既存のhttpで表示されていたページを

やりたいこと Docker上で、nuxt build したファイルを、S3にあげたい。 ただ、Docker上にAWSのアカウント情報をもたせたくなかった。 流れとして、github push -> code pipeline -> code build -> ecs deploy の code build 部分で、S3へ Nuxt の assets ファイルをデプロイしたかった。 やったこと code pipeline とか、code build の基本設定は、もともとできてるとする。 code build 内では、Docker build が走っていて、そのDocker内で、Nuxt の build が走っていて、それが Image として生成されている。 code build の build_spec.yml で、以下の.sh を実行する。 IMAGE = [Nuxtをbuild済みの

はじめに Vue.jsはインスタンスが持つプロパティ（dataやprops）の変更を検知して、DOMの内容を変更したり、イベントの発火を行うことができます😇 しかし、Vue.jsのドキュメントに以下のようなことが書いてあります。 モダンな JavaScript の制限(そして Object.observe の断念)のため、Vue.js はプロパティの追加または削除を検出できません。Vue.js はインスタンスの初期化中に、getter/setter 変換処理を実行するため、プロパティは、Vue がそれを変換しそしてそれをリアクティブにするために、data オブジェクトに存在しなければなりません。 Vue.jsはプロパティの追加または削除を検出できません。👈コレ Vueはすでに作成されたインスタンスに対して動的に新しいルートレベルのリアクティブなプロパティを追加することはできません。 簡

なにこれ 最近Vue.jsのマテリアルデザインのUIフレームワーク「Vuetify」を使っています。 とても便利で、管理アプリのようにデザインにこだわる必要がなければ、CSSをほとんど書かずに済むくらいコンポーネントが充実しています。 ただSelectタグでlabelとvalueを出しわける際に初期値を設定する場合は少しだけ注意点があるので、この記事ではそちらを紹介します。 return-objectを使いましょう Selectタグでlabelとvalueを出しわけるときに初期値を設定する場合、v-modelで設定します。 以下のような実装です。 <template> <div> {{ selectedPlan }} <v-select v-model="selectedPlan" item-text="label" item-value="value" :items="plans" la

こんにちは、@yoheiMuneです。 今日はLaravelネタで、Eloquentで独自属性（独自のプロパティ）を定義して、それをJSONに含めて返す方法をブログに書きたいと思います。 目次 何がしたいのか Eloquentで作成したモデルは、対応したデータベースのテーブルを表現しています。例えば、ユーザーの投稿を表現するpostsテーブルがあるとします。その中で投稿ファイルの名前を保持するフィールド（file_name）がある場合に、クライアントへのレスポンスはファイル名ではなくてファイルにアクセス可能なURLで返したいという場面が多いです。 // 取得できるものはfile_name file_name : '1.jpg' // しかし、クライアントへ返却したいのは、それにアクセスするためのURL file_url : 'https://xxx.s3.ap-northeast-1.am

こんにちは！SCOUTERでフロントエンドエンジニアをしている匠平です。 SCOUTERではフロントエンドをVue.js(Nuxt.js)で開発しています。 Vue.jsのイベント修飾子の使いどころがいまいち掴めていなかったので、簡単な事例を挙げて理解していきたいと思います。 Vue.jsのイベント修飾子 イベント修飾子は以下の6種類があります。 .stop .prevent .capture .self .once .passive 公式ドキュメント イベント修飾子 中でも使用頻度が比較的多い.stopと.preventの使い方を見ていきましょう。 使い方と使いどころ .stop .stopはJavaScriptのstopPropagationを呼び出します。 現在のイベントのさらなる伝播 (propagation) を止めます。 MDN event.stopPropagation Vu

Laravelにはデータベースやメールの情報等を記載するenvというファイルがあります。このenvファイルの内容を変更しても反映されない場合の対処法を備忘録として残しておきます。 まずは、下記コマンドでキャッシュをクリア 上記でconfigキャッシュをクリアしても、まだenvの内容が反映されない場合は、bootstrap/cache/config.phpの情報が優先されている可能性があるので、下記コマンドでbootstrap/cache/config.phpを削除します。

先日、AWS上に乗ったRailsのアプリケーションがうまく動いておらずログを見てみると、No space left on deviceというエラーメッセージが吐き出されていました。 ディスクサイズ不足が原因で、空きスペースが足りないためにコンパイル作業ができなかった模様でした。 結局、無駄に容量を食っているファイルを削除して問題を解決したのですが、どこのフォルダ・ファイルが容量を食ってるんだ？と調べる機会は多いと思います。 今回はディスク不足になった時や大きなサイズのファイルを探す時にどのようにすればいいのかについて説明をしたいと思います。 大まかに以下のような手順となります。 では詳しく説明していきます。 dfコマンドでディスクの使用状況の確認 まずはディスク全体の使用状態を確認します。(結果は適当です) df -h Filesystem Size Used Avail Use% Mou