git 2.18から「Unknown option: --list-cmds ...」が起きたのでその対処法

macで開発してとgitコマンドをtabで入力補完してくれ他のでイライラしたので、入力補完をいれてみました（今更）。まぁ、Homebrew経由でインストールすればこんなことにならないのでちゃんとやりましょう。

僕の場合はgitが以下のインストーラーで、bash-completionがHomebrewで入れたのでちょっとめんどくさいことになったのでその備忘録として。だから参考にしないでください。
Git

Homebrewをインストール

brew.sh
Macで入れてない人いないと思うんで上記のサイトのコマンドで適当にやってください。

bash-completionのインストール

brew install bash-completion

「/usr/local/etc/bash_completion.d/」にコマンド補完用のシンボリックリンクが出来ていると思います。僕の場合はgit-completion.bashとかが入ってますが気にしないでください。

bash_completion.dに以下を書く

if [ -f $(brew --prefix)/etc/bash_completion ]; then
  source $(brew --prefix)/etc/bash_completion
fi

gitをHomebrewでインストールしてないのでgit-completion.bashとgit-prompt.shがありません。
なのでwgetで入れます（そもそもwgetすらない）。

brew install wget
cd /usr/local/etc/bash_completion.d/
wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -O git-completion.bash
wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -O git-prompt.sh

で

cd
source .bash_profile

でgit statusって打とうとしてタブ入力したら以下のエラー

git staUnknown option: --list-cmds=list-mainporcelain,others,nohelpers,alias,list-complete,config
usage: git [--version] [--help] [-C <path>] [-c name=value]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

これは2.18から「--list-cmds」が追加されたようで、git-completion.bashは2.18、gitは2.16.3だったのでgitでオプションがないよ！って言われてるみたい

git-completion.bashのバージョンを下げるかgitをあげるかどちらかなんですが、下げる意味がないので私はバージョンをあげて対処しました。Homebrewでインストールしてないのでここでインストーラーから入れました。

まじで誰も得しない記事だなこれは！

Bing Webマスターツールを使う

SEOのお話。

なんだかんだ先月は18KPVまで行きました。今月は明日か明後日ぐらいには１万に達する感じなので２万ちょいの見込みです。ちょっと伸びが止まってきましたね。。

まぁ、いくつか要因はあるんですが検索順位がまったく変動しないことが一番かなと思います。やっぱりレ○チョクとかDoco○oとかには簡単には勝てんすね。

ここらへんは頑張りとかでは何ともならんのでどうしようもないですが、上の結果を見てBingが圏外になってるじゃないですかー！！と思ったのでここら辺を何とかしようと思います。まぁBingはシェア率がモバイル0.1%、PCが8%ぐらいなので効果が少ないとは思うのですが、少しはプラスになるのは間違いないのでやっとく意味はあるかなと

Bing Webマスターツールに登録する

www.bing.com
Facebookやらいろいろ使えるんで、適当に登録してください。

サイトを登録する

トラフィックが最も多いローカル時刻を聞かれるのでアクセスが多い時間を指定してください。みんなの洋楽ランキングは夜が圧倒的に多いのでそこを指定しました。アナリティクスでどの時間にアクセス多いか見れるので確認して見てください。こちらは[ホーム]から閲覧できます。

所有権を確認する

３つやりかたがありますが、１がいいでしょう、何も汚さないし。

サイトマップを登録する

トラフィックが最も多いローカル時刻を指定したからでしょうか、保留中になってるのでトラフィックがない時間に送信されるんですかね？よくわかりません。

URLを登録する

インデックスしてほしいURLを指定しました。

これで一通り完了したので、こっからちょいちょい確認して経過を見ようかと思います。

雑談
昨日、Githubが落ちたんですが、AzureのGithubデプロイも失敗しました。一旦切断して再度セットアップしたら直りました。Microsoftに買収されてからこれだと不安になりますね。ま、GitLabとかbitbucketに変える気は全くないですが（いろいろ楽よGithubの方が

追記
すごいね、たった１日で上がってきた！

ASP.NET Core MVCにおけるファイルダウンロードのあれこれ

結構サボってたー。ブログ書き続けるのは難しい！平日は寝たいし、休日は遊びたいし。

今回はASP.NET Core MVCでのファイルダウンロードの実装方法を説明します。ファイルダウンロードにもいろいろあって

• ファイルを保存させる
• ファイルをブラウザで表示させる

主にこの２つのパターンがあると思います。結構いろんなやり方があったのでその一部を書きます。

PhysicalFileResult

docs.microsoft.com
物理ファイルにアクセスしてファイルを操作する方法です。挙動はブラウザにファイルが表示されます。.net coreに移行する際など今までのディレクトリ構成を変えずに実装出来る方法です。

Startup.cs
物理的にアクセスする為にアクセスを許可します。今回は直下のImagesディレクトリを許可します。

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "Images")),
    RequestPath = "/Images"
});

Controller
物理パスを取得し、PhysicalFileResultにパスとMIMEタイプを指定します。

public IActionResult PhysicalFileResult()
{
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Images", "neet.png");
    return new PhysicalFileResult(filePath, MediaTypeNames.Image.Jpeg);
}

VirtualFileResult

docs.microsoft.com
これはURLで指定するような仮想パスを指定してファイルを取得する方法です。挙動はブラウザにファイルが表示されます。Controllerで完結するので比較的使いやすい部類かなと思います。
Controller
URLのパスとMIMEタイプを指定します。

public IActionResult VirtualFileResult()
{
    return new VirtualFileResult(@"/Images/wwwroot_neet.png", MediaTypeNames.Image.Jpeg);
}

FileContentResult

docs.microsoft.com
FileContentResultは二つ方法があります。こちらはDBに画像が格納されているパターンやバイナリを使う際に有効です。
まずはファイルがダウンロードされるパターン。

Controller
バイナリとMineタイプとファイル名を指定します。

public IActionResult FileContentResult()
{
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Images", "neet.png");
    var file = System.IO.File.ReadAllBytes(filePath);
    return File(file, MediaTypeNames.Image.Jpeg, "neet.png");
}

ブラウザに表示するパターン
上記のコードでファイル名を省いたパターンです。

public IActionResult FileContentResult()
{
    var filePath = Path.Combine(Directory.GetCurrentDirectory(), "Images", "neet.png");
    var file = System.IO.File.ReadAllBytes(filePath);
    return File(file, MediaTypeNames.Image.Jpeg);
}

ResponceヘッダーのContent-Dispositionによってブラウザの挙動が変わるようで、ファイルを指定すると「attachment」になりファイルをダウンロードする動き、指定しないと「inline」になりファイルをブラウザで表示するような動きになります。

Responceヘッダを直接書きければ、同じように動くんですがわざわざやる意味もないのでここら辺を活用できればいいと思います。今回説明したパターンのコードを以下に置いとくので参考なれば。
github.com

【参考】
stackoverflow.com

Macで作ったASP.NET MVC CoreのDocker ImageをHerokuで動かす【完成編】

herokuでASP.NET MVC Core MVCが動いた！ちなみに以前に書いた記事では出来ませんでした。。
tekitoumemo.hatenablog.com
はい、出来なかったではないですね、確実にやり方が違いました。ただ、実際動いたけどよくわかってないのでやり方を書く感じで。

BuildPack

herokuで.NetをサポートしていないのでBuildPackが必要です。
github.com
Buildpackというのは、アプリケーションをデプロイするたびに任意のコマンドを実行できる仕組みだそうで、これがあるとherokuのDocker環境で.Net Coreが動くようになります。

Buildpackをなんかすれば動くそうですが、サンプルアプリがあったので、これを活用します（助かった）サンプルは以下のURLがあります。
github.com

サンプルアプリは、Reactのサンプルになっています。僕が作りたいアプリケーションはMVCなのでsrc/AspNetCoreDemoApp配下のファイルをごっそり変えちゃいます。以下の内容に変更しました。

AspNetCoreDemoApp.csproj

メールするアプリなので、MailKitをインストールしました。Microsoft.AspNetCore.Allは.Net Core 2.1からMicrosoft.AspNetCore.Appに変更されたので変更しておきましょう。

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="MailKit" Version="2.0.3" />
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.7" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.3" />
  </ItemGroup>

</Project>

Program.cs

新規で作ったテンプレートと同じ状態にします。

using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;

namespace AspNetCoreDemoApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }

        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .Build();
    }
}

Startup.cs

これも新規で作ったテンプレートと同じ

using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;

namespace AspNetCoreDemoApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }

        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .Build();
    }
}

あとは、MVCアプリで必要なファイルを追加してHerokuにデプロイすれば完了です。herokuはgithubと連携出来るので以下のように関連付ければいけます。

そしたらhttps://{アプリ名}.herokuapp.com/にアクセスしてみましょう。

入社一年目のときに作ったフリーソフトの問い合わせ画面が出来ました。MailKitもちゃんと動くしいまのところ問題は出ていません。ただ、実際に運用するのは微妙ですが、無料で.Net Coreのアプリケーションが公開出来るのは素晴らしいですね。SSL対応出来てよかった。

（雑談）
ITunEsTooL - あなたのiTunesを快適に
このソフトなんですが、毎月それなりのディナーが食べられるぐらいまでの収入が入るようになりました。完全放置気味＋ソース汚すぎ＋終わってる技術なのでだれか１０万ぐらいで買ってくれないですかね（笑）

Let’s EncryptでワイルドカードSSL化に挑戦（更新編）

SSLを更新しました。まぁ、前回書いたので有効期限残っていても更新できるよっていう自分のためだけの備忘録として。

Let’s Encryptは有効期限は３ヶ月と決まっていますので更新しなければいけません。毎回更新するのは面倒なので自動化すればいいんですが、３ヶ月に１回だからめんどくせー＆ちゃんと記事読んで検証するのが頭の悪い僕にはどうも向いてません。なので手動の記事になります。Let’s Encryptが３ヶ月しか発行しない理由が以下に書いてあります。
証明書の有効期間が90日間な理由 - Let's Encrypt 総合ポータル

今までにも記事を書いたのでリンクを載せておきます。以下の記事の手順でやればAzureでは大丈夫です。他のWindowsサーバーでなければ最後の２つは必要はありません。

tekitoumemo.hatenablog.com
tekitoumemo.hatenablog.com
tekitoumemo.hatenablog.com
tekitoumemo.hatenablog.com

私の場合は7/10に期限が切れるので暇な今日に更新しておきました。Let’s Encryptは同じドメインでも複数作れるみたいですね。Azureに登録したあとはこんな感じです。

うっかり忘れてたんですが、SSLバインドの設定をしなければ更新されないのでちゃんとやりましょう。

ちゃんと更新されてます^^。安全なサイトなのでぜひ遊びに来て下さい！

mygkrnk.com

・雑談
はてなでもLet’s Encryptを活用したSSL対応を行いましたね。有料のみですが。
staff.hatenablog.com
SSL化にあたって、３ヶ月もすると馬鹿な僕は絶対忘れてるのですがブログに残していたので１０分程度で出来てよかった。まぁ、はてなブログに課金はしないですけど。

全く注目されてないサービスが3カ月で月間1万PV達成した

4月の頭に公開した「みんなの洋楽ランキング」が月間1万PVを達成しました。今月があと一週間ちょいあるので14KPVぐらいで着地しそうです。お金はクラウド以外にかけてません。

tekitoumemo.hatenablog.com

全く注目されてないっていうのは、このサイトが記事に取り上げられないとか、Twitterも全くバズってないとかこのブログも月間PV1000ちょいで僕自身、有名人じゃないのでもはや全く注目されてないって言葉がふさわしいのではないでしょうか（笑）

「開設1カ月で1万PV達成した方法」などの記事がありますが、あんなのはもともとバックグラウンドがあった人かたまたまバズったか嘘付いてる（笑）かのどれかです。凡人でもコツコツやれば、1万PVぐらいは達成出来る（多分）ので、やったことを書いて行きます。

まずはアクセス数

ブログ（笑）まぁ影響力ないことがわかるんじゃないでしょうか。

※なにも根拠がないので、流し見推奨。僕はエンジニアなので開発系多めで書きます。

とりあえずタイトルで攻める

このサイトは「洋楽ランキング」ってワードを狙ったのでタイトルも「みんなの洋楽ランキング」にしました。ってのは後付けで、英語でタイトルを考えてたのですが洋楽って「import」や「Foreign」やらの単語が関連するのですが、逆にだせぇ！って思ったのでありふれた名前にしました。ちなみにSEOでは、タイトルと検索ワードが合っていたとしても上位に上がることはありません（めちゃめちゃニッチワードは除く）。タイトルは重要って言われてるのですが、そんなもんより中のコンテンツを重視して作り上げていった方が確実に良いですし、小手先のテクニックなんか全く通用しないのではっきりいってそこに力を入れるのは無駄です。SEOに関して複雑に考えすぎず、検索ワードに適したページが上位に上がるって思ってた方が良いです。上位に上がってるサイトに勝ち目がなければ100%無理です。

Twitterをやる

サイト立ち上げた当初は全く人来ません。お金かけずに人を集めるのはSEOかTwitterかブログぐらいしかありません。SEOとブログはそれ自体にアクセスを集めるのが時間かかるので、自分からアプローチ出来るTwitterを使いました。ツイッターアナリティクスでどれだけの効果があるかわかるので割とアリだったかなと思います。昔の投稿に戻るのがメンドイので最近の投稿です。

「クリックたったの8かよ！」って思った人、こういうのはコツコツやるしかないんです。4月は100投稿ぐらいしたので流入のほとんどはsocialです。orgnicは「洋楽ランキング youtube」で10〜20位ぐらいになってたのが要因かと。なんで上がったのかよくわかりません。

こちらが今現在です。あれほど影響があったソーシャルが数％レベルになってしまいました。

ちょっと不思議なことがあったのですが、TwitterがSEOで15位ぐらいに上がったとき、みんなの洋楽ランキングが30位ぐらいだったんです。そこから一気に15位以上は安定して上がってきたので本家のサイトよりTwitterが上回ることはないように出来ているのかなーと思いました。

デザインを考えまくる

デザインというのは見た目だけじゃなくて、サイトをどう使ってもらうかやプログラムを含めてです。デザインはとにかく色と画像を意識しました（色は超重要）。画像はインスタのアプリ「レイアウト」を使って、サイトデザインは色を意識して乗っけました。タグはボタンっぽくするデザインを検討してたのですがやかましかったので下線に変えました。デザインは99％がモバイルって意識をもって作ってます。

次にサイトをどう使ってもらうかですが、「見るだけ」を意識していて、会員登録とかそこらへんのめんどくささを全部取っ払いました。もうちょっと人増えたらいいねとかコメントぐらいは作ろうと思ってます（React使いたいし）が、会員登録は全く考えてないので一生作りません。

インデックス無双

Googleのインデックスをひたすら増やすためにとりあえずページを増やしまくりました。サイトマップも自動更新出来るようにプログラム組んでページ増やしたら更新を繰り返しました。多分100回は送信してます。ライターでもなんでもない友人に「テキトーでいいからとりあえず書いて」って頼んで増やしました。ここはWEB知らない人と運用していくと、すぐに結果を求めようとしてくるので雑＋数で勝負的なところがあるのでなかなか辛さもあります。

• 気合いで増やした図

どこでも開発出来る環境を作る

公開当初は.Net Framework、EntitiyFrameworkで作ってしまったので遅いしWindowsでしか開発出来ませんでした。ずっとMac miniのBootcampで開発してたんですが、仕事から帰って疲れてるのにデスクに座って開発なんか出来ませんし、寝っ転がってバラエティでも見ながら開発したいですよね。.Net Coreが2系から異様な完成度になってかなり実用的になったので採用して、公開してから1カ月も経たないうちに.Net Coreに移行開始しました。初めは以下の記事に書いた低スペックのノートpcにubuntuのclassicを入れて開発してました。当然、SQLとか入れられないダメダメスペックなのでそこらへんは全部クラウドで運用しました。
tekitoumemo.hatenablog.com
半分ぐらい開発したとこで、このPCじゃさすがにキツイと思いMacBookを買って開発してました。めでたく6/1に移行が完了し、改善スピードも向上したかなと思います。ちなみに.Net Coreの移行は.Net Frameworkと比べて、アーキテクチャがかなり変わっているのでサイトが小さくないと一人では移行出来ないレベルになります。なので体壊すレベルのスピートで移行しました（非推奨）。

技術的な話をしてなかったので以下に書いておきます。
デザイン:bootstrap
フロント:jquery（Reactに置き換える予定）
サーバサイド:C#、.Net Core 2.1
クラウド:Azure Web Service、Azure Database、Azure Function

友人になぜ、「Windowsで開発しないのか」って言われたんですが「ノートpcダサいのしかないじゃん」って答えました。本当にそれ意外の理由はありません。

ってかこの程度のサイトならWordPressでイイんじゃね？って冷静になって気づいて虚しくなりました（笑）

とりあえず自動化にこだわる

まずはデプロイ自動化。とりあえずテストコード書きまくって、ローカルでテスト成功したらdevelopにプッシュ。ちょっと不安だったらAzure Web Service作って動作確認出来たらAzure Web Serviceを捨ててmasterマージ。テストコードはモックをあまり使ってなくて本番のミラーDBにアクセスしまくってます。モック使ってもいいんですが、大したプログラムじゃないんでデータによるバグを検知出来れば良いかなーと思ってあまり使ってません。ミラーDBも開発終わったら捨てる。バッチ系はAzure Functionで１日に一回程度動かす感じです。今後はAzureの継続的デプロイを入れてそこらへんはなにもしない感じにしようと思ってます。とりあえず個人でサイト運用するなら絶対にPaas使うことをおすすめします。お金は多少かかるけど楽すぎるので他に集中出来ます。

ちゃんとチケットを切る

個人で開発してるとそこらへんがおざなりになります。これは今の現場でいいなーと思ったやり方なんですが、一つのチケットの内容以外は修正しません。開発してるとここ直したいなーとか出てくるのですが、相当な緊急でない限りはチケット以外の修正は入れないようにしました。その場で修正すると中途半端になるので頭が冷静なときにチケット書いて修正していくとやることが明確になってよかったかなと思います。

Issue番号入れるとチケットに乗るのでブログにも描きやすいです。

結構簡単に説明しましたが、仕事から帰ってきて毎日２時間ぐらいコツコツやってきたのでそれに見合った効果が出てよかったなーと思います。現在SEOで安定的に4位になってきたのですが、こっから上位に上がるには時間がかかりそうなのでのんびりと改善していこうかなと思います。

運用しているサイトで使っている.Net Coreのミドルウェア

mygkrnk.com
地味ーな努力と運によってSEO4位（「洋楽ランキング」で）まで行きました。今月は12KPVまで行く見込みで、予想よりはるかに上回りました。

ということで、.Net Coreで作っているみんなの洋楽ランキングで使っているミドルウェアの紹介します。正直、超スモールサイトなので結構少ないです。

セッション管理

.Net Coreのセッション管理は「Microsoft.AspNetCore.Session」を使います。

「Microsoft.AspNetCore.Session」をインストール

dotnet add package Microsoft.AspNetCore.Session --version 2.1.0

Startup.csに以下が必要です。

using Microsoft.Extensions.DependencyInjection;
...
public void ConfigureServices (IServiceCollection services) {
services.AddDistributedMemoryCache ();
services.AddSession ();
...
}
...
public void Configure (IApplicationBuilder app, IHostingEnvironment env) {
...
app.UseSession ();
...
}

URLを小文字にする

ここらへんはMVCでも同じですね。

public void ConfigureServices (IServiceCollection services) {
    services.Configure<RouteOptions> (options => {
        options.LowercaseUrls = true;
    });
}

エラー系ミドルウェア

エラーハンドリングの記事を書いたので以下を参考にしてください。
tekitoumemo.hatenablog.com
tekitoumemo.hatenablog.com

静的ファイルを使う系

みんなの洋楽ランキングはファイルサーバーとWEBサーバーを併用してるのでwwwrootにアクセスする必要がありました。なのでwwwrootのファイルを扱えるようにします。

using Microsoft.Extensions.FileProviders;
public void ConfigureServices (IServiceCollection services) {
services.AddSingleton<IFileProvider> (
    new PhysicalFileProvider (
    Path.Combine (Directory.GetCurrentDirectory (), "wwwroot")));
...
}
public void Configure (IApplicationBuilder app, IHostingEnvironment env) {
     app.UseStaticFiles ();
     ....
}

本当はファイルサーバー用意してやった方が良いけど、コストがかかるのでとりあえずと言う感じ。

リダイレクト

azureドメインから本ドメインにリダイレクトするためのミドルウェアです。IISのパターンのみ。Apacheの場合はAddApacheModRewriteを使えばよいです。
まずはwwwroot直下にIISUrlRewrite.xmlを用意します（名前はなんでも良いっぽいです。）。
IISUrlRewrite.xmlは以下のように設定しました。

<rewrite>
    <rules>
        <rule name="mygkrnk.azurewebsites.net" stopProcessing="true">
            <match url="(.*)" />
            <conditions>
                <add input="{HTTP_HOST}" pattern="^mygkrnk\.azurewebsites\.net$" />
            </conditions>
            <action type="Redirect" url="https://mygkrnk.com/{R:1}" redirectType="Permanent" />
        </rule>
    </rules>
</rewrite>

次にStartup.csに以下を設定します。

using (StreamReader iisUrlRewriteStreamReader = File.OpenText (Path.Combine (Directory.GetCurrentDirectory (), "wwwroot", "IISUrlRewrite.xml"))) {
    var options = new RewriteOptions ()
        .AddIISUrlRewrite (iisUrlRewriteStreamReader);
    app.UseRewriter (options);
}

公式に書いてあるのでそれ通りやった感じですね。
docs.microsoft.com

.Net Core2.1 MVCの互換性レベルの指定

.Net Core2.1rcから.Net Core2.1にアップデートしたので、その対応です。これは別の記事にする予定です。

services.AddMvc ()
    .SetCompatibilityVersion (CompatibilityVersion.Version_2_1);