KEISUKE KURITA

栗田啓介と申します。都内のとある大学に通っていました。 noteでは、プログラミングや…

KEISUKE KURITA

栗田啓介と申します。都内のとある大学に通っていました。 noteでは、プログラミングやブログに関する記事を書いています。 自分の勉強したことや、ぶち当たった壁についてのメモを主に残します。

  • JavaScript勉強日記

    自分がJavaScriptについて勉強して、ためになったなと感じたプログラムの知識をひたすら書き残すマガジン。

  • 雑学日記

    自分の考えたことや、メモに残しておきたいことをひたすら更新するマガジン。

  • PHP勉強メモ

    PHPについて自分がハマったことや、ためになったと思うことをひたすらに書きなぐるマガジン

  • ブログ運営メモ

    僕のブログの運営状況についてメモをしていきます。アクセス解析や分析することで得られる運営方針の決定について残していきます。 『建築学科のための材料力学』：https://materialmechanics.work

  • 基本情報技術者試験 勉強メモ

    基本情報技術者試験に向けて勉強を行い、そこで覚えておきたいことをアウトプットすることで自分の理解を深めようとするメモ

すべてのマガジンを表示

Vueのカスタムディレクティブでパララックス（視差効果）を実装する

Vuetifyにあるようなパララックスをプラグインを導入せずに実装したのでその際のメモnoteを残します。 カスタムディレクティブを登録今回はパララックスを実現するためにVueのカスタムディレクティブを使用し、再利用性を高めたものを作ります。こんな感じ： const app = new Vue({ el: '#app', directives: { parallax: { inserted(el, binding) {

KEISUKE KUR…

    • Vue + SVGでセル・オートマトンルール30を描く

      セル・オートマトンについて触れる機会があり、実際に手を動かしてみた方が勉強になるかと、学習してみたのでそのメモnoteを残します。 セル・オートマトン？ウィキペディアより セル・オートマトン（英: cellular automaton、略称：CA）とは、格子状のセルと単純な規則による、離散的計算モデルである。計算可能性理論、数学、物理学、複雑適応系、数理生物学、微小構造モデリングなどの研究で利用される。 ざっくりと砕けた説明をするならば、「格子状のセルの色（状態：0 or

      KEISUKE KUR…

      • marked.jsでimg(画像)に共通のクラスを追加する

        意外と調べてみてもやり方が載っていなかったので、自分用メモを残します。僕の場合はBootstrapのimg-thumbnailクラスを全<img>タグに追加したかったので、そんな時は let renderer = new marked.Renderer();renderer.image = (src) => { return `<img src="${src}" class="img-thumbnail">`;}; 以上！

        KEISUKE KUR…

        • シンボリックリンク 403 Forbbitten & Symbolic link not allowed or link target not accessible

          シンボリックリンク設定につまづき、3日間浪費してしまいました。次同じような場面に遭遇したときのための、解決メモnoteを残します。 エラー内容シンボリックリンクを利用して、画像ファイルを表示したかったのですが、Chromeの開発者ツールにこんなエラーが表示されていました。 403 Forbbitten 「アクセス権がありません」ってことですが、シンボリックリンク先のパーミッション等を確認しても、755になっており間違いはありませんでした。 Apacheのエラーログを確

          KEISUKE KUR…

        Vueのカスタムディレクティブでパララックス（視差効果）を実装する

        KEISUKE KURITA

        マガジン

        • JavaScript勉強日記
          11本
        • 雑学日記
          10本
        • PHP勉強メモ
          11本
        • ブログ運営メモ
          24本
        • 基本情報技術者試験 勉強メモ
          2本
        • ブロックチェーン勉強メモ
          1本

        記事

          LaravelでMaterial Design Iconsを使う

          自分用メモnote。 npm経由でインストール$ npm i mdi app.scssの編集@import '~mdi/scss/materialdesignicons.scss'; // こいつを追加 アイコンを表示<i class="mdi mdi-home"></i> おしまい。

          KEISUKE KUR…

          LaravelでMaterial Design Iconsを使う

          KEISUKE KURITA

          Laravel + Vue + Axiosでmultipart/form-dataをPUTする

          タイトル通りの記事ですが、若干つまづいたことがあったためメモを残します。 クライアント側ポイントは_methodパラメータをつけてあげることと、postで送信することです。 export default { data() { return { userId: '', userName: '', avatarImageData: '', // Blobデータが入る }; }, m

          KEISUKE KUR…

          Laravel + Vue + Axiosでmultipart/form-dataをPUTする

          KEISUKE KURITA

          Laravel5.8でMaterial Design for Bootstrapを使う

          意外とインストールのやり方を記載している日本語の記事が少なかったので、自分用のメモも兼ねてnoteを残します。今回はMaterial Design for Bootstrapを使用します。 実行環境 Laravel 5.8.35 Node 10.12.0 npm 6.4.1 mdbootstrapのインストールはじめにnpm経由でmdbootstrapをインストールします。 $ npm install mdbootstrap bootstrap.jsの編集/resou

          KEISUKE KUR…

          Laravel5.8でMaterial Design for Bootstrapを使う

          KEISUKE KURITA

          MacでWindows環境でも文字化けしないZIPファイルを作成

          Qiitaで非常にわかりやすい記事があったのですが、自分のようなパソコンわからない人間に向けてよりメモを残します。 Macで圧縮したファイルをWindowsで開くと文字化けするMacのFinderから圧縮したZIPファイルをWindowsで開くと文字化け問題に直面しました。ということで、自作コマンドでWindowsで開いても文字化けしない圧縮ファイルを作成しましょう。 ターミナルからファイル作成はじめにターミナルを開きましょう。 ターミナルが表示されたら、下のコマンド（

          KEISUKE KUR…

          MacでWindows環境でも文字化けしないZIPファイルを作成

          KEISUKE KURITA

          Laravel + Vue CLI 3でバックエンドカスタマイズ可能なSPAを作る

          「Vue CLI 3でrouterを使ったSPAを作りつつ、バックエンド側はLaravelで自在に作りたい！」という願望を前から持っており、実際にやってみたのでメモを残します。 こちらのnoteはVue.jsの開発者であるEvan YouさんのGItHubを参考にしています。 実行環境 macOS Mojave 10.14.6 PHP 7.1.23 Composer 1.8.3 Node.js 10.12.0 nom 6.4.1 それでは内容に入っていきます。 Lar

          KEISUKE KUR…

          Laravel + Vue CLI 3でバックエンドカスタマイズ可能なSPAを作る

          KEISUKE KURITA

          Laravel + Vue + MySQLで簡易投票機能を作る

          下の画像のような簡易投票機能を作ったので、そのメモを残します。 作成したものは、こちらから試してみてください。想定した要件は以下のようなものです。 要件s ・投票は1IPアドレスにつき1回 ・<form>ではなくaxiosの非同期処理で実装 前提として、LaravelでVue・axios・Bootstrap・FontAwesomeが使えるものとします。（BootstrapとFontAwesomeはなくても動きますが...） 実行環境 Laravel 5.8.23 M

          KEISUKE KUR…

          Laravel + Vue + MySQLで簡易投票機能を作る

          KEISUKE KURITA

          Twitter運用と画像付きツイートの注意点

          8月のブログ運営メモを残します。 運営サイト：建築学科のための材料力学 Twitter：@mtl_mechanics Twitterフォロワー100人達成2019年1月に始めたブログ用Twitterのフォロワーが、8月中に100人を達成しました。 ブログ用Twitterは、毎日定時に作成されたツイートコンテンツからランダムに1つツイートするBotアカウントです。こちらはTwitterからブログへの集客することが主な目的です。1月から8月終わりまでのおよそ240日で100

          KEISUKE KUR…

          Twitter運用と画像付きツイートの注意点

          KEISUKE KURITA

          Google Analytics(gtag.js)でイベントトラッキングを送信する

          普段からGoogle Analyticsを利用してサイトのアクセス情報を収集していましたが、イベントトラッキングという便利な機能があるようで試してみましたので、そのメモnoteを残します。 こちらのnoteで記載する内容は、アクセス解析にgtag,jsを利用している方法です。analytics.jsではありませんので、ご注意ください。 イベントトラッキングとはGoogle Analyticsのイベントトラッキングとは、Webページ上でユーザーが行なった行動を保存することが

          KEISUKE KUR…

          Google Analytics(gtag.js)でイベントトラッキングを送信する

          KEISUKE KURITA

          フロントページアクセス遷移とアドセンス広告ユニット管理

          7月のブログ運営メモを残します。2019年の5月にブログのフロントページを編集しました。 フロントページを編集する前は、フロントページにWordPressのデフォルトである新規投稿一覧を表示していました。自分が運営しているブログが勉強系の解説サイトであったので、ユーザーのアクセシビリティの向上を目的として、フロントページをサイトの目次へと追加しました。 ▽▽▽編集後のフロントページ▽▽▽ 本ブログ運営メモでは、フロントページを編集したことによってフロントページへのアクセ

          KEISUKE KUR…

          フロントページアクセス遷移とアドセンス広告ユニット管理

          KEISUKE KURITA

          【2019年6月】フロントページとリターニングビジター（リピーター）

          6月のブログ運営メモを残します。５月下旬に運営サイトのフロントページを編集しました。 編集前は、フロントページに新規投稿一覧を表示していました。サイトの記事が100を超えたこともあり、ユーザーのアクセシビリティの向上のため、新規投稿一覧から、サイト目次へとフロントページを編集しました。 ↓↓↓編集後↓↓↓ フロントページの編集によって、ユーザーにどのような変化が現れたかをこちらのnoteではまとめていきます。 運営サイト：建築学科のための材料力学 アクセス解析ツー

          KEISUKE KUR…

          【2019年6月】フロントページとリターニングビジター（リピーター）

          KEISUKE KURITA

          TinyMCE5とPHPで画像アップロード機能実装【ロリポップ】

          TinyMCE5で画像アップロード機能を追加するのに躓いたので、その解決策メモを残します。こちらのnoteはすでにTinyMCE5を導入済みで、更に画像アップロード機能を実装したい人向けです。 僕が作りたかったのは、まさにWordPressのようなWYSIWYG（見たままに編集）エディタです。単純なTinyMCEだけでも、pタグやaタグを含んだHTMLの生成が可能ですが、やはりそこまでできると画像のアップロード／挿入機能も欲しくなるところです。標準では画像のリンクを入力する

          KEISUKE KUR…

          TinyMCE5とPHPで画像アップロード機能実装【ロリポップ】

          KEISUKE KURITA

          MacのXAMPPにLaravelをインストールする

          標題通りの内容なのですが、いくつかつまづいたことがあったのでメモnoteを残します。 実行環境 MacOS Mojave 10.12.5 XAMPP for Mac 7.1.12-0 XAMPPからターミナルを開くXAMPPコントロールパネルから、[Open Terminal]をクリックしてターミナルを起動します。 ターミナルを開いたら、開発ディレクトリに移動します。僕の場合は、opt/lampp/htdocs/devですので、下記コマンドを実行します。 $ cd o

          KEISUKE KUR…

          MacのXAMPPにLaravelをインストールする

          KEISUKE KURITA