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

Shift-JISやEUCはプラグインで解決できるSublimeTextで文字化けしてしまう現象を解決するには、2種類のプラグインをインストールします。具体的にはConvertToUTF8とCodecs33を使うことで、文字化けを解消することができます。 ConvertToUTF8のインストールSublimeTextでプラグインをインストールするにはPackage Control(パッケージコントロール)を使うのが簡単です。詳しい使い方は下記で解説しています。 まずは、ConvertToUTF8をインストールしましょう。手順はこちらです。 Sublime text 3を起動 Command(またはCtrl)+Shift+PでPackage Controlを起動 Installと入力しPackage Control: Install Packageを選択 converttoと入力しConve

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

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

ブロードバンドルーターを自動再起動するお手軽な処理を作ってみました。 使ったツールは、Windows標準機能のタスクスケジューラとWget(ダブルゲット)です。この2つを組み合わせると、同ネットワーク上のPCから、ルーターの設定ページに自動でログインを行った後、再起動の処理を自動的に実行させる事ができます。再起動のタイミングは、タスクスケジューラの設定にて、PCの起動時や1日に一回など自由に変更が可能です。

SublimeText3がフリーズを起こしたら行いたい対策方法インストールされているプラグインやデフォルトの機能が原因でSublimeTextがフリーズを起こすことがあります。そんな時はフリーズが起こるタイミングを調べて、関連しそうなブラグインを削除してみましょう。 プラグインの削除方法は以下のような流れです。 Sublime text 3を起動 Command(またはCtrl)+Shift+PでPackage Controlを起動 Removeと入力しPackage Control: Remove Packageを選択 削除したいパッケージの名前を入力し、表示内容を選択 Show Definitionがフリーズを起こす私が今回経験したフリーズ問題はShow DefinitionというSublimeTextに備わっている機能が原因でした。Show Definitionは記述したコードの中の

某IT界隈で、阿部寛さんのサイトが話題になってたんですけど、Google Chromeの拡張まで登場してて、不覚にも笑ってしまいましたww いまみているウェブページを阿部寛のサイトっぽくするChrome拡張を作った ｜ Qiita ちょｗｗｗ そこにIT技術使いますかね(尊敬) 阿部寛さんのオフィシャルHPは、レトロ感を漂わせた伝統的なデザインのサイト。昨今のWebサイトのように表示速度を落としてしまう重いデータ(=レンダリングブロック)がそもそも存在しないので、表示速度が爆速となっている模様です。 阿部寛のホームページ 昔…こんなホームページ作ったなぁとフラッシュバックするようなデザインで、阿部寛さんの潔さが伝わってきますね(笑) ネタ元はこちら話題となる発端となったのはこちらのサイトでした。 dev.toと阿部寛のホームページどっちが速いですか？ ｜ くうと徒然なるままに dev.to

mongoDBの簡単な使い方と頻繁に使うコマンドをまとめようと思います。 mongoDBは、キーバリューストア型(KVS型)のデーターベースです。キーバリューとは名前の通り、キーと値で一つのデータを扱う形式の事です。言い換えるなら変数名と値のような組み合わせを持つデータベースです。 今回は、手元のローカル環境でmongoDBをインストールしてアプリケーションから利用できるように準備する流れを解説したいと思います。

はじめに今までは、静的サイトジェネレータの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のエラールール。日本語ざ

パッケージコントロールのインストールまず始めに行っておきたい下準備は、パッケージコントロール(Package Control)のインストールです。まずはパッケージコントロールについて簡単に説明したいと思います。 Sublimetext3は用途に応じ、パッケージと呼ばれるプラグイン(=外部の拡張機能)を好きなように追加する事ができます。雰囲気としてはスマホのアプリと同じ印象です。 パッケージはPackage Controlと呼ばれるアプリでインストールやアンインストール(削除)を行うことができます。ただし、Sublimetext3の起動時には、Package Controlがインストールされていません。 まずはPackage Controlをインストールしてみましょう。 Package Control https://packagecontrol.io/installation インストール

SublimeText3ってなに？Sublimetext3(サブライムテキスト)は、高機能なテキストエディタです。Webのプログラミング業務やブログの記事作成にも活用することができて大変便利なアプリであり、OSはWindowsやMac、Linuxに対応しています。Sublime Textは無料版と有料版がありますが、無料版でも機能は十分にそろっており実用的なアプリです。 パッケージコントロールのインストール方法まず始めに行っておきたい下準備は、パッケージコントロール(Package Control)のインストールです。まずはパッケージコントロールについて簡単に説明したいと思います。 Sublimetext3は用途に応じ、パッケージと呼ばれるプラグイン(=外部の拡張機能)を好きなように追加する事ができます。雰囲気としてはスマホのアプリと同じ印象です。 パッケージはPackage Contro