はてなブックマーク

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 2019年始まって、1月もあっという間に終わってしまいましたね。 いやはや。早いですね。 さて、今回の話題なのですが、「ブラウザフィンガープリント」について。 2018年、何かと世界的に話題となったweb技術の1つとして挙げられるのが「Cookie」。 Cookie自体、最新技術なわけもなく、大分昔から存在する枯れた技術なのですが、なんで大きな話題になったかといいますと、 EU一般データ保護規則。 GDPR（General Data Protection Regulation）が、EUによって2018年5月25日に施行されたからです。 あまりに大きな出来事だったので、世界各地で話題になり、勿論web業界も慌ただしくなりフロントエンドな方々も色々と対応に追われた

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 Vue.jsはかれこれ、使用して2年くらい経つのかも、経たないかも。 ガッツリと使用してきたのですが、主にwebゲーム作成での使用でした。 今回、所謂一般的な「Webサービス（Webアプリケーション）」を作成することもあって、色々漁っては見たものの やっぱりVue.jsが実装も楽だなと言うことで、どうせならモダンなフロントエンド実装が良いなと思って 改めてNuxt.jsをガッツリ触り始めたのですが、やっぱり「超絶便利」ですね！ 前回、こちらの記事で、軽く紹介させていただいたのですが（もう1年以上前なのかw）、改めて使用し始めたのですが、やはり便利ですね。 バージョンも2.3.4という事で、1年前よりもメジャーバージョンが上がったのではないのでしょうか？ 今まで

起動コマンド Unity sudo startunity Xfce sudo startxfce4 インストールをしばらく待っていると。。 止まりました。。 うわぁ。。だめっぽいですね。。 「unity is unsupported on ARM for …」と出ておりますね。。 別記事で書こうかと思いますが、今回、安価なchromebookを使用しておりそれに伴い、GPUやCPUも安価なものが搭載されています。 それによって、色々と使用の制限がかかってしまいます。 ざっくりですが、インテル CPU 安い（性能低い）順となります。 インテルCPU 安い（性能が低い）順 Atom（アトム） Celeron（セレロン） Core M Pentium（ペンティアム） Core i3 Core i5 Core i7 Core i9 というわけで、unity-desktopは諦め、xfce–desk

Amazonタイムセール & プレミア会員で、6,600円ほどで購入。 iPadも持っていて、安く購入したが故か、あまり使用せずに放置状態のままでした。そんな人も少なくないのではないのでしょうか？ でも、このスペックのタブレットで、6,600円で購入できる、超コスパタブレットは Amazonぐらいですね！ ＞＜ 今回、こちらのタブレットを「Fire OS」をそのままで、Linux環境を構築していきたいと思います！ ファイル管理アプリをインストール Kindle Fire HD 8 は、Amazon社が独自開発した「Fire OS」がAndroidベース上にインストールされています。 「Fire OS」は、Amazonのコンテンツ用に最適化されていて、デフォルトで扱うには「Google Play」が使えなかったりしますので、純粋な「Androidタブレット」ではないこともあって、Amazon

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 ちょっとRailsの認証周りについて少々。 サーバーサイドで認証が必要な場合、大きく2つの実装方法があるかと思います。 ・Cookieベースの認証 ・Tokenベースの認証 今回は、Tokenベースの認証について行っていきたいと思います。 Ruby oc Railsを基に構築し、Cookieベースの認証を行う場合、ログイン機能や、ユーザーデータ周りを Gemであるdeviseにお任せすることも多々あるかと思います。 そんな、deviseを使って、トークンベースの認証を行いたい場合「devise token auth 」というGemを使うと、何かと容易に実装が行えますので、行っていきます。 準備 それでは、早速作っていきましょう。 まず、rails new でア

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 今回は、新規プロダクトの開発の際に、非常に重宝する「JSON Server」についてのご紹介できればと。 真新しいものでもないのですが、よく利用してせっかくなのでまとめさせていただきます。 何か参考になればと。 とある事業で、新規プロダクト制作が立ち上がって、フロントエンド開発を行っていくにも「サーバー側が出来てないよぉ。」 と、言って制作できないところが発生する場面は多々あるかと思います。 そもそも、新規プロダクトで、サーバー側が出来上がっている状態というのは、なかなかない状態かと思います。 そんなときに非常に便利なのが「JSON Server」となります。 「JSON Server」で、仮にAPIを作成しておけばサーバー開発が終えてなくてもガツガツ、フロン

どもです。 皆さん 日々、CSSを記述されているでしょうか？ その際、どのアーキテクチャで構築されているでしょうか。 当方は、ゲームパーツを大量に制作するのもあって、やはり「APBCSS」のアーキテクチャが重宝しております。 という事で、「APBCSS」の推奨するファイルをコマンド1発で生成出来るジェネレートツール、 「apb-cli」の使い方となります。 APB CLI インストール npm https://www.npmjs.com/package/@atomic-package/apb-cli github https://github.com/atomic-package/apb-cli インストールは、npmコマンド でグローバルにインストールする。 $ npm install -g @atomic-package/apb-cli これで、インストール完了。 apbコマンドが使用

では、実際にコマンドを入力してみましょう。 「generate」コマンドで、「component」を生成してみます。 以下のコマンドを入力すると、 ng g component my-new-component create src/app/my-new-component/my-new-component.component.css create src/app/my-new-component/my-new-component.component.html create src/app/my-new-component/my-new-component.component.spec.ts create src/app/my-new-component/my-new-component.component.ts update src/app/app.module.ts このように、該当す

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 こちらの続きとなります。 Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」 では、前回の続きから、 components/post-more-btn.html <div class="moreBtnBox"> <a @click="onClick">他の記事を読み込む</a> </div> componentsである、「post-more-btn.html」をクリックすると、その対となる 「post-more-btn.ts」の「PostMoreBtn」 のonClickが実行される流れでし

どもです。 Dockerは、起動も早くて便利ですよね。 でも、ちょっとしたPHPの実行環境の為に、 いちいちVirtualBoxでVagrantを立ち上げて、イメージをDockerHubから、pullしてコンテナ作って、Docker commitして… という作業はしたくはないものですね。。。 という事で、今回は「YAMLファイル」一つ（厳密には他ファイルもありますが）で、 nginx + PHP7-fpm + mysql + phpMyAdmin の環境構築を行う方法をご紹介します。 OS X El Capitan 10.11.6 Docker version 1.13.0 Docker Toolbox 今回は、「Docker」は何なのか、とかの「Docker」についての詳細は割愛させていただきます mm そして、今回、何を行うかですが、ざっと以下の様な流れで環境構築を行います。 ・Do

どもです。 今回は、誰でも簡単に「ホームページ制作」が行える！ と、何かと話題の Wix.com が提供しているサービスをなんとなく使ってみたところ、 何気にすごかった（あ。ちょっと失礼な感じ。。）ちょっとばかりその詳細をご紹介させていただきます。 Wixに関しては、利用ユーザー数も、世界190か国で、9,000万人以上で利用されていると言うことでかなりの人気ぶりがわかります。 なのですが、筆者は余りこの手のホームページ構築サービスを使うことなく（ソース書く方なのでw）最近になって、この「Wix」のサービスも知った訳なのですが、日本ではまだまだ浸透していなかったりなのですかね。。 （すでに利用されている方には、非常に申し訳ないです mm） これまでにも、コードを書かずにホームページを作れるいわゆる「ホームページ・ビルダー」的なソフトやサービス等がありましたよね。 ちょっとばかり、2017年

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 最近、どうもWordPressのネタが多い気がしますが、あれです。 年末のサーバーお掃除期間で、色々と整理しているせいですw ということで、複数ある様なWordPressのサイトを楽々運営していきたいですよね。 でも、WordPressのローカル環境構築には、どれがいいかずっと悩まされてきました。 vccwが良いのか、wockerが良いのか、vvvvが良いのか、dockerで構築した方が良いのか。。 などなど、 Vagrantベース ・vccw (apache) ・vvv (nginx) dockerベース ・wocker … と、あって、確か前回にも WordPress + Vagrant の環境構築が超簡単に！！「VCCW」を使ったら簡単すぎて困った件。

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 すっかり寒くなってきましたが、皆さん体調の方は大丈夫でしょうか。 私は風邪をひきました。 と言う訳で、今回は「Sketch」ファイルをGithubで管理して、デザイン修正分を差分表示して業務を捗らせようって内容です。 Skecth Sketch https://www.sketchapp.com/ Sketchに関しては、もうすっかり有名なのかと思いますが、知らない方の為にざっと説明させて頂くと、 Sketchは、Mac専用のWebとモバイルUIデザインの専用ツールで、多くの機能を取り入れないことによって、かなり軽量なツールとなっております。 「何かこの機能を使いたいなぁ。」と言った時は「plugin」を追加することでカスタマイズしていけます。 また、デザイン

どもです。 今回は、最近の激安サーバーを徹底比較！ ということで、今回は「AmazonのAWS」や「さくらVPS」とかとか、所謂メジャーどころは一旦置いておいて、そこまで知られてないけど「これは安いのでは！？」「これはお得では？」といったサーバーをピックアップしてみましたので、何か参考にしていただければ幸いです！ また、そこそこの数をピックアップしているのもあって、「はてぶ」や「pocket」で保存して後で見直すのもオススメしますー！ VPS まずは、VPSからですが、もう登録者数も70,000人を超えすっかり有名な「ConoHa」から。 「ConoHa」は、大手「ＧＭＯインターネット株式会社」が提供するVPS サービスとなります。 なんと、今月（2016年8月）まで「最大 1ヶ月無料」のキャンペーン中との事で、契約するのであれば今がチャンスな気がしますね！ ConoHa 月額900円から

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 HUGO https://gohugo.io/ どもです。 海外旅行は実は今ではないかと企んでいる今日この頃の私です。 前回に続き、爆速続きで申し訳ないなのですが、「HUGO」が快適すぎる。 作業するにあたって、コンパイルなどやはり何かと早いのがいいですね。 そう、嫌われないぐらいにね。 というわけで、今回は所謂、静的サイトジェネレータに関してです。 HUGOて何？ HUGOは、プログラミング言語Goを使って開発された静的サイトジェネレーターとなります。 静的サイトジェネレーターはRuby 言語で作られた「jekyll」が有名かと思いますが、それと同類なのですが「HUGO」は構造のシンプルさと処理速度の速さで知られています。 jekyll https://github.c

最近は何かと、iphoneアプリにはまってまして、久々にwebの方も書こうかと。 いやぁ。しかしRailsは便利ですね。 何かと話題のRuby on Rails。 Ruby on Railsを利用すると、サクッと、DBや、webサービスも作れるし、前に比べるとwebサービスなどの制作の敷居も下がったのではないかと。 しかしながら、Ruby on Railsのデフォルトで用意された、view helperやcoffeescriptでフロントを作成しようとすると、どうもインタラクティブなUIを作ろうとしても、効率が悪かったり、やや強引な設計になったりしませんか。 という事で、RailsにはAPIを返すだけ（極端に言うと）にし、フロントエンド（viewの作成）はAngularJSを用いてSPA化し、TypeScriptでより保守性を高め快適な開発環境を構築しようではないですか。 （何かと、Typ

「今は昔」 この業界は本当にサイクルが早い。 あんなに、「おお。なんだこれ、超便利ではないですか？」と言っていたものもすぐに「古く」なってしまう。 「compass」もその一つではないでしょうか。 いや、全然便利で使いたいのですが、何しろ 「コンパイルがクソ遅い。」 compassはご存知の通り、「Ruby」で作られています。 が故に、ちょっとSCSSの編集したいだけなのに、コンパイルにとても時間がかかってしまいます。orz と、言う訳で「compass」はもう卒業しました。 卒業するのはいいのですが、代替えは何を利用するかと言いますと、「Libsass」ですね。 「Libsass」とはなんぞや。て方に。 C/C++で書かれたSass Compilerとなります。 当たり前で恐縮なのですが、C/C++で書かれているのでコンパイルの速度は、ビックリするぐらい「爆速」です！ Github ht

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 去年まではAndroidさんと仲良くさせていただいたのですが、最近ではもっぱらIEさんだったりもします。 最近のIEさんはワガママ言わずきちんと仕事を行って頂けるので有難いです。 とは言え、ちょっと変わった事しようとすると、様子がおかしくなったりもしますよね。 Macだと、WindowsをvirtualboxやParallels®にインストールしたりして確認するのですが、IE8とかIE9とかちょっと前のブラウザだと確認ができなかったりします。 今回は、個別にWindowsをインストールせずに、IEのレガシーバージョンを使用する方法、Virtualboxにmodern.IEを構築する方法となります。 VirtualBoxインストール VirtualBoxの詳細に

これらのデータを元に、似ているユーザーを探し出します。 それぞれのユーザーをすべてのユーザーと比較し、どの程度似ているか類似性スコアと言われるものを算出して比較していきます。 類似性スコアの算出方法は幾つもありますが、もっとも初歩的な「ユークリッド距離」と「ピアソン相関係数」によって算出していきたいと思います。 類似性スコアの算出方法で単純な方法の一つで、「ユークリッド距離」と呼ばれるものがあります。 端的に説明させていただきますと、ユーザーが評価したアイテムを軸にしグラフを表示します。 グラフ上にユーザーを配置し、各ユーザーの距離を算出する事によってどのくらいユーザー同士は近いかを計算する方法となります。 まず、例に上記の表から「ドラゴンクエスト」と「スーパーマリオ」を比較して、ユーザーを嗜好空間に図示してみます。 パッと見た感じ「takayama」と「tanaka」は近く、「takay

どもです。 超久々にWordPressの記事を書く気がします。 いや、超久々にWordPress触るといいですね。 ゴリゴリにhtmlの方に書いていくのが、何か逆に新鮮です w しかし困った。 あれ、どうやるだったけな。が多い。 まず、やりたいことは ・WordPressのLoop外（WordPress外）からWordPressの関数を呼び出したい。 ・記事一覧を表示させたい。 ・ランダムで表示させたい。 と、この辺になります。 WordPressのLoop外から関数呼び出し WordPressのLoop外（WordPress外）からWordPressの関数を呼び出したい。 出来るんでしたっけ。 いや、出来るだろう。 こちらを参考にしたところ、どうも、 wordpress関数を外から使うにはwp_load.phpを読み込む wp_load.phpをrequire_onceで呼び出せば大丈夫

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 どもです。 依然、熊本では地震が続いておりますね。。 この度の大地震で被害に遭われた皆様、心からお見舞い申し上げます。 私の家族も全員九州にいて、妻と子供も丁度帰省していた時期もあって、私以外の家族が今回の地震を体験しております。 全員無事で何よりだったのですが、熊本には一刻も早い復旧を祈るばかりです。 話は変わりまして、iPhoneの進化は本当にめまぐるしいものですね。 ゲームをとってみても、グラフィックも凄いし、リアルタイムのバトルも行えたりで。 コンシューマーゲームに負けない勢いですね。 そんなiPhoneをゲームだけで終わらすのはもったいない。 毎日の通勤時間の1時間をゲームではなく、web開発してみませんか？ そんなわけで、 今回は、久々の投稿ということで、iP

いい加減、ネイティヴ iPhoneAppの製作を行おうかと思います。 と言うのも、以前、iPhoneやらAndroidやら途中まで作成してはやめ、また始めなんてやっていましたらもう2016年。。 JavaやらC++やらswiftやらRubyやらと浅く広くやっていますと、「あれ。これどうだったけ？」「AutoLayoutってなんだっけ」状態が多々発生しますね（大袈裟に言いましたが） w と言うことで、やったことを忘れないように（これは歳か？w） しっかりSwiftと向き合って1からiPhone Appを作って行ければと思います！！ Swift GitHub 特にSwiftで書いてiPhoneAppをリリースした。って経験もないど素人レベルなので、 「これからiPhoneAppを作るぞ！」て方に参考になればと思います！ 何はともあれ、iPhoneApp作成に必要なのはPCはMacとなります。

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 久々にWordPressについて書くような。。 VagrantとWordPressのローカル環境を構築しようと思って、見つけたのがこちらでした。 VCCW http://vccw.cc/ 本当に簡単過ぎて、あまり書くこともなく困った感じです。w WordPress + Vagrantの環境構築の定番となりそうな感じですね。 VirtualBox & Vagrant インストール Install VirtualBox. https://www.virtualbox.org/ Install Vagrant. http://www.vagrantup.com/ Vagrant環境を使いますので、「VirtualBox」と「Vagrant」が必要となりますので、 まだの方はイン

というわけで、 明けまして、おめでとうございます！ なんか、慌ただしく2016年を迎えてしまった次第です。。 今年はちょっとゆっくりしたいなと思いつつ、 2016年、今年もよろしくお願いいたします。mm さてはて、早速本題の方ですが、webデザイン界隈で 最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも 増して色々と聞くようになってきたのを肌で感じる今日この頃でして、 デザイナーの方もそれらの思考を持ってデザインされるかと思います。 そもそも「アトミック・デザイン」ってなんぞやって方はこちらを、 Atomic Design Atomic Design http://bradfrost.com/blog/post/atomic-web-design/ Atomic Designの特徴として、こちらの図であるように、 UIパーツを「ATOMS」（原子）と捉え、原子と原子の