著者:asaba
【コマンドプロンプト】mdコマンドでの使い方
コマンドプロンプトにおいてディレクトリを作るコマンドといえばmkdirコマンドですが、これ以外にも[md]というコマンドを使って
同じ動き。つまりフォルダを作ることができることをつい最近知りました。
名称は違うけどそれぞれ何が出来るかというと、両方とも特にこれといって尖った違いはありません。
mkdirだと長いのでmdにしましょうという流れでエイリアスとして使われるようになったのがきっかけで普及したというただそれだけの
相違みたいですね。
使い方もmkdirとなーんにも変わりません。どこか適当なフォルダに移動した後に下記のように記述してフォルダを作ることができます。
</pre> ※空のフォルダが作られます。 <strong>mkdir</strong> C:\Users\user\Documents\appFolder> mkdir temp <strong>md</strong> C:\Users\user\Documents\appFolder> md temp <pre>
そのほかの操作もmkdirを置き換えるだけなので、コマンド操作でmkdirを書くことなく開発効率を向上させることができます。
ちなみにこれpcで何回もコマンド操作しているのにも関わらず知りませんでした。ガラパゴスの境地だったことを反省します。
著者:asaba
【windows10】windows10シャットダウン時にヒヤッとした話
自宅のpcで作業を終えてシャットダウンをしようとしました。すると
「他のユーザーがこのPCを使っています。このままシャットダウンすると、そのユーザーの作業内容が保存されない可能性があります。」
誰かが自分のpc使ってる！？パスワードとか外に漏らしたことないけどどこかで個人情報流れちゃったのかなどうしよう・・・と
軽くパニックに陥りました。chromeのアカウントを別のpcで使ったことはあるけどそしたらgoogleからメールが来るはずだよね等
根拠がない仮説を唱え始めてしばらく時間を置いて冷静になって考えてみました。そういえば昨日プログラムのアップデートしたよね・・・？
ここでセキュリティソフトの仕様が変わったのかと思ったけどそうじゃない。セキュリティだったら通知を送らないなんてことはない。
これだけ考察した結果結局更新したwindowsの仕様という結末になりました。具体的にいうと別のアカウントで常時サインイン状態
になっていることが起因です。
1台のpcに複数のアカウントがある方向けの仕様なのでしょうか。（アカウント作った覚えないけどな～。。）
別のアカウントでソフトをアップデートしている間に本アカウントで作業をする必要のあるかたには合った仕様だとは思います。
ですが一つのアカウントしか使っていない人にとってはなんぞや！！！！って驚かれてもおかしくないと思います。なにせ
自分しか使っていないのですからね・・・。
以下対処法です。↓
①スタートボタンから設定画面を開く
②アカウントを開く
③左メニューバーのサインインオプションを開く
④下に行ってプライバシーのトグルをオフにする。
⑤更新または再起動の後にサインイン情報を使ってデバイスのセットアップを自動的に完了します。トグルをオフにする。
以上です。次のアップデート時には心臓に悪くないものをお願いしたいです。
著者:asaba
【jquery】jquery3のアップグレードガイドを見て感じたこと
今更な記事ですがご容赦ください。
フロントエンジニアさんにとってよくお目にかかれるjquery。サーバーへかける負担もあってかほとんどの方がCDNでscriptに記述しています。
手軽にajaxを使ってデータを出し入れできるので、新しいライブラリが出てくる中でもまだまだ第一線で活躍しています。個人的な考え
になりますが、ライブラリをいちいち参照しているなら自前でライブラリを持っているfetchと交代したほうがいいのかなと思い、試しに
fetchやaxiosの三つ巴で速度を軽く計測していたら三つともそこまで変わらなかったです。意外・・・。
むしろレイアウトができるまでならfetchの方が遅かったくらいなのでしばらく参りましたしか言えませんでした。という訳でフロント開
発時にはまだまだお世話になることになりそうです。
コードのリファクタリングも進んできたのでそろそろjqueryのバージョンを現行バージョンに合わせようかと思いjquery3とjquery2の違い
を色々ググってみました。すると気になるトピックがありました。どうやら、jquery3に移行した場合は今まで使っていた
success/error/cpmpleteが使えなくなり、代替えとしてdone/fail/alwayまたはpromiseを含んだthen/catchメソッドを使わないといけなくなるみたいです。
</pre>
<strong>perhaps deprecated</strong>
success: function(xml, textStatus, xhr) {
},
error: function(xhr, textStatus, error) {
}
<pre>
</pre>
<strong>from now on</strong>
<pre><span class="p">.</span><span class="nx">done</span><span class="p">((</span><span class="nx">data</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">jqXHR</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">fail</span><span class="p">((</span><span class="nx">jqXHR</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">errorThrown</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="p">})</span>
<span class="p">.</span><span class="nx">always</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="p">});</span></pre>
<pre>
linkBreaking change: Special-case Deferred methods removed from jQuery.ajax
The jqXHR object returned from jQuery.ajax() is a jQuery Deferred and has historically had three extra methods with names matching the arguments object of success, error, and complete. This often confused people who did not realize that the returned object should be treated like a Deferred. As of jQuery 3.0 these methods have been removed. As replacements, use the Deferred standard methods of done, fail, and always, or use the new then and catch methods for Promises/A+ compliance.
Note that this does not have any impact at all on the ajax callbacks of the same name passed through the options object, which continue to exist and are not deprecated. This only affects the jqXHR methods.
success/errorももう5年前くらいの書式なのでそろそろみなさんこの書き方にしましょうねという無言の圧力に感じますがどうなんでしょ
うか。こっちの書き方のほうがシンプルで視覚的に分かりやすいので廃止になってほしくないのですが・・・。
これだけ推したにも関わらず速度やサーバーにかける負荷がそこまで大きくないなら現行のバージョン2でもいいのではと思ってしまいました。
いずれにしろ「ajax」をこれからも使おうとする場合は細かいアップデートに順応していく必要があると感じました。
著者:asaba
【php】データをキャッシュしてサーバーからのアクセス時間を軽減する方法
ページ読み込みやレイアウト崩れが目立つ場合はjavaScriptコードの見直しやcssの圧縮など幾つか対策を取る必要がありますが、これ以外
にも速度改善の方法の一つにブラウザキャッシュという方法があります。
通常は画像やテキストを取得すためにサーバーにアクセスする必要があるのですが、キャッシュでpcに保存しておくことでサーバー
にアクセスする時間を削減することができ、ページ読み込みの速度の向上につなげることが出来ます。キャッシュが有効期限の間は、
何度ページを表示してもサーバーまで取りに行きません。
この特性を利用することで、画像やテキストを多く抱える大規模なアプリでも大幅にラグタイムをシェイプアップすることができそうです。
ブラウザキャッシュの方法ですが、.htaccessというファイルに以下のように記述してくだけで、至ってシンプルです。
IfModule mod_headers.c IfModule mod_expires.c ExpiresByType text/css "access plus 60 days" ExpiresByType image/gif "access plus 60 days" ExpiresByType image/png "access plus 60 days" ExpiresByType image/jpeg "access plus 60 days" ExpiresByType image/svg+xml "access plus 60 days" </IfModule> </IfModule>
自分はphpを少し触った経験があるので（ほんの少しです）あのファイルかと見当できたのですが、そうでない方はなにこのファイルって
思うかもしれないですが、このファイルはwebサーバーのカスタマイズに必要で規約を書いていくことで自分好みのカスタマイズをした
い！という時に使われると思っていてください。
特徴が無いベーシックなサイトを作る時はそこまで使わない・・・かもしれないです。
著者:asaba
【javaScript】setTimeoutを使ってレイアウト回数を制限する方法
今回はスクロール時の負荷を軽減させる方法について紹介します。
javascriptにおけるスクロール動作はonScrollで監視することができるのですが、スクロール自体はマウスホイールを動かしている時は
処理を制限することはできません。そのためマウスホイールを一回転させただけでスコープ内の処理全般を一から始めてしまい
これが重なることによってwebページに負荷がかかりスクロール中に突然落ちたり固まってしまうことがあります。
特にリサイズや位置情報など計算を多用するアプリにとってはこれが結構痛く、内処理で途轍もない負担をかけてしまいます。
目では見取れないですがスクロール数を考えると相当負担かけてしまっているのが分かりますね・・・。
どうにかしてスクロール時のレイアウト回数を減らしたいと思い探し続けた結果、setTimeoutで○○秒後までは処理を行わないメソッド
を使い制御をする手段に行きつきました。
シンプルですが、処理が膨大でない限りはこの手順で約束された勝利の動作をしてくれるはずです。
var interval = 500;
var timer;</pre>
clearTimeout(timer);
timer = setTimeout(function(){
//ここに処理を書く
}
}, interval);
<pre>
著者:asaba
音声ファイルを簡単に変換できるツール【media.io】
昔からフリーで簡単に入手できて様々なアプリで利用されている音声ファイルですが、自作のアプリで音声ファイルを使って何かしたいと
きに、スマホに対応していない拡張子をわざわざソフトをインストールして変換させたりとなにかとめんどくさいイメージですが
media.ioというツールを使ってみて使用感良さげだったので紹介したいと思います。
※media.ioでググれば一番上に出てきます。
ちなみに日本語版もちゃんとあるので英語なにそれ分からないという人にも優しい仕様です！
トップページを見てみると、左側に小さなダイアログがあるのですが、ファイルの追加ボタンを押して変換したい音声ファイルをアップロードします。
変換したい拡張子一覧がチェックボックスからどどっと出てくるので目的に合った拡張子を選択して変換ボタンを押してください。
数十秒待って変換成功のダイアログが出れば正常に変換できたことになります。
いかがでしたでしょうか。フリーソフトでも品質は変わらないですが、インストール時に変なソフトも一緒にダウンロードしてしまう
のが怖いので自分はこっちのほうが安心して使うことができると思いました。
uiも綺麗にリニューアルしているので、ごちゃごちゃしていて何をいじっていいか分からない不安感がないのもポイントです。
著者:asaba
デジタルツインの勉強会に参加してきました。
浜松市勤労会館でデジタルツイン戦略の勉強会に参加してきました。
デジタルツインとは、ドイツの電子機器会社シーメンス社によって開発されたデザイン・設計・製造・サービス各プロセスの情報を収集
し、集めたデータで作った仮想のオブジェクトとしてシミュレーションをすることで品質の向上と工程の効率化を計るシステムのことです。
本場ドイツでは、各従業員から製造を担当するロボットまで情報を共有させて国内生産量を右肩上がりに実績を挙げており、日本でも
日産がシーメンスのソフトウェアを導入し既に施行しています。
ですが全ての企業に対して適応可能というわけではなく、例えば今回の場合中小企業や零細企業はどうやってこのノウハウを取り込めばい
いかなどの課題もちらほら見受けられました。全てを取り込むのではなく、企業の方針や製造している商品に合ったソフトのみを導入して
プロセスを切り分けていくことも大事なのかなと感じました。また、堅牢なプラットフォーム（方針の定まった生産工程）を事前に作って
おかないと後々の想定していない計画変更により一貫性が潰えるので、簡単に導入できるという訳ではなさそうな感じでした。
自動車の需要の比率が年々増えていく今世に対して効率化が求められている現代社会では、これらのシステムをいかに早く従業員に浸透さ
せていくかが品質向上のヒントになりそうですね。自分が今いるプログラミング・システム開発の業界においても応用すべき書物は沢山
ありそうです。これからも耳にすると思うので常時アンテナを張り巡らせておきます。
著者:asaba
【react】cssでプロパティにハイフンを付けるとエラーになる
reactでのcssの扱い方が少し雑になっていたのでここらで少し復習します・・・。今回はtips of tipsといってもいいくらい小さなこと
ですががっかりしないでくださいまし。
タイトルの通りreactでcssをいじっていたのですが、text-alignを追加しようとしたらcan,t resolve text-alignでエラーを受けました。
通常htmlに書くcssってハイフンって付くよな？と思い上書き保存してもう一回ビルドするもまたも同じエラー・・・。
reactで書く時はなんかの作法があるのかな？と思いながらも試しにtextAlignで書いてみたらなんとビルド成功。なん・・・だと・・・。
もしかしたらハイフンが付くプロパティは全て抜いて書き出す必要があるのかもしれませんね。
これまたなかなか載っていないのでここでこっそり載せておきます。同じ悩みでいらいらしている人の役に立ちますように・・・。
ダメな例↓
</pre>
newsText:{
text-align:"center",
}
<pre>
良い例↓
newsText:{
textAlign:"center",
}
</pre>
<pre>
↓
著者:asaba
【cordova-react】ページ読み込み速度改善の備忘録
以前からアプリの速度改善に取り組んでいるのですが、先人の知恵もあってページ起動時間がかなり短くなりました。
欲をかいてあと一秒早くしたいなーと思いながらgoogleでコードチューニングのことを調べていると、日本ラドウェア株式会社さんの記事が気になったので読んでみました。
すると、アプリのページ表示に3秒以上費やしてしまうと、ユーザーはストレスを感じWebサイトへのアクセスを取りやめてしまうという
興味をそそるような情報を発見。
今のアプリは起動迄3秒～4秒でアプリとしては十分な速度だったのですが、ダメ元で更に速度を改善できないかなと思い
有用な情報を探していたのですが、ここのサイトでloadable-componentsというライブラリを見つけました。
loadable-componentsは、code-splittingのように必要なページだけを読み込むことで読み込み時間の短縮が見込まれる期待を持っているライブラリです。
何も手をつけていないデフォルトの状態では、読み込むためのファイルはバンドルによって一つのファイルになっているのでこれを一気に
読んでいるのが原因で遅くなるのではと考えました。
試しに公式のコードを真似てアプリに加えてみました。すると、syntax error importで怒られてしまいました。
スタックオーバーフローをくまなく見ると、どうやらwebPackにloadable-componentsを動かす環境が整っていないために
起きるエラーみたいです。という訳でcreate-react-Appで立ち上げないといけないのですが、一から環境を変えてしまう訳にはいかない
ので、別の機会に自分でwebPackの設定をして動かせるように努めたいと思います。
一応サンプルだけ載せておきます。役にたつか分からないですが、公式が割とごちゃごちゃしているので載せておきます。
<span style="color: #666699;">routes.js</span>
import loadable from '@loadable/component'
//分割したいファイルを記述
export const Detail = loadable(() = import('./detail'))
<span style="color: #666699;">app.js
</span>import React, { Component } from 'react';
import Route from 'react-router-dom/Route';
import HashRouter from 'react-router-dom/HashRouter';
import Switch from 'react-router-dom/Switch';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Detail from './detail';
import * as routes from 'routes'
class Root extends Component {
render() {
return(
<MuiThemeProvider>
<HashRouter>
<Switch>
<Route exact path="/detail/:id" component={routes.Detail} />
</Switch>
</HashRouter>
</MuiThemeProvider>
);
}
}
著者:asaba
【CSS】CSSMiniferでCSSを圧縮してアプリの負荷を軽減してみる
一つのファイルにCSSを大量に書くと、当然そのページは読み込みが遅くなり、UIとかも不安定な状態で表示されます。
自分の今修正しているアプリも、漏れなくその多量のCSSの影響を受けております。今更外部ファイルに書くわけにはいかないし
どうしましょうかと模索していた時にこのCSSMiniferを見つけました。
CSSMiniferって何ですかというと、CSSを圧縮して数行にまとめてくれる便利ツールです。CSSを圧縮することで、ページの読み込み
速度を改善させることができます。数百行にわたるCSSでも、このツールにかかれば5～6行で完結させることができます。
使い方はシンプルで、圧縮したいコードを左側のテキスト欄にコピペした後にminifyをするボタンを押すだけ。こんな感じに
仕上がります。（といっても詰め込みすぎて一見すると何書いてあるかわからない。）
後はこれをファイルにコピペするだけ。他にも色々なCSSコンプレッサーがありますが、CSSMinifyが一番ごちゃごちゃしていなくて
使いやすかったです。
というか他のツールだと微妙に記述が改変されていたりする（ダブルクォーテーションが消されていたりする）ので、最初からこいつ選んでおけばよかったんじゃないか・・・？と思いました。
webアプリの速度改善の場合大抵はJQueryやスクリプト読み込みの順番を修正するのが王道なのですが、CSSをたくさん書いた場合は
こっちに目を付けてみるのも正解ですね。正しく使えばアプリのリファクタリングに貢献してくれるのではと思います。