カテゴリーアーカイブ 未分類

takahashi 著者:takahashi

SourceTreeからGitHubへの接続ができないときに確認したいこと

久々にSourceTreeからGitHubに接続しようとしたところ…

GitHubのダイアログが出てきたので”うん?”と思いながらもログイン情報を入力してみるのですが、何度試してもダイアログが表示されます。
最初はIDかパスワードが間違っているのだと思ったのですが、確認して正しい情報を入れてもログインすることができません。

これは何かおかしい…と思ってよく見たら、SourceTreeのログにエラーメッセージが出ていました。

調べたところこんな記事が

“Fatal: AggregateException encountered” when prompting for username – GitHub

どうやら、GitHubで古いバージョンのTLSが無効となったようなのですが、Git for Windowsの旧バージョンではその変更に対応しておらず、それが原因でログインできない状況になっていたようです。

現行の最新版で既に対策済みとのことだったので、Git for Windowsの最新版をインストールしました。

git update-git-for-windows

ところがこれを実行して最新版になったところまでは確認したものの、エラーが解消されず。

しかし、SorceTree以外のツールやコマンドラインで実行すると最初と同様のダイヤログは表示されるものの、正常にログインできました。

まてよと思い、SourceTreeのGitの部分を確認したところ…

ビルトイン版の古いGitが使われていました/(^o^)\
そりゃあどれだけ更新してもダメなわけですね…

ということで、System側のGitに切り替えて再度ログインしてみたところ、無事アクセスできました。

ということでSourceTreeからGitHubが使えなくなった…という方は一度確認してみてください。

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

bootstrap-material-designを使ったビューをLaravelでビルドしようとするとエラーが発生する件

Bootstrapをマテリアルデザインに対応させることができる”bootstrap-material-design”というnpmパッケージがあります。

Material Design for Bootstrap

リファレンスをざっと見た感じではかなり充実していそうな内容だったので、早速Laravelに組み込んでみました。
組み込みの際に参考にしたページはこちらです。

Qiitaの様なサービス作成中 ローカル環境構築 連載(1) – Qiita

上記の記事を参考に bootstrap-material-design をインストールし、
resources/assets/js/bootstrap.js
resources/assets/sass/app.scss
resources/assets/js/app.js
も追加したところ…

$ yarn run dev
yarn run v1.15.2
$ npm run development
npm WARN lifecycle The node binary used for scripts is /var/folders/k6/fr1m13p9563g9jb3_n6rtjz80000gn/T/yarn--1556960881810-0.8874045889856248/node but npm is using /usr/local/Cellar/node/12.1.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

...

98% after emitting SizeLimitsPlugin                                           


ERROR  Failed to compile with 2 errors                                                                                                                               18:08:14


error  in ./resources/sass/app.scss


Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):


    @include form-validation-state("valid", $label-color);
   ^
      Missing argument $icon.
    ╷
159 │     @include form-validation-state("valid", $label-color);
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 159:5            form-validation-state()
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 159:5            bmd-form-color()
  node_modules/bootstrap-material-design/scss/_custom-forms.scss 3:3              @import
  node_modules/bootstrap-material-design/scss/_core.scss 11:9                     @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  stdin 10:9                                                                      root stylesheet
      
...

まだ何も触っていないのになんか失敗した…

ということでいろいろ調べたらこちらのサイトを発見。

bootstrap-material-designを使った時のコンパイルエラー – Qiita

どうやらbootstrapのバージョンが新しいものだと、このエラーが発生するようです。

記事通りそのまま対策を行い、再度 yarn run dev を実行。

ところが…

...
ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):


  .is-focused,
^
      Top-level selectors may not contain the parent selector "&".
    ╷
153 │ ┌   .is-focused,
154 │ │   // may or may not be a form-group or bmd-form-group
155 │ │   &.is-focused {
    │ └───────────────^
    ╵
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 153:3            bmd-form-color()
  node_modules/bootstrap-material-design/scss/_forms.scss 75:1                    @import
  node_modules/bootstrap-material-design/scss/_core.scss 14:9                     @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  stdin 10:9                                                                      root stylesheet
...

やはりだめでした…

Base-level rules cannot contain the parent-selector-referencing character ‘&’. – GitHub

“node-sass”: “4.7.2”から “node-sass”: “4.9.0”に移動したときにエラーが発生したので、緊急に作業中のプロジェクトが必要な場合はdevDependenciesで以前のバージョンを設定できます。 package.jsonに入って作業を続けます。

今度はsassのバージョンによる問題のようです。

いやこれはややこしすぎる…

ちょっとbootstrap-material-design使うのやめようかなと思ってます(;´∀`)

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

デジタルツインの勉強会に参加してきました。

浜松市勤労会館でデジタルツイン戦略の勉強会に参加してきました。

 

デジタルツインとは、ドイツの電子機器会社シーメンス社によって開発されたデザイン・設計・製造・サービス各プロセスの情報を収集

し、集めたデータで作った仮想のオブジェクトとしてシミュレーションをすることで品質の向上と工程の効率化を計るシステムのことです。

本場ドイツでは、各従業員から製造を担当するロボットまで情報を共有させて国内生産量を右肩上がりに実績を挙げており、日本でも

日産がシーメンスのソフトウェアを導入し既に施行しています。

 

ですが全ての企業に対して適応可能というわけではなく、例えば今回の場合中小企業や零細企業はどうやってこのノウハウを取り込めばい

いかなどの課題もちらほら見受けられました。全てを取り込むのではなく、企業の方針や製造している商品に合ったソフトのみを導入して

プロセスを切り分けていくことも大事なのかなと感じました。また、堅牢なプラットフォーム(方針の定まった生産工程)を事前に作って

おかないと後々の想定していない計画変更により一貫性が潰えるので、簡単に導入できるという訳ではなさそうな感じでした。

自動車の需要の比率が年々増えていく今世に対して効率化が求められている現代社会では、これらのシステムをいかに早く従業員に浸透さ

せていくかが品質向上のヒントになりそうですね。自分が今いるプログラミング・システム開発の業界においても応用すべき書物は沢山

ありそうです。これからも耳にすると思うので常時アンテナを張り巡らせておきます。

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

Windows10のスマホ連携機能を試してみる。

Windows 10 October 2018 Updateから導入されたスマートフォン連携アプリ、”スマホ同期”の話。

MicrosoftはWindows Phoneの開発終了に伴い、他社製のメジャーなモバイルOSとの連携を強化してくことを表明していますが、その方向性を示すものの一つとしてWindowsに追加された形となっています。

アプリを起動すると

こんな画面が。
進めていくと

SMSを送信するためにスマートフォンの電話番号の入力を求められるので、入力して送信をクリックします。

するとSMSが届き、アプリのインストールを促されます。

これをインストールして、PCと同じMSアカウントでログインすると、SMSの同期とスマートフォンに保存されている写真の一部をPCから呼び出せるという代物なのですが…

Oh…

Android 6.0以下だと機能が制限されてしまうようです。
それでも、PCからWindows10のedgeに対して閲覧中のページを送る機能は利用できます。

そんなこともあり、スマホの乗り換えを考え始めた今日この頃です…(汗

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

最早HTMLのコーディングは不要に!?絵を描くだけでDOMを生成してくれるホームページ作成ツール”teleportHQ”

先日Twitterを見ていたらこんな投稿が。

何これ凄い…
ホワイトボードに書いた要素がそのままコード上でリアルタイムに再現されています。

かなりラフなワイヤーフレームでも、それぞれどの種類のDOMかを瞬時に判断できるようです。

ホワイトボードだけでなく、こんな風にペーパーに書かれていても認識できるようですね。

いよいよ誰でも簡単にWebサイトを作成できる時代がやってくるかもしれません。

興味のある方は是非公式サイトをチェックしてみてください。

teleportHQ


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

ハインリッヒの法則とコード量とバグの量

 ハインリッヒの法則とは次の様な経験則です。

ハインリッヒの法則は、労働災害における経験則の一つである。1つの重大事故の背後には29の軽微な事故があり、その背景には300の異常が存在するというもの。

 要は極低確率で危険な事態に陥ることがあるならばいずれは致命的な事態が起きる、というものです。
 コーディングにおけるコード量とバグの量の関係にも似たことが言えます。稀にバグが起きるような記述を大量に行うならばいずれバグが起きる、ということです。この問題に対処する方策は主に二つ。一つは全くバグの起きない記述を行うことです。バグの起きる確率が0%ならばいくら重ねても問題ありません。二つ目は記述の量を少なくする方法です。僅かなバグの発生率はわずかなままにとどまり、バグが起きることは滅多にありません。
 コードを関数やクラスなどの部品にして組み合わせていくプログラミング手法(構造化プログラミングの系譜)はこの両方を満たすための手法として有効です。小さな部品ならばバグがないことを保証することができるほどのテストを行うことが可能であり、その様な部品を呼ぶことは全くバグの起きない記述を行うことです。部品を繰り返し呼ぶならば全体のコード量は繰り返されたコピペの改変コードの様な雑多なものに比べて格段に少なくなります。

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

【javaScript fetch】fetchApiで素のデータを送っても何も返ってこない罠にはまったお話

fetchApiは、通信が成功した際にはpromise型で値を返します。が、スコープで囲んで変数に入れて飛ばすと、サーバーに要求した

値が返ってこない事態にハマってしまいました。ajaxだとdata:{“key”,value}みたいにまとめてからプロパティに入れて取ってくることが

できるのですがこっちでは仕様のせいか受け取ってくれません。

調べてみると、そのままbodyに入れるのではなくformDataというfetchから新しく使えるようになったApiを使って送り込むみたいです。

ajaxではdocumentというxmlを取り扱うことができるオブジェクトがあったのですが、こっちではそれが使えないのでこちらを代わりに

使ってくださいということだと思います。

fetchってもうリリースされてから数年経つのですが、国内の記事を探しても全然見つからないのでみんなまだajax使ってるのかなと

思ってしまいます。

ajaxと違いdomをいちいち掘削しないので、通信速度の向上は期待してもいいと思います。ですが、取ってきたxmlから各タグを取り出すメソッド

とかがめんどくさい感じでしたので、そこらが原因で手が出にくいのかなと思いました。前述の処理だけはjqueryに任せて通信だけ

fetchで賄うことができますが、試していないので速さの保証は実装してみないと分からないです。


var formData = new FormData() ;
var id = this.props.match.params.id;
var followMember = window.localStorage.getItem("member_no");
formData.append( "name", "asaba" ) ;
formData.append( "location", "shizuoka" );
formData.append( "gender", "male" );

var url = 'https://hottomotto';
fetch(url,
{ body: formData,
method: "POST",
})
//通常のレスポンスを返す
.then(function (response) {
return response.text();
})
.then(function(text) {
var xml = new DOMParser().parseFromString(text, "text/xml");
console.log(xml);
});


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

Atomを使っていてメニューバーが消えてしまったときの対処法

いつも通りにソースファイルを立ち上げて作業を始めようとしたのですが、何かの拍子でメニューバーがごっそり消えてしまいました。

メニューバーにはファイルを開いたり保存したりなど普段の作業に必須な項目が入っています。さすがにこのままでは気持ち悪いし

効率が落ちるので元に戻そうと決めたのですが、英語表記なのでわかりにくくかなり苦労してしまいました。

方法としましては、まず今回の目的であるメニューバーを手っ取り早く探すためにCtrl + Shift + pコマンドを押してモーダルを出します。

そこで、toggleと検索します。すると、下の画面のようになると思います。

この画面の一番下のWindow Toggle Menu Barという項目をクリックしてみましょう。すると、上からメニューバーがにゅっと出てくる

のが確認できると思います。

何もなければこれでいつも通りにメニューバーを使うことができます。余談ですが、ファイルを開くと、開いたファイルの一覧が

見ることができるバーも同じように復元しようとしたのですがこちらは元に戻りませんでした・・・。

厳密に言うと形だけは直ったのですが、ファイルの一覧が見れなくなってしまい非常に不便な思いをしています。こちらはツイッターやgit

などで情報収集して修正の目途が立てばまたアップしていきたいと思います。

 

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

【npm】cordovaでうまくcordova platforms add browserできない時の対処法

cordova platforms add browserでブラウザを追加しようとしたらAdding browser project…Project already exists! Delete and recreate

で返されてしまいました。あぁ既に追加したブラウザがあったのかと思いcordova platforms rm browserをしたのですが今度はそんなファイルないよ!とエラーを吐き続ける始末・・・。

platformsディレクトリを見ましたが、browserフォルダは存在しなかった。(存在してこのエラーが出るのが普通)ということは

何かの手違いでbrowserフォルダが存在していることになっている。似たようなファイルのplatformフォルダに追加していると思ったの

ですが探してみても該当フォルダはなし。ダメもとでキャッシュを全て消してからビルドしてみようと思いnpm cache verify –forceで

キャッシュを削除したあとにnpm installを実行。その後にさっきのcordova platforms add browserを実行。すると上手くいきました・・・!!

よく考えるとnpm installはただnode_moduleにパッケージをインストールしているだけですよね・・・・今回の事象とは関係ないのでは

と思いましたが、よく考えたらこちらでもパッケージを入れ直せとエラーがでていたので手間が省けました。

コルドバにおいてnpmのパッケージを新しく追加したいけどエラーが出て先に進めないという時はキャッシュを消してみると景色が

晴れてくるかもしれませんね。存在しないファイルも、見えないキャッシュ上で残っている場合があるのでプラットフォームの追加/削除

は計画的に実行するべきですね~。

 

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

npm install時に発生したエラーの対処法まとめ

現在進行形でエラーが発生しているので、対処法がまとめられたサイトを備忘録としてリストアップ。
タイトルにもある通り、パッケージをインストールするためのコマンド npm install を実行した際に発生するエラーや警告の対処についてです。

今回、参考にさせていただいたサイトはこちら。

npm|yarnで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled ‘error’ eventの解決方法。(2019/3/8更新) – Qiita
https://qiita.com/M-ISO/items/d693ac892549fc95c14c

npm installしたときに出てるやつ – helen’s blog
https://helen.hatenablog.com/entry/2016/05/22/003057

なお、私の遭遇したエラーは UNMET PEER DEPENDENCY で、必要なパッケージがインストールされてないと発生するものでした。
なので、エラー文に書かれている、必要なパッケージをインストールすればOKです。
が、そのパッケージのインストールでも依存関係があったりすると…非常に厄介です。
以前その状況に陥ったことがあり、その際は一つずつ依存関係を確認してインストールして…とやったので、なかなか大変でした。
場合によっては、結構な根気が必要かもしれません…。

上記で紹介した記事には、それ以外のエラーについての説明とその解決策もまとめられているので、困ったら是非こちらを確認してみてください。

また、場合によっては、一旦キャッシュを削除してパッケージを再インストールするという方法もよさそうです。
コマンドは下記のとおり。

// キャッシュの削除
npm cache clean

// パッケージの再インストール
rm -rf node_modules/
npm install

記事にも、結局ディレクトリ一旦消すほうが掃除になってよかったとあったので、とんでもなくごちゃごちゃになってしまった場合は上記を試してみるのも手かもしれませんね。

 

以上、npm install でパッケージをインストールする際に発生したエラーの対処法についてでした。
参考になれば幸いです。

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