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

投稿

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

BloggerのHTMLを徹底紹介!テーマをフルカスタマイズしてオリジナルブログを作る!

BloggerのHTMLを徹底紹介!テーマをフルカスタマイズしてオリジナルブログを作る!皆さんはブログサービスは何を使っていますか?私は断然 Blogger 派です。
このブログも Blogger で書いています。無料なのに、多彩なテンプレートからブログのデザインを選択できるカスタムドメインが使用可能サードパーティのブログエディタからも投稿可能広告掲載も可能同じ Googleのサービスなので、アドセンスの申請が楽チン♪画像の容量に制限がない!?という具合です。
使わない手はありません!この記事は、Blogger のテーマを自分好みにフルカスタマイズしたい人に、オススメの記事です。
テーマの編集方法、Blogger 固有タグの紹介、簡単なデザインのサンプルを、紹介していきます。はじめにBlogger の HTML は、管理画面の [テーマ] -> [HTMLの編集]から変更する事ができます。
ここで直接編集してもいいですが、使いづらいので、HTML コピーして、エディタで編集した方がいいです。最小構成のHTMLデフォルトテーマの HTML から色々削ぎ落として、ブログタイトルだけ表示する、最小構成の HTML にしたのが、以下のコードです。
この HTML を今後編集していきます。<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><htmlb:version='2'class='v2'expr:dir='data:blog.languageDirection'expr:lang='data:blog.locale'xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='http://www.google.com/2005/gml/expr'><head><metanam…

Googleの画像認識が凄すぎた。。。Google Cloud、Microsoft Azure、Tesseract.js のOCR機能対決をやってみた

Google Cloud、Microsoft Azure、Tesseract.js のOCR機能対決をやってみたはじめに果的に Google Cloud の VISION API (画像認識) の OCR機能が凄かった件の話です。回は、
JavaScript だけで 文字認識できる「Tesseract.js」と、
Google Cloud の VISION API、
Microsoft Azure の Computer Vision のOCR機能を比較してみます。1つめの画像「Tesseract.js」の公式サイトにある、サンプル画像です。「Tesseract.js」の結果Mild Splendour of the various-vested Night! Mother of Wildly-working visions! haill I watch thy gliding, while with watery light Thy weak eye glimmers through a fleecy veil; And when thou lovest thy pale orb to shroud Behind the gather’d blackness lost on high; And when thou dartest from the wind-rent cloud Thy placid lightning o’er the awaken’d sky. 「Microsoft Azure Computer Vision」の結果Mild Splendour of the various-vested Night! Mother of wildly-working visions! hail! I watch thy gliding, while with watery light Thy weak eye glimmers through a fleecy veil; And when thou lovest thy pale orb to shroud Behind the gather'd blackness lost on high; And when thou dartest from the wind-rent cloud T…

Azure SQL Database 同時接続数の制限について

Azure SQL Database 同時接続数の制限についてAzure SQL Databaseを使ったシステムの、高負荷試験を行った時に、最大同時リクエスト数の制限を超えてエラーになった為、各モデル・DTU毎のリソース制限値について調べててみた。リソース制限値ちょうど、TechNetのブログにエントリーがあった為、記事書かれていた各モデル・DTU毎のリソース制限値について、以下にメモ。
(2015年6月時点の情報の為、若干古いかもしれません…)Service Tier/Performance LevelDTUMAX DB SizeMax Concurrent RequestsMax Concurrent LoginsMax SessionsBenchmark Transaction RatePredictabilityBasic52 GB303030016,600 transactions per hourGoodStandard/S010250 GB6060600521 transactions per minuteBetterStandard/S120250 GB9090900934 transactions per minuteBetterStandard/S250250 GB12012012002,570 transactions per minuteBetterStandard/S3100250 GB20020024005,100 transactions per minuteBetterPremium/P1125500 GB2002002400105 transactions per secondBestPremium/P2250500 GB4004004800228 transactions per secondBestPremium/P31000500 GB1600160019200735 transactions per secondBest出典(LATAM Support Blog)対策では、エラーにならない為の対策について考えます。方法1) より上位のモデルにスケールアウトする上に書いた表の通り、より上位のモデルを使用すれば同時リクエスト数の上限値が上がります。
※ 同時に価格も高くなりますが。。。方法2) リトライ処理を組み込む上位モデ…

Eclipseでタブ(>)と改行マークを非表示にする

Eclipseでタブ(>)と改行マークを非表示にするEclipseのコードディタで、デフォルトで表示されている、タブ(>)と改行のマーク。
コードが見にくくなり、はっきり言って邪魔なので非表示にしましょう。非表示にする設定(1)Eclipseメニューの、[ウィンドウ] -> [設定]より、設定画面を表示します。
(2)左側のツリーより、[一般] -> [JStyle]を選択します。
(3)改行、タグのチェックを外します。設定後
うん。すっきりした!

clearfix 2019

clearfix 2019CSSのclearfixについての、2019年時点の最新版です。clearfixとは親要素内に配置したfloatする要素の、回り込みを解除する為の、CSSテクニックです。2019年現在の最新版clearfixChrome, Firefox, Edge, Safariなどの主要ブラウザと、IE11をサポートしています。.clearfix::after{content:"";clear: both;display: table;}昔のclearfixひと昔前のclearfixを見てみましょう。
こちらは、IE8以降をサポートしたものです。.clearfix:before, .clearfix:after{display: table;content:" ";}.clearfix:after{clear: both;}さらに、昔のclearfixをみてみます。
こちらは、IE6以降をサポートしたものです。/* For modern browsers */.clearfix:before, .clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}/* IE 6/7 */.clearfix{zoom:1;}

[Azure] Linux仮想マシンをコピーする

[Azure] Linux仮想マシンをコピーするAzureの仮想マシンを複製する方法についてです。
公式のこちらのページでは、コマンドラインで複製する方法が紹介されていますが、今回はAzureポータルのGUI上からやって行きたいと思います。プロビジョニングを解除コピー元のVMにSSHでログインし、以下のコマンドでプロビジョニングを解除します。
waagent について$ sudo waagent -deprovision+user -force 仮想マシンを停止するAzureポータルより、コピー元となるVMを停止させます。
仮想マシン イメージをキャプチャ仮想マシンが停止した事を確認した後、隣にある[キャプチャ]ボタンをクリックして、コピー元の仮想マシンから、イメージをキャプチャします。作成するイメージ名とそのリソースグループを入力し、[作成]ボタンをクリックします。イメージから仮想マシンを作成作成したイメージは、選択したリソースグループ内に登録されれます。
Azureポータルから[すべてのサービス] -> [リソースグループ]を選択します。一覧に入力したイメージ名の、仮想マシンイメージが存在していると思います。
それをクリックします。画面左上にある、[VMの作成]をクリックします。後は通常の手順で仮想マシンを作成すれば、キャプチャしたイメージから仮想マシンが作成できます。注意点今回紹介した方法で仮想マシンを作成した時に、いくつか気付いた注意点について上げていきます。ユーザのホームディレクトリに置いてあったファイル私のやり方が悪かった?のか分かりませんが、コピー元と同じユーザ名で、仮想マシンを作成したのですが、元々ユーザホームディレクトリに置いてあったファイルは、全て消えていました。マウントポイントAzureファイル共有を、仮想マシンにマウントしていたのですが、作成した仮想マシンにマウントされていませんでした。
/etc/fstabに書いたマウント情報自体は消えていなかった為、再起動後には普通にマウントされていました。ネットワークの設定ネットワーク インターフェイスが新規作成される為、ファイアウォールなどの設定は消えます。

CUI環境で、Linuxの回線速度のテストをしたい!

CUI環境で、Linuxの回線速度のテストをしたい!コマンドラインでネットワークの回線速度を調べる時に、調べた内容です。
GUI環境であれば、ブラウザから簡単に測定できるサイトがあるのですが、LinuxのCUIから測定する方法について調べてみました。speedtest-cliPythonで作られたスクリプトで、Pythonさえインストールされていれば、単体で動作します。
非常に簡単に測定する事ができたので、こちらの使い方について紹介したいと思います。準備1. Pythonがインストールされているか確認以下のコマンドを入力して、Pythonがインストールされているか確認します。
インストールされていない場合は、入れて下さい。$ python --version 2. speedtest-cliのダウンロード以下のURLから、スクリプトをダウンロードします。$ wget -O speedtest-cli https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 測定する準備が出来たら、ダウンロードしたスクリプトを実行します。$ python speedtest-cli すると… 測定結果が以下のような形で表示されると思います。Retrieving speedtest.net configuration... Testing from Microsoft Corporation (xxx.xxx.xxx.xxx)... Retrieving speedtest.net server list... Selecting best server based on ping... Hosted by OPEN Project (via 20G SINET) (Tokyo) [6.15 km]: 2.454 ms Testing download speed................................................................................ Download: 994.59 Mbit/s Testing upload speed............................................…

Nuxt.jsでフィルタ(Filter)を使う

Nuxt.jsでフィルタ(Filter)を使うVue.jsで文字列のフォーマットなどに使うフィルター(Filter)を、Nuxt.jsでも使う方法を紹介します。pluginsディレクトリにフィルタを作るNuxt.jsでは、フィルタのコードは、pluginsディレクトリの中に作成します。今回は、先頭1文字目を大文字にするフィルタを作ってみました。
ファイル名は任意の名前でOKです。[ /plugins/myFilter.js ]import Vue from'vue' Vue.filter('capitalize',function(value){if(!value)return'' value = value.toString()return value.charAt(0).toUpperCase()+ value.slice(1)})nuxt.config.jsを編集上で作成したフィルタを読み込ませる為、nuxt.config.jsを編集します。
plugins内に、作成したフィルタのファイルパスを追記します。[ /nuxt.config.js ]const pkg =require('./package') module.exports ={~~ 中略 ~~ plugins:['~/plugins/myFilter.js'],}フィルタの作成と設定は、これで完了です。
この後は、今回作成したcapitalizeフィルタを実際使っていきます。フィルタの使い方フィルタの使い方は当然ですが、Vue.jsとまったく同じです。mustache 展開で使う場合{{ message | capitalize }}v-bind 式で使う場合<divv-bind:id="myid | capitalize"></div>さいごにフィルタをどこに置いたらいいか、分かりませんでしたが、pluginsに置けばとりあえず動きました。
置き場所間違っていたらごめんなさい。。。参考にしたもの[Vue公式] フィルター

【Vue.js】componentタグにパラメータを渡す方法

【Vue.js】componentタグにパラメータを渡す方法component タグで動的にコンポーネントを切り替えた時に、子コンポーネントのpropsにパラメータを連携する方法を紹介したいと思います。以下のサンプルコードを見れば分かると思いますが、component タグでパラメータを連携する時は、v-bindディレクティブを使います。サンプルコード子コンポーネントパラメータを受け取る子コンポーネントです。
今回は、nameとageの2つのプロパティを用意します。exportdefault{ props:["name","age"]}親コンポーネント親コンポーネントでは、componentタグのv-bindディレクティブに、子コンポーネントに連携するプロパティを設定します。<template><sectionclass="container"><divclass="content"><component:is="currentView"v-bind="{ name: user_name, age: user_age }"></component></div></section></template><script>import ChildComponent from'~/components/ChildComponent.vue'exportdefault{ components:{ ChildComponent,},data(){return{ currentView:'child-component', user_name:"山田太郎", user_age:"91歳"}}}</script>さいごに調べみると、割と簡単にパラメータが連携できました。
切り替えるコンポーネント毎に、連携するパラメータが違う場合、もう少し工夫が必要ですね。

【Vue.js】コンポーネントを動的に切り替える

【Vue.js】コンポーネントを動的に切り替えるVue.jsで、画面の一部のコンポーネントだけを、動的に切り替えたいと思った時に調べた内容です。コンポーネントの切り替えには、component要素を使います。サンプルコードまず、コンポーネントの切り替えを行う、メインページのサンプルコードです。<template><sectionclass="container"><button@click="view1">1</button><button@click="view2">2</button><divclass="content"><!--(1)component要素 (currentViewで指定されたコンポーネントを動的に表示する) --><component:is="currentView"></component></div></section></template><script>import Component1 from'~/components/Component1.vue'import Component2 from'~/components/Component2.vue'exportdefault{ components:{ Component1, Component2 },data(){return{//(2)表示するコンポーネント名を指定します。 currentView:'component1'}}, methods:{//(3)ボタンクリックで表示するコンポーネントを切り替えるview1(){this.currentView ="component1"},view2(){this.currentView ="component2"}}}</script>[Component1.vue]<template><div>&l…