スキップしてメイン コンテンツに移動

投稿

1月, 2019の投稿を表示しています

[Nuxt.js] EventBusを使ってコンポーネント間で通信する

[Nuxt.js] EventBusを使ってコンポーネント間で通信するこの記事では、Nuxt.jsでコンポーネント間のイベントのやり取りをする方法を紹介します。Vue.jsを使い始めると、必ずぶち当たる問題の1つとして、「コンポーネント間でのデータ・イベントのやり取り」が挙げられます。
いくつかの対応策がある中の1つの解として、EventBusの概念を使ってコンポーネント間で通信する方法があります。EventBusとは?参考リンク(Vue.js v2で親子間以外のイベントやり取り)上のリンクでも紹介されていますが、EventBusの仕組は、1つのグローバールなVueオブジェクト対し、各コンポーネントが$on, $emitを行う事によって、イベントのやり取りを行なって行きます。Nuxt.jsには、$nuxtというグローバルなVueオブジェクトが既に存在しています。
その為、素のVue.jsより簡単にEventBusによるイベントのやり取りが行えるようなっています。
以降は、そのやり方について紹介します。実装イメージ今回作成する、サンプルコードの実行イメージです。(1)コンポーネント1が、$nuxt.emit()で、グローバルなVueオブジェクトに対し、イベントを発火する。
(2)コンポーネント2と3は、$nuxt.on()でイベントハンドラを登録し、イベント発生時に、コンポーネント1から渡されたパラメータを画面上に表示する。[EventBusのイメージ]
サンプルコード全部で4つのファイルを作ります。コンポーネント1 ( components/Component1.vue )ボタンが押されたら、$nuxt.$emit()でイベントを発火します。
その際、イベントパラメータとして、テキストボックスに入力値を渡します。<template><div><h2>コンポーネント1</h2><div><inputtype="text"v-model="value"/><button@click="sample_event">イベント発火</button></div></div></template&g…

[Python Flaskでmemory_profilerを使ってメモリ使用量を分析する

[Python] Flaskでmemory_profilerを使ってメモリ使用量を分析するPythonでメモリ使用量を調査するには、「memory_profiler」が有名ですが、Flaskで利用するには、ひと手間加えてやる必要があります。サンプルコード早速、Flaskでmemory_profilerを使う為のサンプルコードを紹介します。
まず、調査対象のURL(関数)が呼ばれる度に、メモリ使用量をコントロールに表示するカスタムデコレータを作成します。from functools import wraps import memory_profiler try:import tracemalloc has_tracemalloc =Trueexcept ImportError: has_tracemalloc =Falsedefmy_profiler(func=None, stream=None, precision=1, backend='psutil'): backend = memory_profiler.choose_backend(backend)if backend =='tracemalloc'and has_tracemalloc:ifnot tracemalloc.is_tracing(): tracemalloc.start()if func isnotNone: @wraps(func)defwrapper(*args,**kwargs): prof = memory_profiler.LineProfiler(backend=backend) val = prof(func)(*args,**kwargs) memory_profiler.show_results(prof, stream=stream, precision=precision)return val return wrapper else:definner_wrapper(f):return profil…

[Nuxt.js] axiosのインストール方法と簡単な使い方を解説

[Nuxt.js] axiosのインストール方法と簡単な使い方を解説Nuxt.jsにaxiosをインストールして、簡単なAjax通信をしてみます。axiosのインストールNuxt.js用に統合されたaxiosがnuxt-communityよる公開されている為、こちらをインストールします。yarnでインストールする場合yarn add @nuxtjs/axios npmでインストールする場合npm install --save @nuxtjs/axios nuxt.config.js を編集プロジェクトルートディレクトに、nuxt.config.jsというファイルがあると思います。
こちらを開いて以下の通り編集を行います。module.exports ={ mode:'universal',~~ 中略 ~~/* (1) 以下の通り、modulesセクションに'@nuxtjs/axios'を追加 */ modules:['@nuxtjs/axios'],~~ 中略 ~~}

Nuxt.jsで静的なファイルを扱う

Nuxt.jsで静的なファイルを扱うNuxt.jsで、robots.txt や サイトマップ (sitemap.xml) などの静的なファイルを扱う方法です。置き場所Nuxtでは、静的なファイルはプロジェクトのルートディレクトリに static ディレクトリを作成して、そこにファイルを置きます。アクセス方法static ディレクトリに置いたファイルは、URL/にマッピングされます。
また、サブディレクトリに配置したファイルにも対応しています。[例1] static ディレクトリ直下に置いたファイルにアクセスするURLhttp(s)://[hostname]/robots.txt [例2] サブディレクトリ直下に置いたファイルにアクセスするURLhttp(s)://[hostname]/data/sample.json Nuxt.js って何て読むの?全然関係のない話ですが、「Nuxt.js」ってなんて読むのか分からなかったので、メモ。Nuxt.js(ナクスト)と読むらしい。参考リンクNuxt.js公式 (ディレクトリ構造)

Yarnのインストールメモ

YarnのインストールメモJavaScriptのパッケージを管理できるパッケージマネージャの Yarmのインストール方法です。
npmと互換性がある為、同じプロジェクトでも、ある人はYarm、別の人はnpmを使ってパッケージを管理するといった事もできます。インストールするnpm経由でインストールする場合npm install -g yarn Homebrew経由でインストールする場合# Node.jsも同時にインストールする場合 brew install yarn # Nodebrewなど、すでにNode.js環境がある人は、Node.jsを除いてインストールします brew install yarn --without-node バージョンの確認現在インストールされている yarnのバージョンを確認するには、以下のコマンドを使用します。yarn --version プロジェクトの新規作成yarn init 依存関係の追加yarn add [package] yarn add [package]@[version] yarn add [package]@[tag] 依存関係の更新yarn upgrade [package] yarn upgrade [package]@[version] yarn upgrade [package]@[tag] 依存関係の削除yarn remove [package] 全ての依存関係のインストールyarn またはyarn install

MacにNode.jsをインストールして、npm環境を整える

MacにNode.jsをインストールして、npm環境を整えるmacOSにnode.jsをインストールして、npmコマンドを使えるようにする方法です。nodebrewをインストールbrew install nodebrew ※上のコマンドでエラーになる人は、Homebrewがインストールされていない可能性がある為、こちらの記事を参考に、Homebrewのインストールを行なってください。環境変数の設定インストール後は、shellの設定ファイル(.bash_profile)にPATHを追記します。.bash_profileを開きます。$ vi ~/.bash_profile export PATHと書かれている行の直前に、行を追加します。
以下を参考に、追加してください。~~ 中略 ~~ PATH="${HOME}/.nodebrew/current/bin:${PATH}" ##この1行を追加 export PATH sourceコマンドで環境変数を更新します。source ~/.bash_profile nodebrewのバージョンを確認nodebrewのバージョンを確認するには、以下通りコマンドを入力します。$ nodebrew nodebrew 1.0.1 インストール可能な node.js のバージョンを確認するリモートサイトからインストール可能な node.jsのバージョンを調べるには、nodebrew ls-remoteコマンドを使用します。$ nodebrew ls-remote v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6 v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7 v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15 v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23 ~~ 省略 ~~ Node.jsをインストールするNode.jsのインス…

MacにHomebrewをインストールする

MacにHomebrewをインストールするmacOSにHomebrewをインストールする方法です。Homebrewは、macOSオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである。MacPortsやFinkと同様の目的と機能を備えている。LinuxのDebianのAPTに似た使用感で急速に利用が広がっている。(ウィキペディア)ちなみに、Homebrew(ホームブルー)と読みます。インストール方法ターミナルを開いて、以下のコマンドを入力/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 以下のように、Installation successful!と表示されればインストール成功です。~ 中略 ~ Tapped 2 commands and 4693 formulae (4,950 files, 12.4MB). Already up-to-date. ==> Installation successful! 使い方(コマンド)Homebrewのバージョンを確認brew --version パッケージのインストールbrew install pakege-name インストール可能なパッケージを検索brew search pakege-name '/'で囲むと正規表現で検索できる。brew search /google.*sdk/ 一覧インストールされたパッケージの一覧brew list brew -v list パッケージのアンインストールbrew uninstall pakege-name 更新のあるパッケージを検索するbrew outdated 古いバージョン(outdated)のパッケージを削除brew cleanup パッケージをアップデートするbrew update brew upgrade pakege-name パッケージの情報を確認brew info pakege-name 依存関係を表示するbrew deps pakege-name brew depstree pakege-name #tree形式で表示

Googleフォトの直リンクURLを取得する (リサイズも可能)

Googleフォトの直リンクURLを取得する (リサイズも可能)Googleフォトにアップロードした画像の、直リンクURLを取得する方法です。
この方法を使用すると、サイトやブログ等に、Googleフォトの画像を直接貼り付ける事が可能になります。また、URLで画像のリサイズ等もできる為、その辺りについても紹介したいと思います。直リンクURLを取得するGoogleフォトのページから、対象の画像を選択します。
その後、右リック -> [画像アドレスをコピー]を選択すると、クリップボードに直リンク用のURLがコピーされます。
あとは、クリップボードにコピーされたURLを、自分のサイトに貼り付けるだけです。注意事項この方法で取得した直リンクURLは、誰からでも対象の画像が閲覧可能なURLとなっており、誤ってプライベートな画像を公開しないよう、注意をしましょう。オススメは、サイトやブログ専用のGoogleアカウントを作成し、そこには公開用の画像のみをアップロードする事です。パラメータを指定してリサイズ・トリミングを行うURLの末尾に、パラメータを指定すると、画像を簡単にリサイズまたはトリミングする事ができます。
パラメータの種類には、以下のようなものがあります。https://lh3.googleusercontent.com/_R0sQ...Sx=<Parameter>縦横のサイズを指定してリサイズを行う画像のリサイズを行うには、URL末尾のパラメータに、縦または横のサイズを指定して、リサイズを行います。横サイズを指定してリサイズhttps://lh3.googleusercontent.com/_R0sQ...Sx=w500 この時、縦のサイズも画像の縦横比に応じて、自動的リサイズされます。縦サイズを指定してリサイズhttps://lh3.googleusercontent.com/_R0sQ...Sx=h300 この時も、画像の縦横比に応じて、自動的に横サイズもリサイズされます。正方形の画像にトリミングするこちらは、サムネイル画像を表示する時に役立ちそうなパラメータです。
縦(h)または横(w)サイズのどちらかを指定し、その後ろに-cパラメータを付けると、指定したサイズの正方形画像を作ってくれます。以下は、1000 x 500の画像から、500 x…

Bloggerに関連記事を表示させる2つのサービス

Bloggerに関連記事を表示させる2つのサービスBloggerで、現在表示されていページに、関連する記事へのリンクを表示させる方法です。「人気の投稿」や「注目の投稿」を表示させるガシェットは、標準で用意されていますが、「関連記事」を表示する為のガシェットは、用意されていません。今回は、Bloggerに「関連記事」を表示させる2つのサービスについて紹介します。Milliard「シスウ株式会社」が提供していいる、関連記事を表示する為の外部サービスです。
スマホ / PC対応で、オプションで、パネル型/リスト型表示など、色々な表示形式から関連記事を表示出来ます。
また、カスタムテンプレートにも対応しており、独自のHTMLで関連記事を表示させる事も可能になっています。設定方法まずは、[Milliard関連ページプラグインについて] にアクセスします。下の方までスクロールし、[利用方法] -> [Bloggerをお使いの方はこちら]をクリック後は、Milliardのサイトに記載されている手順に従い、コードの生成およびガシェットの追加を行えば、関連記事を表示させる事ができます。Premium Flexible Related Post Widget for Blogger – Blogspotこちらは、外部のサービスではなく、JavaScriptだけで動く、カスタムウェジットです。
現在表示している記事のラベルから、同じラベルを記事および、本文からラベルと同じキーワードを持つ記事を抽出して、関連記事として表示してくれます。Premium Flexible Related Post Widget for Blogger設定方法上のサイトに記載されていますが、まずは、BloggerテーマのHTMLを編集します。
以下のHTMLを、関連記事を表示させたい場所に、コピーします。<!-- START::_140414_related_posts::START --><b:ifcond='data:blog.pageType == &quot;item&quot;'><b:ifcond='data:post.labels'><b:loopvalues='data:post.label…

サイドバーの広告を、CSSでスクロール固定する

サイドバーの広告を、CSSでスクロール固定する最近よく見かける、記事横のサイドバー広告枠が、画面の上の方までスクロールしたら、画面上部に固定表示するのを、CSSだけで実装してみます。言葉だけで使えるのが難しい為、実際どういった動きの物を作るのか、Gifアニメーションにしてみました。position: sticky今回は、CSSのposition:stickyを使って、広告枠のスクロール固定を実装していきます。
新しい仕様のCSSのため、一部対応していなブラウザがあり、ブラウザ別の対応状況は以下のようになっています。
主要なブラウザは、ほぼサポートされている感じですね♪
IEなどの未対応ブラウザであっても、画面上部でスクロール固定されずに、スクロールで上の方に見切れて行くだけなので、特に害はありません。position: stickyのブラウザ対応状況 (2019年1月現在)

Can I useサンプルード[HTML]<body><divclass="container"><divclass="post-body"style="height:2000px"> 記事の内容<br/> です<br/></div><divclass="post-sidebar"><div><small>新着記事</small><hr/><div>NNNNNNNNNNNNNNN</div><div>NNNNNNNNNNNNNNN</div><div>NNNNNNNNNNNNNNN</div><div>NNNNNNNNNNNNNNN</div><br/></div><divid="ad"><small>スポンサーリンク</small><hr/><divclass="ad-box"> 広告枠 </div>…

Pythonの特殊な引数 *args **kwargsの意味

Pythonの特殊な引数 *args **kwargsの意味Pythonのデコレータで、ラッパー関数の引数がdef wrapper(*args, **kwargs):となっているのを見て、*argsや**kwargsはどういう物?と思い、調べてみました。関数の引数として使う *argsや**kwargs関数の引数で、*argsや**kwargsを使うと、どんな引数でも受け取れる関数が作れます。
*argsは任意の数の引数を許可し、argsという名前のタプルに割り当てられます。
**kwargsは任意の数のキーワード引数を許可し、kwargsという名前の辞書(dict)に割り当てられます。サンプルコードdeffn(*args,**kwargs):print("*args:", args)print("*kwargs:", kwargs)#(1)任意の数の引数を指定 fn(11,"aa",["ラーメン","素麺"])#-> *args: (11, 'aa', ['ラーメン', '素麺'])#-> *kwargs: {}#(2)任意の数のキーワード引数を指定 fn(key1=22, key2="bb", key3=["パスタ","スープ"])#-> *args: () #-> *kwargs: {'key1': 22, 'key2': 'bb', 'key3': ['パスタ', 'スープ']}#(3)混在 fn(11,"aa", key1=22, key2="bb")#-> *args: (11, 'aa')#-> *kwargs: {'key1': 22, 'key2': 'bb'}アンパック引数として使う *argsや**kwargs別の使い方で、リストや辞書(dict)を引数として渡すとき、先頭に*や**をつけると、リストや辞書を分…

Pythonでリフレクションを行うために必要な情報

Pythonでリフレクションを行うために必要な情報型判定リフレクションを行う場合、オブジェクトがクラスなの?関数なの?などと判定するシーンがあると思います。
そういった場合には、inspectモジュールの各関数を使えば、型判定が行えます。モジュール判定import inspect if inspect.ismodule(target):print("モジュールです")クラス判定import inspect if inspect.isclass(target):print("クラスです")関数判定import inspect if inspect.isfunction(target):print("関数です")メソッド判定import inspect if inspect.ismethod(target):print("メソッドです")

Selenium ChromeDriverの導入メモ

Selenium ChromeDriverの導入メモSelenium + ChromeDriverの導入メモです。
インストールは行わず、アプリ実行ディレクトリにChromeDriverを同封するやり方です。
Chromeをヘッドレスモードで起動して、WebページのHTMLをスクレイピングします。ChromeDriverのダウンロードこちらのページにアクセスします。
特に理由がなければ、最新バージョンのDriverを選択します。環境に応じたファイルのリンクをクリックして、Driverをダウンロードします。ダウンロードしたファイルを解凍して出来た「chromedriver」のファイルを、アプリ実行ディレクトリに、コピーまたは移動して下さい。ChromeDriverを使ってスクレイピング早速、Selenium + BeautifulSoup4 - ChromeDriverを使って、Webページをスクレイピングするコードを書いてみます。import os from bs4 import BeautifulSoup from selenium import webdriver from selenium.webdriver.chrome.options import Options #スクレイピング対象のURL target_url ="http://xxxxxxxxxxx"#ブラウザのオプションを格納する変数 options = Options() options.add_argument('--headless') options.add_argument('--disable-gpu')#アプリ実行ディレクトリに配置したDriverを指定して、ブラウザを起動する driver = webdriver.Chrome(os.path.curdir +"/chromedriver", chrome_options=options)#指定されたURLに、ブラウザからアクセスする driver.get(target_url)#レスポンスのHTMLを格納 src = driver.page_source driver.close()#レスポンスのHTMLを解析 soup = BeautifulSoup(s…