IMG_6139
エンジニアリングライフ

フリーランスエンジニアの14ヶ月目を振り返る(2020/5月)

noteに書いたので、こちらからご覧ください。 https://note.com/terry10/n/n3e29876aa116 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (9)
HTML・CSS

Bootstrapでよく使うクラス一覧の記事がめちゃくちゃ捗る

ネットで見つけたbootstrap4の頻出classに関する記事。 https://webnetamemo.com/coding/bootstrap4/201710065870 bootstrapのclassはいちいち覚えていないので、簡単なプロダクトのデザインを変えたい時には助かります。 僕自身は簡単なプロダクトはLaravelで作ることが多いのですが、UIテンプレートがbootstrap4なのでよく使っております。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (8)
Laravel

laravelで検索機能を実装する

Laravelde検索機能を実装します。イメージは下記の動画の感じ。タイトル、タグ、本文に対してあいまい検索を行なっています。 目次1 実装開始1.1 ①inputタグを作る1.2 ②controllerに検索処理を書く1.3 ついでにページネーション入れる 実装開始 ①inputタグを作る まずはformのinputタグを作って見た目の部分を整えます。今回はbootstrapを使っているので、classが見にくいかもしれません。 ポイントは ・formのactionを入れない事。・inputのvalueをvalue=”{{request(‘search’)}}”にする事(入力すると値がURLに反映されます)。 辺りかなと。 ②controllerに検索処理を書く 検索機能のポイントは ・whereでLIKEを使う事であいまい検索にしている・orWhereを使う事で、タイトル、タグ、本文今違って検索している 辺りです。 ついでにページネーション入れる ページネーションはこれですね。検索結果や一覧ページをページに分けて表示するやつです。 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (8)
Laravel

Laravelのfactoryでダミーデータを生成する!

テスト用にダミーデータが欲しいときの方法を記します。Laravelにあるfactoryを使えば、このようにダミーデータを50件直ぐに用意することが可能です。 一覧画面 内容 目次1 手順1.1 前提1.2 ①factoryを生成1.3 ②PostFactory.phpにコールバック関数を定義する1.4 ③tinkerで作成できるか試してみる1.5 seederを使って量産する 手順 前提 DBが既にある前提でダミーデータを生成していきます。今回は投稿を複製したいので、postテーブルを使います。 構造はこんな感じ ①factoryを生成 こちらのコマンドでfactoryが database/factories配下に作成されます。 ②PostFactory.phpにコールバック関数を定義する …

Read More
about_img01_pc@2x
PHP

EC-CUBE4.0の新着商品を自動で取得する

久々にEC-CUBEについてです。半年前に制作したECの回収券の案件が入ったので、備忘録がてらまとめていきます。 目次1 なぜ新着商品の自動取得が必要なのか2 具体的な手順2.1 1 TwigExtension.phpを作成3 2.TwigExtension.phpにコード記述3.1 3.コンテンツ管理のブロック管理から新着商品のコードを書き換える3.1.1 4.css管理からcssでスタイリング なぜ新着商品の自動取得が必要なのか 最初にインストールした直後のEC-CUBEだと新着商品のブロックは手動での記述を行う仕様になっています。 アイスクリームが3つぐらい書いてあるここですね!! なので、この場所は新商品が更新されるたびに、コードを書き換える必要が出てきます!!ですので、ECサイト制作者の方は自動で新着商品が変わる様にしてあげると、クライアントさんに喜ばれやすいかなーと思います。 具体的な手順 手順は以下の通りです。 /app/Customize/Twig/Extension/TwigExtension.phpを作成する TwigExtension.phpに新着商品を表示するためのコードを記述 コンテンツ管理のブロック管理から新着商品のコードを書き換える …

Read More
qiita
エンジニアリングライフ

web制作の実案件で僕が受けたフィードバック箇所を重要度でレベル分けして見た

久々にqiita方に書きました。案件でもらったフィードバックなどは、こうやってちょくちょくまとめておきたいと感じますね!! https://qiita.com/terry_6518/items/3eb87111daaa57ebddd7 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (8)
Laravel

Laravel Debugbarを使ってサクサクデバッグしよう!

目次1 Laravel Debugbarとは?2 Laravel Debugbarの導入方法2.1 Laravel Debugbarの使い方2.1.1 変数やオブジェクトの出力(var_dump)2.1.2 クエリの確認3 最後に Laravel Debugbarとは? こんな感じでブラウザの下に出てくるデベロッパーツールのようなものです。みたことある人も多いはず! まずは導入方法です。 Laravel Debugbarの導入方法 この記事通りに進めていけば、問題なく導入できるはずです。 https://larapet.hinaloe.net/2017/03/07/%E9%96%8B%E7%99%BA%E3%81%AB%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84-laravel-debugbar-%E3%81%AE%E5%B0%8E%E5%85%A5/ …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (8)
Laravel

LaravelのMail::sendでメール送信機能を実装する

はじめに Laravelを用いたサービスでお問い合わせ機能や、その返信にbcc、replyを実装する方法についてまとめます。要はLaravelでメール送信を行う機能の実装です。 Laravelでメール送信を行う方法はいくつかありますが、今回は特に実装が簡単なMail::sendを用いた実装方法について見ていきましょう。 controrollerの作成 メールの送信動作は、各自のルーティングでweb.phpに記載してください。実際のメール処理はMailSendControllerにて行います。 例えば以下のようなcontrollerだとabcde@exampleにテストメールという件名のメールが飛びます。 ここの->subjectの部分にbccやれplyToなどの要素を足していく事で、メールの細かい設定が可能です。 以上 …

Read More
v-ifで条件分岐をしよう!(Vue入門③例題付き) (7)
Gridsome

[WIP]Vue.jsのSSG「Gridsome」がサクサクで快適だった

久々にVue.jsよりの投稿です。最近流行のSSGが気になり、自分の得意なVue.jsでもいじれないかと思い、Gridsomeを触り始めたので、感想をまとめます。 目次1 Gridsomeとは2 Gridsomeの特徴2.1 フロントはVue.js、データ取得はGraphQL2.2 ルーティングの設定が簡単で、すぐ開発できる3 ホットリロードでブラウザチェックがサクサク4 Nuxt.jsとの棲み分け Gridsomeとは SSG、いわゆる静的サイトジェネレーターと言われるフレームワークです。React.jsだとGatsbyが有名ですが、Vue.JsだとGridsomeが王道です。 Gridsomeの特徴 フロントはVue.js、データ取得はGraphQL GridsomeはGraphQLにてAPIやjson、ローカルファイルなどをやり取りし、Vue.jsのコンポーネントにて実装しています。 Vue.jsが使えれば、Gridsomeではサクサク実装できるイメージです。 特にAPI周りはプラグインによって簡単に構築できます。 ルーティングの設定が簡単で、すぐ開発できる Nuxt.jsの様にサーバー側の複雑なルーティングを使わず、簡単に扱うことができます。 ホットリロードでブラウザチェックがサクサク …

Read More
25388715424_65480dbf18_k.jpg
エンジニアリングライフ

フリーランスエンジニアの13ヶ月目を振り返る(2020/4月)

目次1 はじめに2 振り返り2.1 4月からエンジニアのシェアハウスに住み始めた2.2 macbook pro 13インチを買った2.3 Laravelのフォームリクエスト2.4 Laravelのフォーム系の機能やデザイン修正2.5 Vue.jsで新機能のフロント部分を作成2.6 LP制作でcss設計を学ぶ2.7 wordpressのブログのデザイン変更2.8 envote marketでVueテンプレートを買ってみる3 今後 はじめに 1ヶ月前にエンジニア歴1年を振り返って以下のような記事を書きました。 https://terrblog.com/entry/2020/03/19/005431 …

Read More
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping