月別アーカイブ 12月 2018

takahashi 著者:takahashi

VSCodeでAdobe BracketsのようにHTMLの編集結果をリアルタイムで表示可能にするプラグイン”Live Server”

以前使ってたAdobe Bracketsというエディタでは、HTMLを変更すると、その変更を即座にブラウザに反映し、リアルタイムに編集結果を表示してくれる”ライブプレビュー機能”を搭載しています。

流石Webを開発することに重点を置いているだけはあります。
HTMLベースのWebページを作るときはとても重宝する機能です。

以前はファイルを保存するまでは反映されなかったのですが、現在は保存しなくてもリアルタイムで反映されるようになっています。凄いですね。

ということで、VSCodeに乗り換えてからも同様の機能が使いたくて、プラグインを探していたのですが、ついに発見しました!

Live Server – Visual Studio Market Place

Live Serverというプラグインです。
現在のAdobe Brackertsのようにリアルタイム反映はできませんが、ブラウザと連携し、ファイルを保存するごとにページを自動更新してくれる機能を持っています。

インストールをすると、VSCodeの右下に”Go Live”というボタンが出現します。

ここをクリックすると…

内部サーバーの起動と同時にデフォルトのブラウザが立ち上がります。

 

あとはそのままHTMLソースを編集し、変更を保存すると

こんな感じで、更新するたびに即座にブラウザの方で更新が入ります。

とても便利なので、VSCodeでWebページのコーディングをされている方は是非一度試してみてください。

  • この記事いいね! (0)
takahashi 著者:takahashi

もう閉じ括弧を見失わない! VSCodeプラグイン”Bracket Pair Colorizer”

プログラミングあるあるの一つに、閉じ括弧が複数あると、どの閉じ括弧がどの開き括弧と対応しているかがわからなくなってしまうことがあります。

勿論、ちゃんとインデントを付けていれば起こりづらい問題ではありますが、コードをコピペしたり、新しくブロックを増やしたりした際などに、一時的にインデントが崩れ、どの括弧がどの括弧に対応しているのか見ながらインデントを調整する作業が必要になってしまう場合があります。

そんな時はコードエディタの機能を使うことで作業がとても楽になります。

今回はより括弧の対応をわかりやすくしてくれるVSCodeプラグインをご紹介したいと思います。
とりあえず括弧を出したいがためにクソコードを書いてますが悪しからず…

Bracket Pair Colorizer – Visual Studio Market Place

Bracket Paie Colorizerは対応する括弧ごとに違う色を付けることで、どの閉じ括弧がどの開き括弧と対応しているのかを分かりやすくしてくれるプラグインです。

こんな感じに、インデントを一切付けない状態でも、括弧の対応が色でわかります。
また、対応していない括弧があれば、赤色で表示してくれます。

また、対応する括弧同士を縦線でつないでくれるので、たとえインデントがずれてしまったとしても

どの括弧と対応しているかを一目でわかる形で表示してくれます。

複雑なコードをよく書いていて、しばしば括弧の対応がわからなくなってしまう…という方は是非試してみてください。

  • この記事いいね! (0)
村上 著者:村上

【Excel】オートフィル機能を使って連続データを簡単に入力する

知ってるよ!という人の方が多いと思いますが…Excelのオートフィル機能についてまとめ。
というのも、奇数や偶数、10飛びなどの連続データを作ることもできるという記事を見つけ、そちらのご紹介をしたいがために、この記事を書いています。

 

まず、一般的な連続データの入力方法について。
連続データを入力したいエリアの最初のセルに、連続データの最小値を入力します。
下の画像では、A1セルに1を入力しています。

で、数値入力後、A1のセルを選択し、その時に選択セルの右下に表示される四角形をドラックします。
画像だと下方向にドラックしています。
しかし、これだけだと単に1がコピーされるだけなので、ドラック後に現れるオートフィルのメニューアイコンから「連続データ」を選択します。


すると、上の画像のように、連続データに変更されます。
通常の連続データの入力方法は以上です。

なお、ドラックの際に「Ctrl」を押していると、最初から連続データが入力されます。
ちなみに、連続データは数字だけでなく、日付にも対応しています。
また、日付の場合は、日の連続データか月の連続データかを選ぶこともできます。

 

ここからは、奇数・偶数などの若干特殊な連続データの入力方法について。
参考に…というか、紹介させていただきたい記事はこちらから。

オートフィル機能で連続データを入力するいろいろなテクニック | すぐに活かせる!Excel使いかたレッスン | 活用ガイド | パーソナルコンピューター VAIO® | サポート・お問い合わせ | ソニー
https://www.sony.jp/support/vaio/guide/excel/002.html

といってもそんなに複雑なことをしているわけではなく、例えば奇数の場合は、下のように 1 と 3 をセルに入力し、この両方のセルを選択した状態で、右下の四角形をドラックしてセルをコピーするだけです。

一応、説明のためのスクリーン画像を追加しましたが…こちらが不要なくらい簡単です。

なお、偶数を入力する場合は 2 と 4 をセルに入力し、あとは上の手順同様にこの両方のセルを選択・コピーするだけです。

 

以上、Excel で連続データを入力する方法でした。

  • この記事いいね! (0)
asaba 著者:asaba

【chromeApps】アプリをリロードするとcontents security policeで引っかかる

開発中のアプリをリロードしているとcontents security policy系のエラーを発見しました。

見てみるとインラインでjavaScriptを書くことは、contents security policeでは規制していますみたいなことを言っていますね。

でもCSSだって外部に書いているのに何で怒ってるんだこの人は・・・。実機では全く起こらないので、chromeだけの問題なのかな

と勘ぐっていますが原因はさっぱり分かりません。

ですがandroidではしっかりと動きます。

ん~、値を持ったままリロードしているのがchromeにとってはよくないのかな?

幸い他の機能には影響を及ぼしていないので実機で使う分には問題はないと思います。ですが軽視はできないので余裕がある時に

原因の究明に努めたいと思います。

  • この記事いいね! (0)
著者:杉浦

Laravelのルーティングを司るRouteServiceProvider

 Laravelのチュートリアルにおいてルーティングは/route/web.phpに記述する様に指示されます。実際このweb.phpとRouteファサード、ミドルウェアを用いるだけで大抵のやりたいルーティングは実現できます。しかしながらあくまで大抵であり、より深いことを行おうとした場合、もっと元の部分からルーティングを扱う必要があります。またルーティングパターンがあまりに多い時も元をさわってルーティングを記述するファイルを増やすことが可読性に貢献します。
 /app/Providers/RouteServiceProviderは/route/web.phpを呼び出し、ルーティングのマップを定義するコードです。ソースコードには次の様にあります。

    /**
     * Define the routes for the application.
     * @return void
     */
    public function map()
    {
        $this->mapApiRoutes();

        $this->mapWebRoutes();
    }

    /**
     * Define the "web" routes for the application.
     * These routes all receive session state, CSRF protection, etc.
     * @return void
     */
    protected function mapWebRoutes()
    {
        Route::middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/web.php'));
    }

 コメントとコードの通り各ルーティングのマップ呼び出し、webのルーティングを定義、というメソッドらです。例えばルーティングファイルを増やしたいならば次の様に行えます。

    /**
     * Define the routes for the application.
     * @return void
     */
    public function map()
    {
        $this->mapApiRoutes();

        $this->mapWebRoutes();

        $this->mapAppRoutes();
    }

    /**
     * Define the "web" routes for the application.
     * These routes all receive session state, CSRF protection, etc.
     * @return void
     */
    protected function mapWebRoutes()
    {
        Route::middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/web.php'));
    }
    /**
     * アプリ用ルーティングの定義
     * @return void
     */
    protected function mapAppRoutes()
    {
        Route::prefix('app')
             ->middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/app.php'));
    }

 もうほとんどコピペです。他にもモデルを定義する事によりコントローラ上の引数で楽をできます。

    // RouteServiceProvider内部
    /**
     * Define your route model bindings, pattern filters, etc.
     * @return void
     */
    public function boot()
    {
        parent::boot();
        Route::model('member_rank', MemberRankMaster::class);// 追記部
    }
          // route/web.php内部
          Route::resource('member_rank', 'Admin\MemberRankController');

 上のコードの様にモデルクラスとルーティング名の対応の定義とそのルーティング名によるコントローラの呼び出しを記述することによって

    /**
     * member_rank/{id}/editで呼び出されるメソッド
     * Show the form for editing the specified resource.
     * @param  MemberRankMaster          $rank
     * @return \Illuminate\Http\Response
     */
    public function edit(MemberRankMaster $rank)
    {
        return view('admin.pages.member_rank.edit')
            ->with(compact('rank'));
    }

 このように引数でいきなりMemberRankMaster::findOrFail($id)で得られる様なEloquentオブジェクトが使えます。わかりやすい上にシンプルな記述で済みますね。

  • この記事いいね! (0)
takahashi 著者:takahashi

macOS Mojaveでとにかく簡単に多段SSHしたい! -SSH Tunnel Manager編-

前回の記事でmacOSでも簡単にSSHTunnelをできるようにしたいと探した結果、Coccinellaというアプリを発見し、試しては見たものの残念ながらmacOS Mojaveではうまく動かなかった…という話をご紹介しました。

今回は、いろいろ探していて見つけたもう一つのSSHTunnelアプリ”SSH Tunnel Manager“を試してみたいと思います。

起動するとこんな画面が出てきます。

まず、設定画面左下の+ボタンを押して、新しい項目を追加します。

nameには何のサーバーかわかりやすいような名前、Loginは踏み台サーバー側のユーザーid、Hostはホスト名、Pirtにはポート番号をそれぞれ指定します。

今回はlocalhost経由で目的のサーバーにつなげる設定(例えば127.0.0.1:1222につないだら踏み台サーバー内のネットワークの192.168.0.110:22に転送する)にしたいので、画像のように設定値を入れていきます。

少しわかりづらいですが、左側のportがlocalhostにマッピングするポート番号、IPと右側のportには接続先サーバーの情報を入力します。

また、Optionsボタンを押すと詳細な設定を行うことができます。

この辺りは使用しているサーバーの設定やお好みに合わせて設定してください。
ちなみにsocks4によるプロキシも利用できるようです。

設定が完了すると、こちらのウインドウに接続先サーバーが追加されます。

項目の右側にある”Start”をクリックすると、接続処理が開始されます。

Coccinella同様に通知領域に追加することも可能で、その場合は通知領域にあるアイコンをクリックして表示されるコンテキストメニューから接続することも可能です。

なお、秘密鍵を使った接続の場合は、あらかじめ.bashrcなどに”ssh-add”コマンドを記述して秘密鍵を事前にインポートするように設定しておく必要がありそうです。

それでは早速接続してみます。

とりあえず、接続はうまく行った模様。
後はほかのアプリケーションから接続できるかですが…

おおおバッチリ繋がりました…!!!
特に接続が切れたりすることもなく、安定した接続を行うことができました。

今後家のサーバーにアクセスするとき、これでmacOSからも踏み台サーバーを意識することなく使うことができそうですε-(´∀`*)ホッ

macOSからの多段接続にお困りの方はぜひ試してみてください。

  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】selectタグのエラーについて

selectタグで送られた値を表示するためにthis.state.wordを値に設定したのですが、見事に怒られました。

エラーの内容です。

 

なにやら赤文字でSelect Console Error: Select elements must be either controlled or uncontrolledと訴えているようですが

selectタグで異常をきたしているのは間違いないのでとりあえず調査、あっさり消してみせました。

簡単に説明するとdefaultvalueが不要ですということです。

これはpropで受け取ったthis.state.wordとdefaultValue = “”を同時に定義している為、制御しているのかしていないのかどちらか

はっきりして!という意味です。

タグを制御するときは値の設定をひとつにしぼってくださいということですね。日ごろからじっくりコードを理解して読んでいれば

このような事態も防げたかもしれませんね~。

 

今回の反省点は

 

・自分の書いたコードはエラーがなくてもこまめに見直す

 

・案を思いついたらいきなり書かずにプロトタイプ(模擬)のソースで試す

 

の二点です。初心忘れるべからずですね・・・。

  • この記事いいね! (0)
村上 著者:村上

【Excel】棒グラフの目盛りを0始まりにする方法

横棒グラフを扱っているとき、たまに 横軸の目盛りが0から始まらないグラフがあったのでその対処法について。
ちなみに、Excel のバージョンは Excel 2013 です。
というか、そもそもなぜこの現象が発生するのか…それについては現在調査中です。
Excelさんのありがた迷惑な自動補正だったりするのでしょうか…?

 

さて、目盛りの修正方法ですが、まずメモリを修正したいグラフを選択します。
そうすると、下の画像のようにプラスのメニューボタンが現れると思うので、そこから 軸 > その他のオプション を選択します。

オプションを選択すると、下の画像のようなメニューが画面右に現れると思います。

そうしたら、このオプションの「境界値」から「最小値」を 0 に変更します。
作業としては以上で終了です。
グラフにもこの変更が反映され、正しいパーセンテージでグラフが表示されているかと思います。

 

以上、Excelで作成したグラフの軸の目盛りが0始まりでない時の対処法でした。
グラフの割合がおかしい!というときには、まずこちらの方法で目盛りの最小値を確認してみることをおすすめします。

  • この記事いいね! (0)
著者:杉浦

PHPDocの内容を継承する@inheritdoc

Inheritance — phpDocumentor
 @inheritdocは継承元(implements元やextends元やtrait元)のPHPDocの説明を継承するタグです。@inheritdocを使うと次の様に継承元のPHPDocの説明文を受け継げます。
 
 元の振る舞いと継承後の振る舞いに大した違いが無い場合、同じ説明を記述することは面倒です。@inheritdocを使うことで何度も同じ記述を行わず済み、楽が出来ます。
 @inheritdocは継承元の説明をインラインに埋め込むコメントとして扱えます。冒頭の説明文の部分に関しては次の様にけっこう自由がききます。

  • この記事いいね! (1)
著者:ym

ntpd が起動できなくなりログも吐かない

ntpd で時刻同期をしているのですが、OS を再起動したタイミングで ntpd が起動できなくなってしまいました。

ntpd が起動できなくなった原因と、ntptime が ERROR になる原因は違いそうですが、ntpd を起動しておかないとズレが生じる為、ntpd が起動を起動するところまでは復旧する必要があります。

disable monitor

脆弱性対策で ntp.conf に設定を入れていたのですが、原因不明のため、ntpd を最新版へアップグレードして起動の確認を行いました。

ntpdc と ntpq

古い人間なので ntpdc を使っていましたが、今どきの ntpd は ntpq を使う様です。ntp.conf を新バージョンに合わせた設定に変更し、ntpq -p で同期確認。

無事同期ができるようになりました。でも、相変わらず、ntptime で ERROR は吐く。

IPMI 経由で BIOS の時刻を見ると、ものすごいズレがあるので、ntpdate -b で同期を行いたいのですが root で実行しても permission denied 。困りました。

  • この記事いいね! (0)