著者アーカイブ asaba

asaba 著者:asaba

【sourceTree】プルをすると認証エラーになるエラーの解決法

macでソースツリーとbacklogを連携させるときに少しハマりました。コルドバアプリをビルドしようとしたら反映されていなかったので

プルを試みたのですが、下のようなエラーにずっと攻撃されていました。

 


fatal: Authentication failed for 'https://backlog/asaba/'
remote: Authorization required

キーチェーンを何回も削除作成したりソースツリーを再起動したりと応急処置をしましたが全く動かず。むしろキーチェーンを

余分に作ったのが原因でxcodeに怒られたりと凄惨な目にあいました。

とりあえずgithubがホスト元のアカウントを消してソースツリーを再起動してみることに。すると、いままでなかったようなダイアログ

がでてきました。ユーザーidとパスワードを入れろと書いてあるのでもしかしたらbacklogのアカウントを入れ直せば認証できるのかと

希望をもってログインし直してプルしたら見事上記のエラーを解決させることができました。あー良かったと思っていたらなにやら

別のダイアログが・・・。password required。またパスワード!?ということでbacklogと同じパスワードを打ち込みました。

このダイアログはセキュリティ強化のため二回同じパスワードを打ち込まないと通してくれないらしく

(同じでいいならあんまり意味がないような気がする)めんどうですが、githubの場合はアクセストークンを要求してくるのでまあまだ

優しいかなという所感でした。

 

何がいけなかったか振り返っている最中ですが恐らくリポジトリがあるbacklogで登録したid・パスワードに対しなんか無駄に一つ

アカウントを登録していたのでそれがいけなかったのかなと感じています。

git系のエラーはほんとに心臓と胃に悪いので極力出くわさないようにしたいです。

 

まとめ:Authentication failedに出くわした場合

 

①sourceTree->環境設定->高度な設定と進み、現行のユーザーを削除。

②ソースツリーを再起動

③冒頭出てくるダイアログにbacklogのユーザーidとパスワードを入力。ダメな場合でも通るので注意。

④プルしようとするとまたダイアログが出てくるのでさっき入力したパスワードをもう一回入力。

 

以上になります。

 

asaba 著者:asaba

【mapbox】mapboxをcssで修飾するときに気を付けること

mapboxはアプリケーション向けに開発された地図ライブラリです。地図ライブラリといえばgoogleMapやOpenStreetMapがありま

すがmapboxは高速かつ比較的自由度が高くコードで自分の好きなようにカスタマイズすることができるという点が評価され様々なアプリ

に使われています。

便利なライブラリですが、各osにつき若干期待された動作と違う動きをするみたいです。

例えばandroidで大丈夫だったはずのmapboxがiosで開いた場合ページを画面いっぱいに出してページスクロールをすると、ページごとス

ワイプしてしまいます。目的の場所を探している最中も常にページが監視され続けるのでこのままだと非常に使いにくいです。

このままでは煩わしいので一から疑わしいコードを索敵することに・・・すると意外とすぐに原因を見つけ出すことができました。

どうやら、mapboxを装飾する時に定義したcssに問題があったみたいで、cordovaのようなハイブリッドアプリとmapboxを組み合わせる

場合はcssでpotision:”absolute”と定義しなければ正しく機能してくれないみたいです。

なんだよそんなことかと思いつつもcssの基本を忘れかけていたので手放しには喜べませんでした。

 

</pre>
※iosでマップ固定するプロパティ

potision:"absolute,"
<pre>

 

次の課題はページの一部に表示されたマップをスワイプ検知を回避して固定するところまでです。ここをabsoluteするとページ自体が

マップより下にいかなくなるのでより捻って対策を模索する必要がありそうですね・・・。

 

 

 

asaba 著者:asaba

【eslint】eslintで警告を自動修正するオプション

先週、同僚さんからeslintで間違った警告を修正する方法に–fixというeslintのオプションをつけて修正する方法を知りました。

eslintはバグの温床となりうるコーディングや書き方がレガシーなコードを検知すると状況に応じた警告を吐きまくります。

ぽちぽち潰すのも正解ですが、中にはそうでない警告も存在します。eslintの警告自体も頻繁に更新されている訳でないのでそんな中で

膨大なコードの場合は何もオプションを付けずに修正するとなると骨が折れます。

 

冒頭で紹介した–fixオプションは、短い記述でエラーを指摘する警告が間違っている場合に順番に修正してくれるのでこれを上手く使う

ことができればムダな警告の修正をすることなくコーディング時間をせつやくすることができます。

こんな感じでpackage.jsonのコマンドに追加します。これで設定は完了です。

 

<pre>"scripts": {
   "test": "echo \"Error: hoge\" && exit 1",
<span class="gd">   "lint": "eslint src/script.js"
</span><span class="gi">   "lint": "eslint src/script.js --fix"
</span>  },</pre>

 

このように万能な子ですが、全ての警告を修正できるという訳ではないみたいです。

では警告対象ってどうやって確認するかというと、まず公式に飛びます。ずらっとeslintが並んでいる中でレ点の隣にペンチのマーク

がついているものが修正可能eslintになります。

 

 

eslintは使ったことがあるのですが何のエラーがなんの理由で出ているか読み飛ばしていたので今回の–fixはエラーの中身を知るいい機会になりました。

asaba 著者:asaba

【javascript】ページ読み込みを加速させるツール・LazyLoad

LazyLoadとは、scriptタグに定義することでグリッドなどで画像を大量に含んでいるページをその画像が位置している場所までスクロール

したところで初めて読み込むよう制御することができる便利なライブラリです。

 

画像を多用するサイトでは、よくjavascriptやcssを圧縮して読み込ませていますがそれでもまだ遅い若しくは画像が出てこないなど

難儀な問題が多く降りかかってきます。しかも数十枚の画像を一気に読み込むことでページがフリーズして動かなくなったりして

最悪そのページから離脱してしまうユーザーも少なからず存在します。サーバーにとっても多量の画像を送ることは多大な負担につながる

のでこのままではサーバーもユーザーも誰も得をしない宙ぶらりんな状態になってしまいますね。

LazyLoadライブラリは、ページスクロールをしてレイアウト上の範囲のみ画像を送るように命令することで余計な画像を読み込まずに

容量を確保することができるので上手く使うことができればページ速度の改善に大きく貢献してくれそうです。

自分は実装する前はnpmから取ってくるのかなとか実装するの大変そうとかめんどくさいイメージが纏わりついていましたが

とても簡単だったのでさくっと実装することができました。

とりあえずgithubからライブラリを入手。緑色のボタンを押してクローンをしてください。

 

jquery_lazyload-master.zipというファイルがダウンロードできたと思います。この中にあるjquery_lazyload-masterというフォルダの中に

lazyload.jsとlazyload.min.jsというファイルが入っていると思いますがそこはどっちを使ってもいいみたいです。

自分は無難にlazyload.jsファイルにしました。JQueryと一緒にheadタグの間に埋め込みます。JQueryはバージョン2以上が望ましいです。

 

<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"./lazyload.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>

 

これでLazyLoadを使うことができます。コード量が少ないので実装も楽々できました。とるあえずjavascriptでは実装することはできたの

ですがこれをreactと組み合わせたらもっと負担減らせるのにな~と考えております。

そもそもreactではほとんどのオブジェクトをpropとstateで扱うので出番はあるのかなと思っていますが実装することができれば

ネイティブにも遅れをとらない軽量アプリの開発できるのでぜひとも取り込む技術は取得しておきたいものです。

asaba 著者:asaba

【コマンドプロンプト】mdコマンドでの使い方

コマンドプロンプトにおいてディレクトリを作るコマンドといえばmkdirコマンドですが、これ以外にも[md]というコマンドを使って

同じ動き。つまりフォルダを作ることができることをつい最近知りました。

名称は違うけどそれぞれ何が出来るかというと、両方とも特にこれといって尖った違いはありません。

mkdirだと長いのでmdにしましょうという流れでエイリアスとして使われるようになったのがきっかけで普及したというただそれだけの

相違みたいですね。

使い方もmkdirとなーんにも変わりません。どこか適当なフォルダに移動した後に下記のように記述してフォルダを作ることができます。

</pre>
※空のフォルダが作られます。

<strong>mkdir</strong>

C:\Users\user\Documents\appFolder> mkdir temp

&nbsp;

<strong>md</strong>

C:\Users\user\Documents\appFolder> md temp
<pre>

 

そのほかの操作もmkdirを置き換えるだけなので、コマンド操作でmkdirを書くことなく開発効率を向上させることができます。

ちなみにこれpcで何回もコマンド操作しているのにも関わらず知りませんでした。ガラパゴスの境地だったことを反省します。

asaba 著者:asaba

【windows10】windows10シャットダウン時にヒヤッとした話

自宅のpcで作業を終えてシャットダウンをしようとしました。すると

「他のユーザーがこのPCを使っています。このままシャットダウンすると、そのユーザーの作業内容が保存されない可能性があります。」

 

誰かが自分のpc使ってる!?パスワードとか外に漏らしたことないけどどこかで個人情報流れちゃったのかなどうしよう・・・と

軽くパニックに陥りました。chromeのアカウントを別のpcで使ったことはあるけどそしたらgoogleからメールが来るはずだよね等

根拠がない仮説を唱え始めてしばらく時間を置いて冷静になって考えてみました。そういえば昨日プログラムのアップデートしたよね・・・?

ここでセキュリティソフトの仕様が変わったのかと思ったけどそうじゃない。セキュリティだったら通知を送らないなんてことはない。

 

これだけ考察した結果結局更新したwindowsの仕様という結末になりました。具体的にいうと別のアカウントで常時サインイン状態

になっていることが起因です。

1台のpcに複数のアカウントがある方向けの仕様なのでしょうか。(アカウント作った覚えないけどな~。。)

別のアカウントでソフトをアップデートしている間に本アカウントで作業をする必要のあるかたには合った仕様だとは思います。

ですが一つのアカウントしか使っていない人にとってはなんぞや!!!!って驚かれてもおかしくないと思います。なにせ

自分しか使っていないのですからね・・・。

 

以下対処法です。↓

①スタートボタンから設定画面を開く

 

②アカウントを開く

 

 

③左メニューバーのサインインオプションを開く

 

 

④下に行ってプライバシーのトグルをオフにする。

 

 

⑤更新または再起動の後にサインイン情報を使ってデバイスのセットアップを自動的に完了します。トグルをオフにする。

 

以上です。次のアップデート時には心臓に悪くないものをお願いしたいです。

asaba 著者: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 successerror, 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 donefail, 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 著者: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 著者:asaba

【javaScript】setTimeoutを使ってレイアウト回数を制限する方法

今回はスクロール時の負荷を軽減させる方法について紹介します。

javascriptにおけるスクロール動作はonScrollで監視することができるのですが、スクロール自体はマウスホイールを動かしている時は

処理を制限することはできません。そのためマウスホイールを一回転させただけでスコープ内の処理全般を一から始めてしまい

これが重なることによってwebページに負荷がかかりスクロール中に突然落ちたり固まってしまうことがあります。

特にリサイズや位置情報など計算を多用するアプリにとってはこれが結構痛く、内処理で途轍もない負担をかけてしまいます。

目では見取れないですがスクロール数を考えると相当負担かけてしまっているのが分かりますね・・・。

どうにかしてスクロール時のレイアウト回数を減らしたいと思い探し続けた結果、setTimeoutで○○秒後までは処理を行わないメソッド

を使い制御をする手段に行きつきました。

シンプルですが、処理が膨大でない限りはこの手順で約束された勝利の動作をしてくれるはずです。


var interval = 500;
var timer;</pre>
clearTimeout(timer);
timer = setTimeout(function(){
//ここに処理を書く
}

}, interval);
<pre>

 

 

asaba 著者:asaba

音声ファイルを簡単に変換できるツール【media.io】

昔からフリーで簡単に入手できて様々なアプリで利用されている音声ファイルですが、自作のアプリで音声ファイルを使って何かしたいと

きに、スマホに対応していない拡張子をわざわざソフトをインストールして変換させたりとなにかとめんどくさいイメージですが

media.ioというツールを使ってみて使用感良さげだったので紹介したいと思います。

※media.ioでググれば一番上に出てきます。

ちなみに日本語版もちゃんとあるので英語なにそれ分からないという人にも優しい仕様です!

トップページを見てみると、左側に小さなダイアログがあるのですが、ファイルの追加ボタンを押して変換したい音声ファイルをアップロードします。

変換したい拡張子一覧がチェックボックスからどどっと出てくるので目的に合った拡張子を選択して変換ボタンを押してください。

数十秒待って変換成功のダイアログが出れば正常に変換できたことになります。

いかがでしたでしょうか。フリーソフトでも品質は変わらないですが、インストール時に変なソフトも一緒にダウンロードしてしまう

のが怖いので自分はこっちのほうが安心して使うことができると思いました。

uiも綺麗にリニューアルしているので、ごちゃごちゃしていて何をいじっていいか分からない不安感がないのもポイントです。