結局 Google は中身で検索順位を決めてないってことがわかった日

数日前に 【お願い】過去、「クレジットカードの読みもの」に対してリンクを貼ったことがある方は、旧ドメインから新ドメインへの張替えをお願いします。 という記事を読んだんですね。

これ「クレジットカードの読みもの」というタイトルのブログの記事なんですけど、要約すると

1.独自ドメインにブログを移行した
2.アクセスが激減(←ちゃんと301リダイレクトはしてるらしいです)
3.その後様子をみて前よりマシにはなったけどアクセスは全部戻らず
4.読者に過去リンクの張替えをお願いした

ってカンジです。

もうこの時点で「えーっ、グーグルって良質なコンテンツを作ってりゃいいって話じゃなかったの!?」ってなりますよね。

だって、記事を移転したってことは記事は全く同じ。タイトルだって同じ。サーバーの速度もそこまで変化があるようには見えない。ってことは結局「被リンク」がいいやつが勝ち&価値!ってことなんじゃー、、、それって10年ほど前までSEOに効果的!だから相互リンクしよう!ってのと対して変わっていないってこと???うーーむ、、

ちなみに、このブログの作者さんも「新しいサイトはドメインパワーがないんでアクセスが増えてこない」つまり中身より被リンクが重要と考えているようですね。

じゃー、現実世界もバーチャルな世界も有力者のコネ(被リンク)が今だに重要ってことなのか、、せめてネットの世界の自由はこれ以上狭まってはほしくないんだけどな。。それにしても結局パンダアップデートってなんだったんだろう。実際被リンクをしぼった経験もあるのにあれって無駄だったってことなのかー。。

ところで、実際の検索結果ではどうなんだろうって考えてみると、たしかに最近グーグルの検索精度は落ちているという印象がつよいんですよね。最近特にです。


正直なところあまりにほしい情報が見つからないんでホントにたまに duckduckgo を使ったりもしますし、特に日本語コンテンツの制度が低いんで上位に表示される日本語コンテンツはスルーして英語のものからチェックしたりもしています。英語版はまだ使えるイメージです。

って考えると、言語的な要素がからんできてて、日本語っていう世界的にはマイナーなものの検索システムはまだまだ被リンクに頼った旧タイプのやりかたしかできないってことなんでしょうか。

まー、たしかに語順とか逆だし、例えばあえてカタカナを使ったりする微妙なニュアンスはまだまだコンピュータには判断が難しいのかも。AIの登場で劇的にネットが変わるかもって思ったけど、結局「いかに過去の最適化をするか」的なところだけでブームが終わっちゃった感があるのがとても残念です。グーグルはどうやら車の自動運転は昔ほど熱心じゃないみたいですしね。じゃ、お前が作れって言われたら手も足も出ないわけですけど。

それともこの前ダウンタウンの松本さんがゆってた「機械が賢くなりすぎてアホになった」(←車のシートに少し重い荷物をおいてたら人が座ってるってことにされて「シートベルトつけろこのやろ!アラーム」がなったって話です)ってことなんでしょうか??ってことはAIの過学習みたいな状態???

そういえば少し前に welq が記事を量産して問題になた事件がありましたね。検索エンジン対策のためだけの中身が定かではない記事をアウトソーシングつかって大量に作ったってやつ。

結局あれもグーグルがまだ進化しきれていない部分を人間がテクニックを使ってついてきたってことですよね。そう考えるとやっぱり検索エンジンというもの自体の精度を高くするのはいたちごっこで相当難しくて、もし実現しようとするなら昔の Yahoo Japan みたいに人の目で見てインデックス登録するみたいにしないとダメってことかもしれません。今のネット環境だと実際はそんなことできっこないですけどねー。

んー、ってことはもしブログ書くならやっぱりグーグルの隙をついていくべきなのかなー。そういうの得意じゃないんだけど。。

グーグル一強を阻止するためにduckduckgo、ロシアのyandex、中国の百度、韓国のnaverに頑張ってもらうしかないかもしれません。(国産検索エンジン誰か作って!!)



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

Googleマップの代替サービスが国から提供されていた件

いろんなサイト開発でもそうですけど、結構地図って使うことって多いじゃないですか。例えばお客さんの住所横に地図リンクを貼ったり、住所の下辺りにでも地図を埋め込んで表示させたり。

少し前までは JavaScript 開発者は地図使うってなったら、即グーグル・マップを使うって流れがありましたよね。っていうのも地図は綺麗で見やすいし、JavaScript の API をしっかり作ってくれてるし、なにより無料だったし。

でも、これも有名な話ですけど、少し前からグーグルは「んー、今まで無料だったけど、ある一定の制限をこえるとお金とるね(キラーン)」って感じでサービスの中身を変更してしまいましたよね。。もちろんそれが「サービス」っていうものなんで有料が基本なんですけど、一日に25,000回以上表示でお金を払うってのはちょっと有名な個人サイトでも行っちゃう回数だから、結構僕のクライアントさんたちも敬遠してる部分があるみたいです。

まー、正直のとこ追加の1,000回ごとに 0.50米ドル(←50円くらい)なんでそこまで高額の出費じゃないんですけど、やっぱ経費節減が基本のこの日本経済下では少ないとはいえ青天井の支払いが存在してる時点で大きなマイナス要素のようです。

で、他のサービス探してみた

そこで、ちょうど個人的サイトの開発で地図が必要だったんで、今後のためにグーグルマップの代替になるようなサービスを探してみることにしたわけです。
できれば、ドキュメントが多くて、APIも豊富で、あと無料で。

まず、一番に思い浮かんだのがオープンソースが流行ったころに知った「OpenStreetMap(オープン・ストリート・マップ)」というサービス。副題で「自由な地図をみんなの手で」と言ってるだけあって Wikipedia のように誰でも自由に編集ができる地図です。これはいいぞ!ってその時は思ったんです。

でも、アイデアはとてもとてもいいので僕も貢献したいとも思うんですけど、正直まだ中身がスカスカでグーグルマップと比べると悲しいかな情報量、使いやすさも雲泥の差があるといわざるを得ませんでした。JavaScript の APIも用意してくれてるし、とてもいいんですけど、そこが一番大事だからなー。。なんなら近くの有名なため池がごっそり地図には描かれてなかったりしてるのをみて OpenStreetMap は今後に期待!ってことで今回はパスすることにしました。

んー、あんまり地図ってみんな自分で編集しようとはしないんでしょうかね??

だから、あきらめて他を探してみた

ってことで、また別のサービスを探すことに。で、ネットサーフィン(←死語かな ^^) してみた結果、どうやら国土地理院という国交省の機関が地図データを提供してくれてるということは初めて知りました。国土地理タイルっていう名前みたいです。「えっ、なんかの間違いじゃ!?」って最初は思いましたね。

そこで急いでリンク先を調べてみるとさすが国の機関だけあって地図の情報もグーグルマップまでとはいかないですけど、最低限のデータは入ってますし、そこまでアクセスも遅くないんで、これは使える!と思いましたね。

実際の地図サンプル

そこで、次はどんな感じで使えばいいかドキュメントを探してみました。

んー、GitHub にサンプルを用意してくれているものの、正直なとこ複雑なサンプルだけしか入ってなくて、グーグルマップみたいな丁寧なドキュメントはないようだ。。。

実際のサンプルはいいできなのになー、どうしたもんかねー。。。

別の JS ライブラリで国土地理タイルを使う

そこで、またいろいろとググってみる(←死語その2 ^^)とどうやら Leaflet という JSライブラリがあってこれのオプションで国土地理タイルを使うようにすれば簡単に地図を操作したりできるみたいでした。(後から知ったんですけど、さっきの地図サンプルでも Leaflet 使ってるみたいですね)

で、実際にコードを書いてみるとあんがいすんなり地図が表示できます。さすが Leaflet。人気のライブラリだそうです。

コードは簡単。スタイルシートとJavaScript を読み込んで、


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fleaflet%401.2.0%2Fdist%2Fleaflet.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">

あとはマップ作ってレイヤーを設定するだけ。

var map = L.map('map').setView([35.681167, 139.767052], 13);
L.tileLayer(
    'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
    {
        attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
    }
).addTo(this.map);

ちなみに ‘map’ っていうのがターゲットのID。#map ってことですね。で、setView の中の2つの数字が緯度と経度。最後のがズーム数で大きい数字ほど地図が拡大されます。
あと、tileLayer の中のURLは国土地理タイルのURLになります。で、リンクに引用元の国土地理院を追加してます。(←実際には Leaflet のリンクも表示されます。)

※注意。<div id=”map”></div>
にはスタイルシートで高さ(height)を決めておいてください。僕みたいに、ん??って五分ほど無駄にしちゃいますよ(笑)

見やすいように中心に十文字をつけたい

地図は地図でも問題ないんですよ。でも、やっぱり中心に何かがないとあたりをつけにくいから見にくいんです。。。じゃあどうしたもんかなーって探ってみると、どうやら Leaflet にはいろんなプラグインがたくさんあって、その中に GeoPhoto っていうものを発見。実際にためしてみることに。

ありがたいことに cdn も用意してくれてるので、まずはそこから CSS と JS と読み込みますよ。

&lt;link rel="stylesheet" href="https://unpkg.com/leaflet-geotag-photo@0.5.1/dist/Leaflet.GeotagPhoto.css" /&gt;
&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fleaflet-geotag-photo%400.5.1%2Fdist%2FLeaflet.GeotagPhoto.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /&gt;

で、さっきの地図コードの次辺りに、こんな感じでコードを書きます。
ちなみに cdn から読み込むと中心に表示される crosshair.svg はきちんと読み込まれないんで自分で好きなとこに配置するなりして使ってくださいね。たぶん cdn 使わないんだったらなにもしなくても読み込まれるはずです。(でも、min.js がないんだよなー)

あと、大きさを変更したい場合はクラス「crosshair」にスタイルシートをつけて width を指定すればOK!

L.geotagPhoto.crosshair({
    crosshairHTML: '&lt;img class="crosshair" src="/images/crosshair.svg"&gt;'
}).addTo(this.map)
    .on('input', function (event) {
        var point = this.getCrosshairPoint()
    });

ってな感じで中心部分に画像を表示することができたわけです!

せっかくだから地名検索もしたくなった

人間の欲望はつきることはありません(笑)どうせなら地名検索して自動でそこまで移動したくなってしまいました。

ということで、また探ってみると国土地理院がJSON で検索APIをつくってくれてるんで、これを使うことに(ラッパーの歌詞以上に感謝!)。実はプラグインには地図の中に検索ボックスを作るってのもありますけど、今回は地図の外からの仕様で行くことにしました。

国土地理院のAPI・URLはこんな感じです。

https://msearch.gsi.go.jp/address-search/AddressSearch?q=(URLエンコードされた検索ワード)

※他にも都道府県コードとかで絞り込みできるんで興味のある人は ここ からどうぞ!

で、Ajax 部分ははしょりますけど、Vue と axios を使って JSON データをとってきてサラッとした感じでリストを表示することに成功しました。で、そのリストをクリックすると自動で地図が移動するようにもしました。
ちなみに地図を移動するのはこんな感じでとてもシンプルです。

map.panTo(new L.LatLng(lat, lon));

※僕いっつもどっちかわかんなくなるんですけど、lat(latitude) が経度で、lon(longitude)が緯度です。明石の経度が135度なんで日本の場合は経度の方が大きい数字ってことでOKですね。

終わりに

国土地理院って小学校の地図帳の背表紙にのってるのを見て以来ほとんど関わることなんてなかったわけですけど、ひょんなことからこんなとこで再開するとはおもってもみませんでした。こういう国のサービスとかなんとか白書とかって結構いいデータが揃ってたりするんでちゃんとチェックしとかないとダメですねー。

ってことで仕事終わりは卓上旅行に戻りたいと思います(笑)



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

【名刺】最安プランでラクスルで名刺を作ってみた

みなさんは自分の名刺ってもってますか??営業マンだとマストなアイテムなんでしょうけど、仕事によって状況はいろいろですよね。でもなんだかもってるだけでかっこ良く見えるのは僕だけじゃないはず!

でも、名刺って本当に必要???

でも僕の場合もフリーランスのプログラマーなんで必要あるっちゃあるんですけど、そこまで必要かって言われるとそうでもなかったりするんですよ。しかも、お笑い芸人さんみたく、

顔が名刺だろっ!?

なんてちょっとイキった感じでいたんで、名刺は正直作ってなかったんですね。

でも、名刺って仕事だけのためにつくらなきゃいけないわけじゃないじゃないですか。それこそいろいろなところに出かける機会があるわけですよ。で、そんな時に連絡先を交換するのってだいたい↓こんな感じじゃないですか??

1.「連絡先を交換しましょうよ!」

2.「いいね、じゃあLINEのID教えてよ」

3.「えーと、じゃあ言いますよ? ●●▲■▲…」

4.「あっ、ちょっとまってまって!●●■、、、?」

5.「いやいや、●●▲■、、、」

6.「んー、もうQRコードにします??」

しかも、人が多かったら、かけるその分の人数ってことになるわけですよ。
この時間がめんどうだなーとはずっーーーと思ってました。

でも、どうでしょう。名刺を作っておけばQRコードで「ピッ」で終わりなわけです。しかも別に名刺をあげちゃわなくても読み取り専用にしとけば万事OKでショートカットができちゃいますし、時間がないときでもパッと手渡すこともできます!

友達に相談してみた

そんなこんながあったんで、友達になんかいい方法ないかなー、なんて世間話程度で話してたら、じゃあ名刺をつくればいいんじゃない?ってことになりました。もちろんプライベート&仕事兼用って感じのライトななやつです。

で、今の時代、町の印刷屋さんにいくってのもちょっとしきいが高いですし、しかも僕は曲がりなりにもIT技術者なんで、オンラインでいろいろと探してみました。

その結果見つけたのが「ラクスル」っていうサービス。僕はまだ見たことないんですけど、コマーシャルまで放送してる超有名なサイトらしいですね。で、早速おもしろそうなんで最安値プランを使って200部、名刺をたのんでみることにしたんです。

値段がリーズナブル

なんで200部かというと失礼ながら、今後ラクスルを利用するかどうかをまず1000円程度の捨て金で試してみて、もし良ければ継続するぞ!っているビビリ戦略を採用したから(笑)です。

だもんで、最安値は「受付から7営業日後」プランの463円ですけど、その下の200部900円(+送料&税)でたのんでみることにしました!

※ちなみに部数が増えれば増えるほど単価は安くなるんでいっぱい必要な人は事前にたくさんたのんでおくとよりリーズナブルかもしれないですねー。

↓↓↓注文後してすぐに届いたメール


思った以上にフレキシブル

最初ラクスルでは「自分でデザインもできますよ〜!」なんてことも書いてたわけですけど、正直のところオンラインだからそこまで使い勝手がいいわけじゃないだろうし、印刷の出来もそこまでよくはないんでしょー???なんて思ってました。

しかも、最初から用意してくれてるテンプレートもありますけど、これもどうせよくある年賀状のテンプレート的な感じで「でも、たいしたなんてないんでしょー??」って超々あなどってました。(ゴメンナサイ、、、)

でも、実際に使ってみると自分でデザインするのもパーツごとに自分で好きなものを選べるし、もちろん文字とか、あとは画像をアップロードしてデザインの中にいれることもできるわけですよ。なので、僕はLINEのQRコードを名刺に貼っつけて印刷することにしました。

最安プラン(+アルファ)で時間がかかった

で、自分で名刺のデザインをつくって注文を済ませてから少しするとラクスルからメールで「入稿がまだ終わってないですよー!」って言われて

「んーーー???ちゃんと決済したでしょ!?」

って思ってたら、これ僕の勘違いで名刺の印刷の購入(つまり決済)をして、さらに名刺デザインの入稿をしないと注文が完了にならないらしんですよ。。。

あいたー、もともと7営業日だったけどこれのせいで10営業日ぐらいにはなっちゃったかも。。まー、でもそこまで急ぐ話じゃないし忘れた頃に届くでしょーってことでいったん僕の中ではラクスルの名刺の件は意識の遠い遠い片隅に置いたままにしてました。

やっと到着!

それこそ、なにかが封筒に入って到着したときに「あれ、アマゾンでなんか注文したっけ!?」って思ったらラクスルでした。

そこで、ちょっと興奮しながら出来を確認しようと封筒を開けると、、、???おおっ、ちゃんとプラスティックのケースに100部ずつ入れて送ってくれるんだー!ってなってなりながら中身をチェック!!

ま、デザインは僕なんでどうかとは思いますけど、名刺自体の出来はいいと思います。多分最初から準備してくれてるテンプレートそのまんまだったらホントに普通の名刺屋さんで作ったやつと全く変わらないと思いましたね。

↓↓↓これが到着したラクスル名刺。…文章はまたいいの考えますね(汗)修正してますけど、右上が名前で右下にLINEのQRコードが入ってます。(←もちろんちゃんとバーコードリーダーアプリで読み取れました)

最後に

それにしても時代はつねに進んでいるんだと関心させらるんですよね、こういうのを体験すると。たった1000円ほどでここまでのクオリティを実現するとはラクスルおそるべし!(でもちょっとこんなかんじで日本経済が心配だけど、、、)

自分で作ったデータはもちろんラクスルのウェブサイトで保存してくれてるらしんんで、またおんなじ、もしくはちょっと変更した名刺が欲しくなったらそのデータを呼び出してもう一回おんなじ作業をするだけでOK!

いやー、宣伝でも広告でもないですけど「ラクスル」って名前、名前負けしてないですね。

みなさんもラクスルじゃなくてもいいと思うんで、一回プライベート名刺とかってつくってみたらどうでしょうか。



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

僕がついに Google chrome をメインのブラウザに変更した理由

僕は長年、メインのブラウザとしてこころの友「Firefox」を長年使い続けて来たんですよ。というのも当時、Firefox はインターネットエクスプローラーという悪魔の呪縛から僕達を開放してくれた救世主のような存在だったんで。(正直なところ、もうマイクロソフトはOSすらメインで使ってません。確認用オンリー!もう正直ブラウザ開発は終了してほしいです。。)

いや、でもそんな僕でも一度は浮気したことがあるんですよ。もちろんみんな大好き Google Chrome さん。でもね、どうしても拡張機能(特にマウスジェスチャ)で Firefox の方がよかったんで最終的に「やっぱお前しかおらんねや!もいっかいやり直そやないか。」ってカンジでモトサヤに収まった過去をもってます。

でも別れることに

でも、今回は本気で Firefox と別れようと決断したんです。っていうのも Chrome をお試しでもう一回使った感覚が、

はっやーーーい!

の一言。その昔初めて使ったときも「え、お前は俺の思考を読んでるのか!?」っていうぐらい反応速度が早いんで、プログラムぐらいしかとりえのない僕でもらくーに万能感を味わわしてもらえたわけですよ。

しかも今回はその比じゃないくらい早いんで、なんでしょうね、例えるならテーブルマジックを見せられてるような、はたまたYoshiki の高速ドラムを目の前で見ているようなそんな体験をさせられて、ついに Firefox とのお別れが現実味をましてきました。

でもまだFirefoxの拡張機能が使いやすい、、、

そう、Firefoxの拡張機能は長年使い込んでるだけあってホントに使いやすい。僕はデスクトップでもマウスジェスチャを使っている「マウスジェスチャ〜(←マウスジェスチャを使ってる人)」なんですけど、 Firefox と Fire Gestures のコラボはマジでウェブ開発でも神がかってるわけです。

というのも、ソースコードとかの特殊ページでもしっかりマウスジェスチャが効いてくれるから。Chrome では今でもこうはいきません。

でも、でも、でも、でも、、、、、、???

でも、Google Chrome のマウスジェスチャもその後、ずっーと進化を続けてきてましたよ。たまにこんなことありません???

街でバッタリ

「あー、久しぶり!」

(えーっ!この娘こんなに美人になってんの!?好き!)

ってパターン。全くあれと一緒ですよ。Firefox で使えてた機能がほぼおんなじ形で使えるし、もし同じじゃなくてもスーパードラッグとかで代用ができるようになってました。んー、これは Firefox じゃなくてもいいんじゃないかって普通はなりますよね。

しかもその他のスクリーンショットを撮ったりする拡張も全くおんなじ開発者が Chrome用にも拡張機能を提供してくれてたりと、まさに完全移行のカウントダウンが始まってしまいました。


そしてダメ押しの出来事が発生!

はい。オウンゴールです、これは。

なんのことかというとFirefoxにはそれまでインスペクターっていう開発者用ツールの中でページプレビューができてたんですよ。簡単に言うと JavaScript とかを実際にページにアクセスしたらどうなってるのか?をチェックできる機能ですね。

これが Firefox 55 でなぜか削除されてしまった、、、(関連記事はここ

意気揚々と「やったー!あたらしい Firefox だーー!高速化だー!」って「今晩すき焼きだよ」って言われた時みたくアップグレードした結果がこれですよ。。もうね、Ajax なんて当たり前のこの現代でこの機能を削ってしまってどうすんだと。もちろん開発者オンリーな話ですけど、インスペクターの開発者さんたち、、、

四次元ポケットもってないドラえもんってどう思います、、、???

ってがっくり肩を落としながら、Firefox で「Google Chrome mouse gesture」って検索しましたよ、うんうん。

そして新しい時代の始まり

今新しい心の友となった Google Chrome でこの記事を書いています。

サクサクです。
快適です。

正直 Google 一強になってるウェブの世界に危機感を感じてはいるものの、やっぱり楽な方、得な方に流れちゃいますよね。それが目先のことだってわかってても。人間って思った以上に弱い存在なんです。特に僕はね。。。

もう、デフォルトのブラウザは Chrome です。HTMLファイルをダブルクリックしても Firefox がオープンされることはありません。なんだか昔の彼女のことを思い返してるような気分です。。でも前を向いて Chrome と幸せになろうと思います、Firefox の分まで!

ところで

前にedge って 「Firefox の拡張も Chrome の拡張もどっちも使えるようにしますよ〜」ってゆってたのって実現したのかな?

あれって、ガセ!?



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

パソコン無しでスマホのファイル移動・アンドロイド編

スマートフォンを新しく買い換えたときにめんどうなのが、今まで撮った写真や動画を古いスマホから新しいスマホへ転送する作業。
SDカードが使える機種だったらカードを抜き差しするだけでOKですが、最近のスマホにはSDカードどころかバッテリーさえも交換ができない機種もあります😱

そこで!今回はスマホ(アンドロイド)をパソコンなしでファイル転送する方法を2つお届けします。
(※パソコンが使える人はUSB使ってパソコン経由で移動するのがシンプルで一番いいと思いますよ😀👍)

QuickPicというアプリを使う(Wi-Fi)

QuickPic という写真管理アプリがあるのですが、このアプリを使うと簡単に無線Lanを通してファイル転送をすることができます。まずは古いスマホと新しいスマホが無線Lanにつながっている状態にして以下の手順を試してみてください。

※ただし、どうやらこのアプリは画像と動画しか転送できなさそうですね。。😰 でも転送は早いのでおすすめ!

手順はこんな感じです。

1.右上のマークにタッチする

2.メニューが現れるので、「Wi-Fi ファイル共有」にタッチ。この作業を古いスマホ、新しいスマホ両方で実行してください。📲

3.2つのスマホが認識されると相手側のスマホが表示されるので、古いスマホでプラスボタンにタッチして転送するファイルを選択。そして相手側のスマホマークにタッチすれば転送が開始されます。

4.転送完了!新しいスマホに「QuickTransfer」という専用フォルダができてその中に転送したファイルが入っていますよ。☺

 

正直のところ他のアプリ(ES ファイルエクスプローラー)なども試してみましたが速度、簡単さともにQuickPicがダントツでおすすめですよ😁

 

でなければやはり Dropbox や G-Drive を使う

Dropbox は G-Drive はインターネット上に共有フォルダをつくることができるサービスで、設定さえすればパソコンであってもスマホ/タブレットであってもそのフォルダに自由にアクセスすることができます。

そこで、いったん古いスマホから共有フォルダにファイルをアップロードし、後から新しいスマホでファイルをダウンロードするという流れでファイル転送をすることができます。

手順は以下になります。(Dropboxの例。両方のスマホにアプリをインストールしておいてください)


 

1.古いスマホで ES エクスプローラーなどを使って転送したいファイルを選択(複数選択可)。右下のボタンにタッチすると表示される「共有」にタッチ。

2.Dropboxに追加にタッチ

3.「追加」をタッチ。これでインターネット上にファイルが保存されました。

4.次は新しいスマホでDropboxを起動し、先ほど保存したファイルの右側のボタンをタッチ。

5.エクスポートをタッチ

6.デバイスに保存をタッチ。

7.あとは好きな場所を選んで保存ボタンをタッチすればファイル転送は完了です。G-Driveでも基本的には同じ作業になりますね。

 

じつはホットスポットを使ってファイル転送する方法もあるらしいんですが、どうしても僕の環境では実現できなかったので今回は割愛しました。たぶん機種どおしの相性とかもあるのかなと思っています。

それにしても Line を移行する際 Line の写真とかも消されてしまいました。そりゃないよ、Lineさん、、、大事な思い出の写真、、、、グッバイ😂



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

Vue.js の v-for で気をつけておくべきこと

今開発をしているサイトでは以前よりも JavaScript での動きが多いということで私の大好きな(=学習コストが低い) Vue.js をフル活用しています。
Vue は使うたびにその便利さにびっくりさせられているのですが、今日ひとつ v-for について気をつけておかなければいけないことに遭遇したんで未来の自分のためにもこの記事を書きたいと思います。

bazza / Pixabay

[こんな時]
まずはどんなときに影響あるの??を私が遭遇した実際の例を見てみましょう。

1.アポイントメントの一覧を表示
2.表示されている各データを X-editable でポップアップ表示しテキストや日付をリアルタイム変更
3.更新が成功したら新しくなったアポイントメントデータを読み込んで一覧表示 ←(ここで一覧表示がうまくいかなくなる

※ここで重要なのはデータ更新後のリフレッシュがHTTPじゃなく、JavaScriptを使ってる部分です。

[具体的にどんな不具合が起こった??]
これも簡単な例でみてみましょう。
次のはさっき説明したアポイントメント一覧の簡易バージョンです。

※もちろんこの部分は Vue.js の v-for=”**** in ****” をつかってクルクル回して表示をしてます。
※ソートは日付の降順ね。

【データ例】
アポイントメント1 | 2017/08/10
アポイントメント2 | 2017/08/05
アポイントメント3 | 2017/08/01

ここで、2番めの日付を「2017/08/15」に変更します。

アポイントメント1 | 2017/08/10
アポイントメント2 | 2017/08/05 ←ここを 2017/08/15 に変更しよう!
アポイントメント3 | 2017/08/01

【予想してたのは、、、??】

もちろん以下のような状態になると思っていました。

アポイントメント2 | 2017/08/15 ←トップに上がった★
アポイントメント1 | 2017/08/10
アポイントメント3 | 2017/08/01

【でも現実は、、、、??】

本当はもっと複雑ですが、わかりやすくするためにこれも簡略版で。

アポイントメント1 | 2017/08/15 ←え!?変更したのは「アポイントメント2」なんだが、、
アポイントメント2 | 2017/08/10
アポイントメント3 | 2017/08/01


※でもこの状態で、F5を押して再表示するとうまくいっている。

うーーーん、、、、、なんでだろうか、、、、最近ジジイの目は酷使されて限界なんだがー(汗)

そこでいつものごとくGoogleさんで検索(←最近良い結果を出さなくなりましたよねー。僕だけかな??検索下手??? DuckDuckGoなんかが対抗馬になったら面白いのにな(笑))してみると Vue の助け合いフォーラムを発見しました。

https://forum.vuejs.org/t/how-to-disable-component-reuse/5828

要約すると以下のような感じです。

相談者「コンポーネントの再利用をしない方法ってねーの??」
回答者「key アトリビュート使いなよ。ガイドに乗ってんじゃーん」
相談者「マジか!?魔法みたくうまくいったわ。あざーすあざーす!」

ん?? key attribute ??って Vue使い始めて初めて聞くけど何なんだろう。
本家ドキュメントへ急げ↓↓↓

https://jp.vuejs.org/v2/guide/list.html#key

ふむふむ。
どうやら Vueはデフォルトでさっきの相談者が聞いてたコンポーネントの再利用を実行するようになっているらしく、それで高速表示ができるようになっているみたい。
で、もしデータ変更で表示順番が変わってしまったら再利用の影響で表示がおかしくなっちゃうことがあるよ、ってこと(と解釈しました)。

[じゃ、どうすればいーの???]

ガイドにしっかりとのってました。
以下は引用です。

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

ポイントは「:key=”item.id”」の部分。
そうです。keyというプロパティにユニークなIDを指定しておくことで、もしデータの順番が変わってしまっても問題なく表示できるようになるよっていう機能のなんですね。さすが Vue。こういうところにもきちんと気配りしてくれている!

ってことで、私の場合も魔法のように一発で解決。
・・・でもこれって今後も発生する可能性もあるから覚えとかなきゃねってことで今回の記事は終わりです。m_ _m

※ちなみに最近 nextTick() という便利な機能をしりました。DOMが変更になってからコールバック関数を実行してくれます。以下も引用。

// データを変更する
vm.msg = 'Hello'
// DOM はまだ更新されていません
Vue.nextTick(function () {
  // DOM が更新されています
})

Vue の奥はまだまだ深そうだ(^^)



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

PHPサイトを高速化するためにやったこと

現在少し大きな開発を任せていただいていますが、サイト規模が大きくなってくるとやはりデータベースやらファイルやらを読み込む数が多くなってしまい表示速度が遅くなってしまします。

そこで、今回はいつも記事にしている Laravel だけでなく PHP全体でサイトを高速化する方法をまとめてみました。
(※高速化したいならフレームワーク使うなよ、というお話は無しお願いします m_ _m)

sharonjoy17 / Pixabay

1.各種環境のバージョンを上げる

(PHP 5.6 → 7.0)
これは少し前の話ですが、効果が大きく感じたので一番目に選びました。
PHP 5.6 から php 7.0 へアップグレードすると体感でも表示速度が上がったことがわかると思います。
なお、今回は PHP 7.0 → PHP 7.1 へ移行してもそれほど表示速度に違いはないとのことですので、PHP 8 の JITコンパイラを心待ちにしています ^^

(Apache2 → Nginx)
Apache と Nginx のパフォーマンス比較をしているページを見ると、特に多数のアクセス時のメモリの使い方が nginx の方がはるかに効率的でしたので長年使ってきた Apache 2 を捨て nginx に移行することにしました。
元々 nginx を使うのはあるクライアント様からのご希望からでしたが今後は他の開発でも優先的に使っていこうと考えています。

(HDD → SSD)
サーバーのストレージを SSD に変更するだけで劇的に表示速度を改善することができました。
実は容量が多いほうがいいだろうという貧乏性でまだ HDD で運用しているサイトを個人的に持っているのですが、今後サーバーの契約が近づいたら全て変更してやろうと画策中です!

2.キャッシュ機能を活用する

キャッシュ機能と言っても自前でいろいろ用意するのはめんどうなので、PHP が持っている以下2つのキャッシュ機能を活用することにしました。


(Opcache)
プログラムコードを解析したものをキャッシュとして保存しておく機能なので、次回からコンパイル時間が短くなるようです。
実際に少し高速化を感じることができました。

(APCu)
こっちはユーザーの変数などをキャッシュしておく機能です。
データベースへのアクセスが多い現在の開発サイトでは特に大きな効果を発揮しています!

※なお、CentOS で Opcache と Apcu をインストールするには以下のように yum を使ってできます。(リポジトリなどは各自整備しておいてくださいね)

sudo yum install --enablerepo=remi-php70 php-opcache php-apcu

※また、Laravel で apc を利用するには以下のように .env を変更してください。


CACHE_DRIVER=file
SESSION_DRIVER=file

↓↓↓

CACHE_DRIVER=apc
SESSION_DRIVER=apc

3.Vue を活用する

これまでは当たり前のようにPHPで HTML をレンダリングしていましたがこれも少しずつ変更してきました。
Bootstrap を使っているのでいまでも jQueryの恩恵を多く受けているのが現状ですが、はやり Vue と比べると表示スピードが遅いので、最近は使える場所はできるだけ Vue を使うようにしています。
受信側のPCやスマートフォンが高性能になっているので JSを使ってそっちでレンダリングしてね!というスタイルは時流にかなっていると思います。
(ただ、まだやっぱり React派が多いのかな?んー、タスクランナーが好きじゃないんだよなー。。)

今後は Bootstrap だけじゃなく Semantic UI や Materialize なんかのフレームワークも試して高速化を進めたいと思います!
今回は以上です m_ _m



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

Laravel-Excel の CSV文字化けに絶望したのでパッケージを作った!

ウェブサイトを開発している人ならよく実装する、データの保存機能。
これはデータベースなどに保存されている顧客データなどをローカルに保存するものですが、これを実装する際に Excel や CSV がよく使われると思います。

そして、これは世界的にも同じであるようで、すでに Laravel のパッケージには Laravel-Excel という有名なものが公開されています。

そして、私自信このパッケージにはいつもお世話になっていてこれまでどれだけの時間を短縮させてもらったかわからないほどです。

ただ、一点だけ問題点が、、、

「CSVを作るには UTF-8 以外では作れない」

というもの。

その昔このパッケージの作者にこの現象を問い合わせたことがあるのですが、どうやらこれはこのパッケージのせいではなく、PHPExcel という元のパッケージが原因とのことでした。

んー、これはまいったなー、と思ったのが数年前でした。
そして、「いや、そのうち対応するだろう」

と思い、これまではバリバリにコードを書いて CSVダウンロードを実装してきました。


そして、久しぶりに Laravel-Excel を使ってみましたが前と全く変わらず UTF-8 以外ではうまく動作しなかったので、もはやこのパッケージに頼るのはやめようと決心しました。

※正確には Excel の作成ではよろしくお願いしますm__m です!
※しかも、今のこの時代まだ Shift_JIS が使われてることも絶望しました(笑)UTF-8も対応したんじゃなかったっけ?

そこで、今回 Shift_JIS でエンコードされた CSV をダウンロード & 保存することができる Lravel 独自パッケージを作成しました。
インストール、ダウンロードは以下のGitHubページから行えます。

Sukohi/FluentCsv

(使い方)

GitHub のページでも説明していますが、データと文字コードを設定して download() or save() を呼ぶだけでOKです。

(Download)

    $csv_data = [
        ['データ 1-1', 'データ 1-2', 'データ 1-3'],
        ['データ 2-1', 'データ 2-2', 'データ 2-3'],
        ['データ 3-1', 'データ 3-2', 'データ 3-3'],
    ];
    $fluent = \FluentCsv::setData($csv_data, 'SJIS-win');

    return $fluent->download('テスト.csv');

(Save)

    $csv_data = [
        ['データ 1-1', 'データ 1-2', 'データ 1-3'],
        ['データ 2-1', 'データ 2-2', 'データ 2-3'],
        ['データ 3-1', 'データ 3-2', 'データ 3-3'],
    ];
    $fluent = \FluentCsv::setData($csv_data, 'SJIS-win');

    if($fluent->save(storage_path('app/public/test.csv'))) {

        echo 'セーブ完了!';

    }

何かのお役にたてたら光栄です!



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

Laravel で見逃していた7つの便利機能

私が Laravel を開発で利用し始めたのはバージョン 4.2 からでした。

その後も Laravel は進化を続け、「え、ここまでやってくれるの!?」というニュースを連発しつづけてきたことは我々開発者にとってはとてもありがたいことです。

しかし、その機能追加が速いことや多すぎるため昔きっちりドキュメントを読んだ頃からするとちらほら「見落としちゃってるちょっとした便利機能」というのが出てくるようになりました。

そこで今回は「これってちょっと便利だよ?」とおすすめしたい機能を独自にまとめてみたいと思います。(独自、ということはみんなは「それ、当たり前だから!」も含まれてるってことです(笑))

では、早速いってみましょう!

1.Routing

パラメータに正規表現で制限をかけられる。
以下のようにすることで入ってくるパラメータに制限をかけられるのでセキュリティ上ベターになるかと。

Route::get('sns/{name}', function ($name) {
    //
})->where('name', 'facebook|twitter|google-plus');

グループにドメインを指定できる
これ地味に便利です。というのもテストなどローカルだけで実行したい記述をここにいれておけばコメントアウトを忘れをしても問題ありませんので。

Route::group(['domain' => 'my-site.dev'], function () {
    // Do something..
});

2.Controller

Restful API 用の Controller がコマンドで一発作成できる。
–resource オプションをつけるだけで GET, POST, PUT, DELETE に対応した Controller を自動作成してくれるなんて便利すぎです。

php artisan make:controller PhotoController --resource

しかも、–model をつければ自動でバインディングまでしてくれてしまいます!(モデルが存在しなければ「作る?」と聞いてきます)

php artisan make:controller PhotoController --resource --model=Photo

さらにさらに、 Route の方でも全ページを記述する必要ななく、たった一行でOK!

Route::resource('photos', 'PhotoController');

3.Request

配列はドットつなぎでらくらく取得。
もし、以下のような入力ボックスがあって送信されたら、

<input name="products[0][name]">
<input name="products[1][name]">
<input name="products[2][name]">
$name = $request->input('products.0.name');  // 一番上だけのデータ
$names = $request->input('products.*.name');  // 名前だけの配列

という形で取得できます。

fullurl() でURLを一発取得

過去には現在の URL を取得するのはめんどうだった記憶があったのですが、これがあればまさに一発!ですね。


$url = $request->fullUrl();

storeAs() でファイル名を指定して保存できる。
この記述の仕方もシンプルでとても素晴らしいです。

$path = $request->photo->storeAs('images', 'filename.jpg');

なお、Request からログインユーザーが取得できるのもとてもいいですね。

$user = $request->user();

4.helpers

old() ヘルパーもシンプルで便利。
たった3文字なので可読性が高いですし、デフォルト値も設定することができます。
とくに Blade 内で重宝していますね。

$value = old('value');
$value = old('value', 'default');

5.Validation

エラーメッセージの attribute name を簡単に設定できる。
lang 以下の validation.php 内にある attributes を設定すると自動でエラーメッセージに適用されます。
ちなみに日本語の場合は「resources/lang/ja/validation.php」です。

'attributes' => [
    'email' => 'メールアドレス',
],

※基本的な翻訳メッセージはここから取得できます。感謝!

6.Blade

@foreach … @endforeach 内で自動的に利用できるようになる $loop。

例えば、以下のような感じです。

$loop->index; // ゼロから始まる番号
$loop->iteration; // 1から始まる番号($i+1する必要なかった!)
$loop->remaining; // 残りはいくつが分かる数字。
$loop->first; // 一番最初のデータですか?
$loop->last; // 一番最後のデータですか?これを使えば <hr> で区切っても簡単に最後だけ表示しないようにできますね!

また、@php … @endphp っていうがあるのを知りました。
いちいち を書く必要はなくなりますし、統一感がでるのでいいですね。

@php

// ここは PHP プログラム

@endphp

7.Eloquent

モデル内に Notifiable トレイトと $events を設定するだけで以下のイベントを設定することができる。

creating, created, updating, updated, saving, saved, deleting, deleted, restoring, restored

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The event map for the model.
     *
     * @var array
     */
    protected $events = [
        'saved' => UserSaved::class,
        'deleted' => UserDeleted::class,
    ];
}

番外編(View

ビュー単位で特定データを呼び出せるようになる ViewComposer
長くなるので説明は割愛します m_ _m

ということで、以上が7つのちょっと便利だよ、機能でした。
興味があったらぜひ活用してくださいね。



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ

Laravel / Socialite で気をつけるべき事のまとめ

現在の開発で Laravel/Socialite を使ったソーシャル・ログインを作っています。

このパッケージはとても便利で以下の手順を踏むだけでユーザー登録/ログインの手間を省くことができます。

1.Twitter や Facebook の特定ページヘリンクを貼る
2.アクセス許可の設定(すでに許可設定されていればここはスキップ)
3.指定したページヘリダイレクトしてくるので、そこでユーザー情報を登録 or 自動ログイン

ひとつひとつソーシャルログインを実装していた一昔のことを考えるとどれだけ開発が省略されたことかとホントに感心しますね。

さて、こんな便利な Laravel/Socialite ですが、ユーザー登録、もしくはログインする際にいくつか気をつけておかなければならないことがあります。

今回はそれらを自分への備忘録としても記事にしてお届けしたいと思います。

気をつけるべきこと

1.ユーザーテーブル

デフォルトで Laravel のログイン情報はメールアドレスとパスワードとなっています。
そのため、ユーザー登録をしようとするなら単純にフェイスブックなどから提供されるメールアドレスとランダムなパスワードを使って以下のようにしようとすると思います。

\App\User::create([
    'email' => $socialite_user->email,
    'password' => str_random()
]);

しかし、これでは今後ソーシャルログインのメールアドレスを変更されてしまった場合に違うメールアドレスが提供されることになるため同一のユーザーであってもメールアドレス変更後は再度新しいユーザーとして認識されることになってしまいます。

これを防止するためにはユーザーテーブル(もしくはソーシャルログイン専用テーブル)にログインに使用するサイトとユニークIDを保存し、ログインする際にはこれらで認証をする必要があります。

そこで migration に provider_name と provider_id などのようなカラムを追加します。

/**
 * Run the migrations.
 *
 * @return void
 */
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->unique();
        $table->string('password');
        $table->string('provider_name')->nullable();  // ←ここ。facebook や twitter などが入る
        $table->string('provider_id')->nullable();  // ←ここ。各サイトのユーザーID
        $table->rememberToken();
        $table->timestamps();
    });
}

※通常のユーザー登録の際は provider_name, provider_id は必要ないので nullbale() を付け加えています。

そして、ログインはこれら2つのカラムを利用してチェックを行います。
(※ただし、これではまだ未完成です。次の項目もチェックしてください)



$user = \App\User::where('provider_name', $driver)
            ->where('provider_id', $socialite_user->id)
            ->first();

2.provider_name と provider_id の2つだけでユーザーチェックをするとエラーが発生

先ほど追加した2つのカラムでのチェックだけでユーザー登録を実行するとエラーが発生する場合があります。
例えば以下の例を考えてみましょう。

1.ユーザ登録はフェイスブックを使った。
2.その後、ツイッターも面白そうなので登録した。
3.フェイスブックで登録したのを忘れてツイッターのソーシャルログインで認証を実行した(←エラーが出ます)

なぜなら、すでに登録されている provider_name と provier_id はフェイスブックのものなので、先ほどの where 句を使ったユーザーチェックでは「該当なし」となってしまいます。

該当なしとなると、プログラムの方ではユーザー登録をするはずです。
しかしそうなった場合、もしこのユーザーのフェイスブックとツイッターのメールアドレスが同じだった場合はどうなるでしょう。

そうです。
migration には email はユニーク設定がされていますのでエラーが発生してしまうわけです。
つまり、「もうすでにそのメールアドレスは登録されてるよ!」エラーですね。

そこでこれを回避するためには以下のようにメールアドレスでのチェックも orWhere で追加する必要があります。

$user = \App\User::where(function($query) use($socialite_user, $driver){

    $query->where('provider_name', $driver)
        ->where('provider_id', $socialite_user->id);

})
->orWhere('email', $socialite_user->email)
->first();

これで他のソーシャルログインを試されても問題ないでしょう。

3.ツイッターのソーシャルログインはメールアドレスをデフォルトで提供しない

これは少し面倒なのですが、ツイッターのソーシャルログインでメールアドレスを取得したい場合は以下の2つの情報を追加する必要があります。

1.プライバシーポリシーのURL
2.利用規約のURL

もしメールアドレスを取得したいのならこれらを Application Management の settings タブで登録し、さらに permissions タブの「Additional Permissions」で 「Request email addresses from users」にチェックを入れて保存しましょう。

以上、Socialte の注意すべき点のまとめでした。
できれば今後は Socialite の方でユーザー登録 or 自動ログインを自動的に行ってくれるメソッドなどを追加してくれると嬉しいなと思いつつ今回の記事を終了します

(もしかしてもう、ある???)



にほんブログ村 IT技術ブログへ  にほんブログ村 IT技術ブログ プログラム・プログラマーへ