Nuxt.js v2.9.0のリリースノートにあるように、 v2.9.0 からTypeScriptが外部からのサポートになりました。以前からNuxtでTypeScriptを使うときは色々設定したり、 Lintまわりが複雑だったり、コーディングをはじめるまで時間がかかったものの、しばらくすると最新が変わってたり・・・。 今回は2019年11月時点で、Nuxt.js + TypeScriptと IntelliJ IDEA で使えるまでを紹介します。 Nuxtのプロジェクトを作る $ npx create-nuxt-app example よくこのコマンドを見ますが、最新の create-nuxt-app を使うためには、 yarn create nuxt-app を使ったほうががいいかもしれません。 $ yarn create nuxt-app example yarn create v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... info @google-cloud/functions-emulator@1.0.0-beta.5: The engine "node" is incompatible with this module. Expected version "~6". Got "10.13.0" info "@google-cloud/functions-emulator@1.0.0-beta.5" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] 🔗 Linking dependencies.

続きを読む

Hugoはオープンソースの静的サイトジェネレーターです。とても速く柔軟性があることから人気です。 今回はHugoの導入から使い方、Netlifyでリリースするまでの方法を紹介します。 Hugoのインストール 公式サイトのQuick Startそのままですが、 brew を使ってインストールします。 $ brew install hugo インストールされたかを確認するには、 $ brew version 新しくサイトを作る $ hugo new site website このコマンドを実行すると、 website というディレクトリができます。 テーマを選びます Hugo Themesにたくさんのテーマがあります。どれがいいか迷ってしまいますよね。 今回は blog のタグが付いてるなかから、このブログに使ってるTranquilpeak というテーマを使ってみます。 $ cd website $ git init $ cd themes/ $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git 他のテーマも導入する方法は一緒なので、他のテーマを使う場合はgithubのURLを変更してください。 themes ディレクトリの中に、 hugo-tranquilpeak-theme というフォルダができてると思います。 公式ドキュメントでは、themes/ananke とコマンドの最後にしてフォルダ名を指定する方法をとってます。 $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke ルートディレクトリに config.toml というファイルがあると思います。 これが設定ファイルで色々設定していくんですが、submoduleで持ってきたテーマの中にテーマにそった config.toml があると思います。 hugo-tranquilpeak-theme の場合は、 exampleSite の中にあります。

続きを読む

WordPressからHugoに乗り換えました 2009年からWordPressではじめた当ブログですが、Hugoで作り直し、 サブドメインも creator.cotapon.org から blog.cotapon.org に変更しました。 Hugoにした理由 静的ページなので表示がめちゃ速い ホスティングサーバーをNetlifyの 無料 枠で使用 Markdownで投稿できる。Markdown好き! 管理画面なしで git push で投稿完了 テーマがそこそこある 前のWordPressでのブログは、なんしか表示が遅かった・・・。それだけでもSEO的には不利。 Hugoにして表示速度は圧倒的に速くなりました。 ただ、Hugoは静的ページなので、 ブログ検索(全文検索) と コメント 機能はありません。 全文検索 は Algolia や Bonsai + Elasticsearchを使うことで代用でき、 コメント 機能は、Disqusなどのウェブサービスを使うことで導入することができます。 テーマによっては、これらのウェブサービスのアカウントIDやAPI KEYを設定ファイルに書くだけでよいものもあります。 ブログの引越でやったこと サブドメインとはいえドメインを変えたのと、日本語URLにしている記事があったので書き換えました。 2009年から書いてるブログですが、130ぐらいしか記事がないので、1つ1つ中身を見てURLを変えて、 はてぶされてるページは301リダイレクトの設定をしていきました。 そこそこ大変でしたが、1日10個ずつ地道にやっていきましたw NetlifyでDNSの設定をして、blog.cotapon.org が見れるようにするのと同時に、ルートドメインの cotapon.org にリダイレクト設定だけをデプロイしました。 Amazon Route 53なんかを使うと、もっとスマートにできそうですね。勉強せな。 Adsense, Search Console, Analyticsの設定を諸々やってようやく完成。 ブログが速くなったのと、git push でデプロイでき、Markdownでちゃちゃっと書けるだけでもブログを書くモチベーションが上がってきましたw 記事を書くペースあげていきたいと思いますので、今後ともよろしくお願いいたします!

続きを読む

一番カンタンにダウンロードを実装する方法 HTMLでファイルや画像をdownloadする為の単純な実装はこんな感じだとおもいます。 html 1 <a href="ダウンロードファイルのパス" download="ダウンロードした時のファイル名">click</a> ただ、この実装では画像がクロスドメインの場合はダウンロードできません。また、safariでは別タブが開き右クリックで画像を保存しないとダウンロードできなかったりします。 やりたかったこと HTMLのimgタグで表示している画像をクリックすると、画像をダウンロードさせる。という仕様を実装した時に色々苦労したのでメモしておきます。処理の順序としては以下の順番で説明します。またTypeScript用の型も指定しておきます。 画像URLからnew Image()する クロスドメインを回避する方法 canvasにdrawImageしてjpegに変換してbase64にする base64からBlobに変換してFileSaverを使ってダウンロードさせる safariでダウンロードフォルダーに保存させるために使用 画像URLからnew Image()する 画像URLからHTMLImageElementインスタンスを作成します。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 async load(imageURL) { let imageSouce = await imageLoader(imageURL); } imageLoader(imageURL) { return new Promise((resolve, reject) => { let image= new Image(); image.

続きを読む

buefyはVue.js用にBulmaを軽量化したUIコンポーネントです。Vue用のCSS Framework、UIコンポーネントは色々ありますが、現時点ではBulmaで落ち着いてます。buefyでアイコンを扱う場合、ドキュメントではMaterial Design IconsとFontAwesomeの2択で書かれてます。今回は、個人的に気に入ってるFontAwesomeをbuefyで使うまでの方法をメモして紹介します。 環境 Nuxt.js v2 nuxt-buefy v0.2.3 (現時点でv0.3以上では起動できませんでした) fortawesome v1.0.9 buefyをインストール Nuxt.jsを使う場合は、このページの下の方に書かれています。 command 1 $ yarn add nuxt-buefy ※versionが0.2.3になってるか確認 nuxt.config.js に下記を記載すれば buefy のインストールは終わりです。めちゃ簡単。 nuxt.config.js 1 2 3 4 5 6 7 8 9 10 11 12 { modules: [ // Simple usage 'nuxt-buefy', // Or you can customize ['nuxt-buefy', { css: false, materialDesignIcons: false }], ] } FontAwesomeをインストール command 1

続きを読む

タイトルがわかりにくくて申し訳ないんですが、エディターがIntelliJで、Vue, NuxtをTypeScriptでコーディングする環境の際、 vue-class-component のNuxt版、 nuxt-class-component を使えばNuxtでTypeScriptでコーディングできるんですが、メソッド内で this.$route を参照する際に下記のように implements をつけます。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 <script lang="ts"> import Vue from 'vue'; import {Route} from 'vue-router'; import Component from 'nuxt-class-component'; interface WithRoute { $route: Route; } @Component export default class Index extends Vue implements WithRoute { created() { console.log(this.$route.params); } } </script> そうすると、以下の画像のようなエラーが出ました。

続きを読む

最近Vue.jsを勉強してます。Nuxt v2が半年ほど前にアナウンスされ、先日ようやくリリースされました。良い機会なのでTypeScriptで開発できる環境構築をメモしておきます。Vueファイル内のHTMLはPug(Jade)にします。 Nuxt.js v2 TypeScript eslint nuxt-class-component Pug(Jade) Nuxt.js v2 setup vue cli を使うのでインストールしておきます $ npm i -g vue-cli スターターテンプレートから始めます。Nuxtのインストールはこちらを参考にしてます。 https://ja.nuxtjs.org/guide/installation $ vue init nuxt-community/starter-template example $ cd example $ yarn or npm i(以下yarn) これを書いてる現時点ではversionが 1.0.0 のままなので、 yarn remove して再インストールします。 $ yarn remove nuxt $ yarn add nuxt package.json を開いて確認してみてください package.json 1 2 - "nuxt": "^1.0.0" + "nuxt": "^2.

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo