【勉強会資料共有】マークアップエンジニア&フロントエンドエンジニア初心者向け

Pickup ANOTHER Document

在籍する制作会社の新卒者を対象として、フロントエンドに関する勉強会を行いました。 業務終了後、1時間の勉強会を週2回を3ヶ月間。 その間に共有した内容を資料化しましたので公開をします。 実際には板書と口頭説明を行いましたが、資料の内容を追っていただければ最低限案件を行うにおいて必要な知識が身につく内容となります。 ※実際に社内で使用したものから、公開用に内容を一部変更しております。 ◆フロントエン […]

Vue.jsで同一ページでパラメーターが変更されたことを検知する

ページ内でタブを使用している。 タブの内容に対してパラメータを用いて直接アクセスしたいという依頼を受けた。 例)http://hogehoge.com/list?tab=2 仕様: ・例のようにURLにタブを指定するNo(タブの幾つめか)が含まれていればそのアクセス時にそのタブを表示 ・タブ遷移時にはURLパラメータを更新してユーザーがパラメータ付きURLをコピーできるようにする —& […]

Vue.jsでアクセス元(referrer)を取得する

リファラーのデータを集め用とした際に、document.referrerを使っても前のページが取得出来なかった。 $routeを使っているとdocument.referrerで接続元が取れないらしい。 下記のようにbeforeRouteEnterを用いることで、接続元を取得することが出来た。 data() { return { prevRoute: null }; }, beforeRouteEn […]

Vue.jsで複数のclassを条件に合わせてつける

Vue.jsではクラスバインディングする際にclassを使用する。 条件に合わせて「フラグが立っていればクラスをつける」「変数をクラス名として入れる」事ができる。 複数の指定を使用する際の書き方を調べたのでメモ。 ◆変数をそのままクラス名に使用 変数classNameに値が入っていれば、それを追加。 例)className = hogehoge; <div class="desig […]

Vue.jsで作成したサイトで個別のページタイトルを設定する

案件詳細ページなど、ページ毎に個別のタイトルが必要なページで使用。 titleやmetaといった情報を設定(書き換える)ことが出来る 1、vue-headを追加 ◯yarnでのインストール yarn add vue-head ◯npmでのインストール npm install vue-head –save 2、main.jsへの記述追加 // Vue.head import VueHea […]

vue.jsで取得したhtmlタグを表示

vue.jsでAPIで文字列を取得した。 その際、APIから渡された配列にはaタグが入っているのに、出力するとタグは表示されるがタグが文字列として出力され、リンクが機能しなかった。 APIから取得した配列からコメント部分を下記のように表示していた。 <div class="message">{{ this.notice.content }}</div> […]

【SourceTree/GitLab】SSHキー認証設定(キーの作成→設定)

Git

SourceTreeでプッシュを行おうとした際に、SSH認証に失敗してエラーが出る場合がある。 登録したキーの設定が外れている可能性があるため、新しいキーを用意して設定を行った。 今回解説の環境は、SourceTree+GitLabの場合になります。 ◆表示されたエラーアラート ————————R […]

Vue.jsでのCookieの使用

Cookieで制御して閉じるボタンをクリックするまで要素を表示するで、基本的なCookieの使用を行った。 別途Vue.jsでもCookieの保存を行う必要があったため、下記の手順を行った。 1、vue-cookieを追加 ◯yarnでのインストール yarn add vue-cookie ◯npmでのインストール npm install vue-cookie 2、main.jsへの記述追加 // […]

Cookieで制御して閉じるボタンをクリックするまで要素を表示する

Cookieをちゃんと使ったことがなかったので、参考サイトをベースに作成してみました。 実装したい仕様としては、下記になります。 ・ウェブサイト内に、チュートリアルのモーダルウィンドウを表示する ・チュートリアルは複数ページに必要 ・各モーダルは[閉じる]ボタンを押すことで消せる ・一度消したモーダルはCookieが消えるまで再表示しない モーダルは表示できていたので、必要なのは下記の2点。 ・モ […]

WordPressの通知非表示処理のエラー[php7.2以降]

WordPressの通知系の処理をfunction.phpで非表示にしているが、phpのバージョンを上げた際にphpエラーが出るようになった。 create_function()の記述が廃止されたことが原因の為書き換える必要がある。 ◆エラー一例 Deprecated: Function create_function() is deprecated in [対象ファイル.php] on line […]

A8.netのアフィリエイトバナーをtarget=”_blank”(別窓リンク)に設定しなおす

ブログのリニューアルに合わせてA8.netの広告リンクをブログに挿入させていただいたのですが、これは別窓で開くものではなかったかな・・・? しばらく広告の掲載を行っていなかったので、ハッキリ覚えていないのですが、バナークリックで別ドメインのサイトに遷移するのに同じページでリンクが開くのがどうにも違和感があります。 管理画面でも設定はないようだし・・・? そこで、検索をしてみたところ、2019年9月 […]

1 2 32