Vue.jsでアプリを作る際に参考となった記事をまとめたいと思います。ゼロからVue.jsを触るにあたり、つまづいたポイントなどを順番にご紹介します。 具体的には、Vue.jsの大まかな概要を理解できる記事やフレームワークの紹介。配列とオブジェクトの扱いが難しかったので、その値の操作方法を中心に解説します。私自身は過去にAngularでアプリを作った事がありましたが、もし同じようにVue.jsをこれから触ろうと考えてる方の参考になりましたら幸いです。

ヘッドレスブラウザが搭載されたGoogle Chromeを使って、A4のラベルレイアウトに対応したPDFを作成してみました。 今回はChromeを操作できるNode.jsライブラリPuppeteerでPDFデータを作成していきます。A4などの用紙サイズに、ミリ単位で位置決めしたテンプレートを作成する際の参考になりましたら幸いです。 また過去に、PDF生成を活用した事例を書いていますので、興味がありましたらそちらもご覧ください。

写真アカウント用のポートフォリオwebサイトで、巷によく見られるような写真スライドショーを追加したいなと思いました。短い時間でサクッと作業を終わらせたかったので、使い慣れているjQueryのプラグインを探してみました。ですが、これといった良い物が見つからずに苦労しました(^ ^;) 結論から先に書くと、一番おすすめだと思うjQueryのプラグインはslippryでした。またTouchSwipe-Jquery-Pluginプラグインを活用するとスワイプに対応させる事ができるようです。詳しくは後半で解説していきます。 今回は、写真スライドショー(カルーセル)プラグインを追加した時にハマった話を備忘録として残したいと思います。今どきjQuery使うなと怒られそうですが、優しい目でご覧頂ければ幸いです。

はじめに今までは、静的サイトジェネレータのHexoで書き出したページをGitHub Pagesにデプロイしていました。静的ジェネレータは色んな物がありますが、代表例を挙げると以下のようなプログラムがあります。2017年現在ではHugoが流行っているようです。 Jekyll(Ruby) Hugo(Go Lang) Hexo(Node.js) ←これ使ってる Middleman(Ruby+Node.js) Octopress(Ruby) Gatsby(Node.js) ホスティングサービスの話題に戻りますが、GitHubからNetlifyへの移行後は、Hexoで書き出したサイトをZipファイルで圧縮して送信し、Netlifyへデプロイしています。実際の処理はhexo-deployer-netlifyというプラグインで自動化されています。 GitHub Pagesは、サーバー維持費が無料でありな

javascript(node.js)でエクセルファイル(xlsやxlsxなどの拡張子)を読み込んで中身を解析する方法を簡単に解説します。具体的には、xlsxを使うと簡単に中のデータを取り出したり、書き込みができます。 xlsxはブラウザ上でも動作するJavascriptのライブラリです。

継続的インテグレーション(CI)とは何か？継続的インテグレーション(CIと呼ばれる)は以下のような定義だそうです。 Wikipedia 継続的インテグレーション (以下引用)継続的インテグレーション、CI（英: continuous integration）とは、主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のことである。エクストリーム・プログラミング (XP) のプラクティスの一つで、狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する[1] 今回の記事で扱うのは、wikipediaで説明されている中でも、テストを継続的に実行する方法に限定して触れていきたいと思います。 テストを継続的かつ自動的に行うためには、テストプログラムを実行できるサーバーが必要になります。そこで活用するのが、GithubとTravisCIです。 Github

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

ESLintで何ができるのか？ESLintでは大まかに以下の事ができます。 JSやES6の構文チェックJavascriptまたはES6ファイルの記述内容が、構文チェックツールに従って書かれているかを判断します。基準に従わない記述が見つかった場合はエラー表示されます。 チェックツールの定義と流用が可能ESLintでは、チェックしたい構文ルールを 自由に定義 既存のルールを流用 既存のルールを流用し、一部のルールを上書き と言ったルールのカスタマイズが可能になっています。 ルールは一から作ろうとすると複雑で膨大です。ルールはESlintの公式ドキュメントで見ることができますので、以下をご覧ください。 ESLint Rules(構文チェック ルールの一覧) 日本語で一部が翻訳された解説記事もありますので、以下もご覧になると分かりやすいと思います。 Qiita ESLintのエラールール。日本語ざ

静的サイトジェネレータのHexoで、記事の元ファイルとなるmarkdownの内部で別のmarkdownを読み込むプラグイン「hexo-include-markdown」を作りました。 投稿記事の元となるmarkdownファイルに<!ーー md template-markdown.md ーー>タグを入れると、外部のマークダウンファイルのデータを埋め込んでくれます。同じような内容を繰り返し表示させたいケースや、テンプレート記事を使い回したい時に使ってみてはいかがでしょうか？

javascriptで用いるモジュールをおさらい第一回目でも触れましたが、テストやテストカバレッジ取得を行うために、以下のnpmパッケージを使います。 mocha (モカ) テストフレームワークと呼ばれているパッケージです。テストのプログラムを実行させることができる枠組みです。 power-assert (パワーアサート) テストフレームワークのmochaに、想定した動作ルールを書くことができ、想定外のプログラム動作が見つかるとエラーで教えてくれます。この動作ルールのことをアサーションと呼んでいます。 intelli-espower-loader (なんて読むんだろ？) power-assertを実行するために、コードを変換してくれるパッケージ。power-assertのテストを実行する際に、mochaの内部で利用します。 istanbul (イスタンブール) テストのカバー率を調べること

javascriptまたはEcmaScript6(ES6)のプログラムの品質を保つ方法を、備忘録としてまとめてみたいと思います。 今回は第二回目です。mocha、power-assertを使って、プログラム動作が期待通り書かれているのか検証を行う方法について分かりやすく解説していきたいと思います。 なお前回は、javascriptやES6におけるテスト環境についての概要や、テストの必要性について簡単に触れました。

テストや、コード保全を行う環境を作るには、具体的に以下のnpmパッケージを使います。 mocha (モカ) テストフレームワークと呼ばれているパッケージです。テストのプログラムを実行させることができる枠組みです。 power-assert (パワーアサート) テストフレームワークのmochaに、想定した動作ルールを書くことができ、想定外のプログラム動作が見つかるとエラーで教えてくれます。この動作ルールのことをアサーションと呼んでいます。 intelli-espower-loader (なんて読むんだろ？) power-assertを実行するために、コードを変換してくれるパッケージ。power-assertのテストを実行する際に、mochaの内部で利用します。 istanbul (イスタンブール) テストのカバー率を調べることができます。プログラムにテストを行えていない箇所があれば、その箇所

HexoのブログでSound Cloudの投稿記事を埋め込めるようにするプラグインhexo-tag-soundcloudを作りました。投稿記事のmarkdownファイルにsoundcloudタグを入れると、Sound Cloudのトラックを簡単に埋め込む事ができます。 今回はsoundcloudツイートの一般的な埋め込み方法も触れながら、プラグインの使い方を解説していきたいと思います。

現在のブログ環境について現在はHexoを利用してブログを構築しています。 Hexoは、node.jsで出来た静的サイトジェネレーターです。静的サイトジェネレーターは様々なものが存在していて、Jekyll、Hugo、Middleman、Octopress、Gatsbyも有名です。 詳しい内容はこちらをご覧ください。 Hexoプラグインは自作するしかなかったHexoのお陰で快適にブログが書けるようになり、ブログが手軽なものになりました。しかし、Hexoだけに限らず静的サイトジェネレータは、プラグインが充実していないことが大きな欠点です。 そこで、ワードプレスからhexoへ移行して1年で多くのプラグインや代替案を考えてきました。 今回はその中の一つであるhexo-generator-ampに、大幅なアップデートを加えたのでご紹介したいと思います。 hexo-generator-ampは記事ページ

AMP HTML(Accelerated Mobile Pages)の記述の有効性をnode.jsで検証できるamphtml-validatorが知らない間にリリースされていたので試してみました。 今回の記事ではamp-validatorの使い方を解説します。

node.jsとnpmとnvmをインストールしよう。node.jsの環境を用意する（Mac OSX編）

タグの一致する記事を関連記事とする 静的ジェネレータのHugoやJekyllで度々話題になっているのが各記事のタグの一致を調べる方法です。最も手軽に実装できる方法です。 Googleアナリティクスのアクセス情報を活用する Googleアナリティクスのページビュー数を取得して人気記事を選び出したり、関連度の参考にします。node.jsではga-analyticsでGoogle アナリティクスの情報を取得することができます。また外部サービスではZenbackやRankletをJavascriptから利用することもできます。 投稿記事本文の関連性を調べる 本文中の内容と関連する記事を選び出す方法です。WordpressではWordPress Related PostsやYet Another Related Posts Plugin YARPPが本文に共通する記事を選び出してくれるので有名ですね

node.jsのfs.writeFile()を使って、Shift-jisのテキストファイルを読み出したいと思いました。ただし、node.jsはShift-jisをサポートしていないので、通常の方法で書き込むと、文字化けしてしまいます。 そこで、iconv-liteを使います。iconv-liteは様々な文字コードを変換するモジュールです。

node.jsのfs.readFile()を使って、Shift-jisのテキストファイルを読み出したいと思いました。ただし、node.jsはShift-jisをサポートしていないので、通常の方法で読み込むと、文字化けしてしまいます。 そこで、iconv-liteを使います。iconv-liteは様々な文字コードを変換するモジュールです。