あるかどうかはわかりませんが、 少なくとも面白いことであるのは間違いありません。 ネットワークを味方に Hikaruはエンジニアなので、 自分のパソコンで ウェブサーバーを立ち上げておくということは 大工さんが大工道具を持つぐらいに必然なのですが、 みなさんはどうでしょうか？ 一般的にはそんなものは必要ない と、思われるのではないかと思います。 が、今日は敢えて書こうと思います。 普段、スマホしか使わないという方も、 PCをお持ちでしたらぜひ。 自分のパソコンをウェブサーバーにしておきましょう と。 少し勉強すれば、副業ができるかもしれません。 自分には全く縁がないと思っていたプログラムやホームページ作成ができると趣味の幅も俄然広がるかもしれません。 ブログを書いている人もその仕掛けが紐解かれるかもしれません。 な～んだ、、、なんてね。 追々、このブログではいろいろなことを紹介していきたい

解決したい事 ソースコード Qiita風にコードをクリップボードにコピーするコード うんちくをちょっと あとがき 解決したい事 以前からこれだけは作ろうと思っていたんです。 Qiitaのサイトだったら、 参考になるコードを見つけると、 「ありがとう」 と心の中でつぶやきつつ、 それをコピーしたいと思うわけです。 それで、 コードのエリアにマウスオーバーさせると 「コピーできるよ」と、コピーボタンが表示され ボタンをクリックするとクリップボードに内容がコピーされる ついでにCopied!って表示してコピーされたことを教えてくれる 後は自分のエディタにペーストして。。。 とスムーズにいくわけです。 及ばずながら、 Hikaruもこのブログ上ではいろいろとソースコードを公開しているので そんなQiitaのようにコピーできるようにしておけば 誰かの幸せにちょっとぐらい貢献できるかな と思っていたの

Vue.jsの良さにやっと気付いてきた感のあるHikaruです。 スライドショーって意外と面倒なものと レッテルを貼ってなんとなく避けてきましたが、 （あ、正確にはそのあたりはデザイナーさんの範疇なので あまり携わったことがないということです💦） Vue.jsのv-bindを使えば簡単なんじゃないの？ と思い立ったので、ちょっと作ってみました。 散歩の途中で 使った写真はhikaruが散歩の途中で撮ったものから適当にピックアップして使いましたが、すごく簡単に実装できるように作れてびっくり(ﾟдﾟ)！ 初心者向きにできました。 でも、こんな風にコードをシンプルに整理するまでには紆余曲折が。。。 特にv-forというのをフィルタをかけて使う というところにたどり着くのにけっこういろいろ勉強しました。😅 超簡単ベーシックスライドショーのコード 使用するには↓を展開してコピーしてください。 そ

このところの記事でVus.jsを使ったスイッチの記事を書いてきましたが、今日はそれを少しアレンジしてみたいと思います。 はてなブログはかなり柔軟にscriptやstyle sheetも使えるので、こんなツールをちょっとした遊び心で。 hikaruのブログはダークなイメージのテーマを使っているので、ちょっと暗くて読みにくいなぁ、と思ったら。。。 このスイッチ toggle_on toggle_off をポチッっとクリックしてみてください。 どうですか？ ※ この記事はできればパソコンでご覧ください。 スマホでは画面サイズによっては、 表示効果にずれがおこりますので、 記事の意図した内容通りの表示にはならないことがあります。😓 【記事更新】 （2020-06-06） * この記事だけ背景色を変更しました。 * スマホでも記事の意味が伝わるようにスタイルを修正してみました。

こんな記事（ディシジョンテーブルのこと ）で前置きが長くなってしまいましたが、 Vue.jsで簡単にブラウザ上の表示をコントロールできることに感激したので第2弾は 「3路スイッチの回路」 イメージです。 材料 スイッチはwebで使えるスイッチ で紹介したマテリアルアイコンを使います。 今回は2か所あります。 画像はランプがOFF状態の時のものとONの状態の時のものをソースの imgBathPath に指定したディレクトリに用意します。 スイッチのon/offで画像を差し替えるので、onの画像とoffの画像は大きさを揃えておくのがポイントです。 ランプがOFFの時の画像 ランプ点灯時の画像 スイッチライン左上 スイッチライン左上 スイッチライン右上 スイッチライン右上 それぞれの画像の名称は何でもよいのですが、 on/offの画像の差し替え用共通メソッド function imageColo

今日は新しいカテゴリーを作りました。 題して「これだけ知りたい 部品集」 「知りたい～」 っていうのとはちょっと違うかもしれませんが、 要するにエンジニアとして仕事をする上で 「使いまわしのきくコード」 とか 「共通のデザイン」 とか、もしかすると 「便利なメソッド」 なんかかもしれない。 そんなものを思いついたときに書き溜めていこうと思う。（気合っ！） 初回の今日は題して 「webで使えるスイッチ」 material-iconとVue.jsで作ってみました。 こんな感じでクリックするたびに on/off が切り替わるイメージですが、 イメージだけではなくて、 それに反応して応用が利くようにしておこうという魂胆です。 骨格はこんな感じ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link hre

例えば、 「このサイトのページはちょっとマージン取りすぎていて酷いな、ちゃんと表示されないから今すぐスタイルシートを修正したい～！直すところは1か所だけでいいんだけど。」 みたいな瞬間接着剤的に修正したい時に、 ローカルのソースを修正して FTPで接続して それをサーバーにアップロードして などと面倒くさ過ぎてやっていられない。 と思ったら、VSCodeでは 「サーバー上のファイルを直接編集する」 こともできてしまいます。 もちろん、あらかじめ接続先のサーバー情報などはconfigで設定しておきますが、 VSCodeを開く F1を押す ftp-simple : Remote directory open to workspace を選択する 接続先のサーバーを選択する という要領で目的のファイルを直接選択しても良いし、ディレクトリを指定してもよい。 すると、エクスプローラーに選択したディレ

なんとなく「これだけ知りたい」の記事も書き溜まってきたので、 整理したいなぁ。。。 カテゴリーのメニューからはそれぞれの記事へのリンクはありますが、 要点をまとめておかないと自分でも使いにくい そもそも書き始めたコンセプトは受験生の単語カードみたいなものをイメージしていたのです。 ショートカットページというのもちょっと違う気がするけど。。。 それなのに、これではぜったい違う。 と、思ったので実行しました。 今日までのまとめを書きました。 こういうような書き方しておかないと実践的ではないですよね。。。 MySQLのこれだけ知りたい と、いつもの自画自賛 今日までの記事を整理したページ MySQLのこれだけ知りたい Excelのこれだけ知りたい Gitのこれだけ知りたい Phpのこれだけ知りたい 事あるたびに追記していきま～す。

<< 8. 道具へのこだわり ここまで書いてきて、 「労せずして」 「ミスを少なく」 を合言葉に、データベースと付き合いながらエンジニアの仕事を進めるための道具になってきたなと思っているところです。自画自賛(^_-)-☆ でも、大事なことはこれをちゃんと自分自身も含めて伝わるようにしておかないといけない！ 誰でも使えるように、公開リポジトリにはしてみたものの、中途半端はいけない！ と反省して今日は README*1を書いてみました。 Php Engineer Tools hikaru217 のREADME いや、Markdown*2って書くのは意外と楽しいですね。 ちゃんと画像も用意して、 ファイルマップも書いて ここでも体裁には少しこだわってしまいました。 誰かの目に留まるかな。。。 この【シリーズテーブル】はいったん完結としておこうと思います。 お付き合いいただいた方、ありがとうござい

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

（この記事は2020-4-26にリメイクしました） << 2. テーブル一覧を表示する 前回の記事で、テーブルの一覧を表示するようにしました。 内容は「テーブル名: table name」と「テーブルコメント: table comment」だけにしてあります。 それ以外の情報はここでは不要で、シンプルに見られるようにしておきました。 サンプルの題材にはWordpressのテーブルを使いました。 Wordpressのテーブル一覧 見ていただくとわかるように、テーブル名だけ見て用途のわかりそうなものもありますが、なんだかよくわからないものもあります。 こういう時にテーブルの名前の付け方って重要だなぁ、と思います。 ここで注目したいのは、それぞれのテーブルに「コメントが書かれていない」というところです。 そのテーブルの用途や、使用上注意することなどがちょっと書いてあるだけで、エンジニアとしてはす

（この記事は2020-4-26にリメイクしました） << 1. データベース接続 とりあえず、ローカル環境でデータベースに接続したら、中身がどうなっているのか、、、 そう思った時に、たとえ、体裁よくまとめられたテーブル仕様書があったとしても、経験的に100%信用するわけにはいかないと思っています。 年期の入ったシステムになればなるほど、その実態に合わせて仕様書が更新されているのか、最新の状態を表しているのか、などがはっきりしないことがあるからです。 でも、とにかく俯瞰して全体を見てみないと話が始まりません。 ですのでこの目で確かめることにします。 その時に、もちろんMySQL Workbench*1 やphpmyadmin*2といったツールもあるので、それらでも十分仕事にはなるのですけれども、ここは少し横着をすることと、仕事の効率を考えてオリジナルに進めていきます。 まず、メニューにテーブ

拡張子が .md で書き方のルールに従っていれば簡単にHTML文書にparse*1してくれるMarkdown文書の便利さは最高ですね。 シンプルなテキストでそのままでも読めるような書き方と内容で、 parseするとそれなりに体裁を整えることができるので 例えばあまりゴタゴタと書くのは好きではないエンジニアにとっては ちょっとした仕様やコメントを残す作業のハードルがかなり下がるのは間違いないと思います。 ですが、それを使うシーンはまだまだバラバラで チーム内で共通・共有の文書として使うには中途半端なイメージが拭いきれていない気がしますね。 その一つの要因に、標準のブラウザが 「MDファイルはHTMLにパースしてくれない」 ということがあります。 それじゃだめでしょ！ ということで、エンジニアとしてはサイトだけではなく、 ローカルファイルもブラウザでMarkdownを自在に使えるようにしておき

もうちょっと広く間を開けたいと思った時にいつもなんだっけ？ となるので書いておく &emsp; 広くするとき ま、まず使わないがついでに書いておく &ensp; ちょい広 &thinsp; ちょい狭