サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
qiita.com/k-oto
レコメンドシステムとは レコメンドシステムとは、複数の選択肢の中でユーザーにとって価値のあるものを選び出し、意思決定を支援する仕組みです。 例えば、AmazonのWebサイトで買い物をしていると、「この商品に関連する商品」や「この商品をチェックした人はこんな商品もチェックしています」という風に、ユーザーに合いそうな他の商品を推薦してくれます。Amazon以外にもNetflix(映画の推薦)やTwitter(ユーザーや投稿の推薦)等、多くのサービスでレコメンドシステムが使われています。 パーソナライズ レコメンドシステムの分類として、まずざっくりパーソナライズされているかどうかという違いがあります。 非個人化(non-personalized) 全てのユーザーに一律に行う推薦(例:人気商品ランキング) 一時的個人化(ephemeral personalization) 利用者の入力に基づいた
qiita.com/k-o-u
今回は1つのローカルリポジトリに対して、2つのリモートリポジトリを登録する方法についてご紹介したいと思います。 設定方法がとても簡単だったので、自分用として記録します。 現在のリポジトリを確認 git remote -v origin git@bitbucket.org:hogehoge/hoge.git (fetch) origin git@bitbucket.org:hogehoge/hoge.git (push) 上記を実行することで、現在設定されているリモートリポジトリを確認することが出来ます。 ここでリポジトリが2つ以上出てきたら、複数設定されているということになります。 現在は bitbucketしか表示されていませんね。 リモートリポジトリの追加 では、新たに登録したいリモートリポジトリを作成したら、
今回はCookie、セッションに関して色々調べたのでまとめたいと思います。 ステートフルとステートレス HTTPはシンプルなプロトコルで特徴としてステートレスであると言うことが挙げられます。 ステートレスとは状態を保持しないと言う意味で、HTTPではリクエスト/レスポンスの一往復のやりとりが完結した処理とみなされます。 つまり、複数の処理を関連づける仕組みがありません。 一方、ステートフルと言う言葉があります。ステートフルは状態を保持しておき、次の処理に反映させるような方式のことを言います。 これを見ると、ステートフルの方が便利に見えますが、サーバーは一度に多くのクライアントとやり取りをしなければならないために、常に全てのクライアントの状態を保持しなければならないとなると非常に負担が大きくなってしまいます。 これらを踏まえHTTPは、多数のクライアントが接続し、多くの処理を素早くこなさなけ
qiita.com/k-okina
はじめに Atomic Designとはこのリンクに書いてある感じの奴です 最近のコンポーネント指向のフロントエンドでAtomic Designで失敗するチームの話をちらほら聞きます 自分も1度は失敗しました。そりゃプロトタイピングもしたことなかった状態でAtomic Designでこった画面を作ったので当然ですが。(逆に1つ目の画面で失敗に気づけてよかった では、なぜ我々はAtomic Designでフロントの開発が上手くいかないのかを説明しようと思います。(誤字脱字その他各種修正の編集リクエスト待ってます! 指摘1. 世に出回っている多くの日本語資料のAtomic Designスライドは間違っている そもそもオリジナルのAtomic Design読んだことありますか? 読んでないなら読みましょう。英語を読むのがめんどくさいなら私のざっくりな和訳記事を読んでください。 なぜオリジナルを読
qiita.com/k-onishi
はじめに Linux Advent Calendar 2018、8日目の記事になります。 タイトルにもある通りカーネルコードリーディングのすヽめです。 自身は今年の夏頃からカーネルに興味を持ち、関連書籍を読み漁ったり実際にコードリーディングを行ったり、カーネルモジュールを書いてみたりしているのですが、常に新たな発見と驚きを与えてくれます。 カーネルは巨大且つブラックボックスになりがちで深いところに潜るのは最初少し敷居が高いようにも思えますが、とても身近な存在であるが故にその中身が見えてくるとコマンド1つ打つにしても見方が変わってきますし、またLinuxを触るのがより楽しくなります。 そんなこんなでマイペースにやっているのですが、身近に「カーネルが好きです」という人はあまりおらず日々一人黙々とやっていることの方が多いので、ぜひ皆さんにもその楽しさを知ってもらおうと今回カレンダーに参加しました
はじめに この記事はかの素晴らしいA brief look at Atomic Componentsの和訳です。 https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5 Vue.jsでアトミックデザインをやって上手く行かなかった時に出会った記事です。 著者から直接翻訳許可は得ています。 我々日本のフロントエンドエンジニアがわかりやすいように多少表現を変えている部分もあります。 それでは記事をお楽しみください。 Atomic Componentsの簡単な見方 モックアップを簡単にリアルタイムアプリに変える方法 Atomic Componentsは、扱うデータが多い、スケーラブルなWebアプリケーションとモバイルアプリケーションの作成と管理を容易にするためにPatternlab.ioのチームによ
qiita.com/k-okada
Vue + TypeScript + Nuxtの書き方 概要 Vue使いたい!Nuxt使いたい!Vue3系からは、Typescriptを利用しているらしい! ということで、TypeScript使ったことないので、勉強がてらメモ & リンク集。 (TypeScript部分は動作確認を全てしているわけではないので注意!) TypeScriptとは? マイクロソフトが開発したaltJS(JavaScriptの代替言語、コンパイラーによって、JavaScriptに変換される) 特徴を簡単に言うと、静的な型システムとクラスベースが使えるJavaScript(ただ、クラスベースの開発は、ES2015でもできる) 基本 変数の定義時には、型を宣言する。 デフォルトでは、全ての型に対して、null / undefinedを代入可能。これは、tsconfig.jsonで代入不可能に変更可能。 let nam
はじめに こちらがEvan Youさんが9月30日に書いた原文です。 https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf この中から一般的な利用ユーザーにとっては把握しておかなければならない重要な変更点、破壊的かもしれない公開APIの変更点のみを抜粋します。 編集リクエストどんどん受け付けています! TL;DR render関数とスコープ付きslotの構文以外は、互換性ビルドを介して同じままにするか、2.x互換にすることができます。 Everything except render function API and scoped-slots syntax will either remain the same or can be made 2.x compatible vi
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコードFacebookfluxVue.jsVuexvue-router 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespac
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです! 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの
前置き フロントエンドを開発する場合、なんとなくでFluxデザインパターンを実装したライブラリを使うことが良くあります。 それらなんとなく使う人の動機は大抵 なんかイケてる感があるのでとりあえず使いたい でしょう。 そのせいでFluxデザインパターンを正しく理解しないで使った場合には当然のように、データが単方向に流れて幸せになるのではなく、無駄にでかい機構で出来たグローバル変数を使って、著しく生産性を下げ、技術的負債は溜まっていくでしょう。 今回はそれらの悩みを感じ始めた方に対しての Fluxデザインパターン を正しく理解するのを目的とします。 また、その上でVue.jsとVuexの結合パターンの1つを提案出来たらと思います。 ※ 私はVue.jsとVuexでアプリを開発しています。React Reduxで業務をしたことがありません。それを前提とした上での話になります。 ※ 2018年6月
はじめに 基本的に Vue は子要素の代入演算子は感知しません。 しかし、Array は公式が公表している、ラップした変更検知メソッドを利用して、操作をすればやりたい事はほぼ全て実現できるでしょう。 これらはAirbnb lint ruleから得られた経験から来た知見です。結構使いやすい。 ; セミコロンを末尾に付けたくない人も多いと思いますが、そこはruleを上書きすればまぁ良いでしょう。 push や pop 程度など、まぁ知ってるでしょうていう軽いのは省いています。 ゴール コンポーネントとストアの記法の統一 配列辺 規定回数繰り返す よく見るairbnb lintで怒られるコード
目的 フロントエンドを開発する上でUIコンポーネントを区分する際に問題が起きました。 UIコンポーネントを区分せず、フラットに開発すると、1サービスで軽くUIコンポーネントが3桁ぐらい同一ディレクトリで無法地帯のように散乱されるのは想像に難くないでしょう。(事実そうなりかけて解決策を探した結果この記事を書いています それを解決するためにAtomic Designを参考にしようといくつかの方のAtomic Designのスライドショーを見ましたが、それらのスライドショーの内容の通りやっても上手く行かない事は明白でした。 調査した所、Atomic Designをフロントエンド界隈では使っている所はとても多かったです。 そんなに広まっている設計がこれほどまでに薄いものだとはどうしても思えなくて、原文を探し呼んだ所、とても重要な部分が他のスライドや記事では抜けている、または間違った解説をしていたの
私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか?などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。
概要 Atomで選択した画面に他人を簡単に招待してGoogleスプレッドシートみたいに簡単に共同編集できるよ 編集した内容は向こうにリアルタイムで反映されてるからまるで隣にいるような感覚になれるよ 技術 peer to peer WebRTC Atomバージョン Atom 1.22以降のバージョンが必要 評価 良い点 本当にリアルタイム編集 一緒に実装する時や、アドバイスが欲しい時にすぐ伝わって便利 その人がどういった経緯でそのコードを書いたのか追えるのが良い 悪い点 部屋に入る際に失敗することが結構な頻度である 共有した画面に表示するファイルをころころ変えられると、関係ない行にタイプの続きを打ったりしてしまう 確認したかった linterなどのパッケージは、編集者のAtom設定が反映される 感想 Atomのパッケージ色々出ていて、やっぱコード解析などは老舗で有料のIntelliJ IDE
machine: timezone: Asia/Tokyo php: version: 7.0.4 node: version: 6.3.0 post: - npm install -g npm@3 environment: APP_ENV: testing APP_KEY: "入力してください" DB_HOST: 127.0.0.1 DB_CONNECTION: mysql DB_DATABASE: circle_test DB_USERNAME: ubuntu DB_PASSWORD: "" STORAGE_DIR: /tmp database: override: - "php artisan migrate" - "php artisan db:seed" test: pre: - echo "-----start test-----" override: - vendor/bin
// これをtrueにしたら、毎回データベースがリセットされる。 protected $resetDatabase = false; /** * Creates the application. * * @return \Illuminate\Foundation\Application */ public function createApplication() { $app = require __DIR__.'/../bootstrap/app.php'; $app->make(Illuminate\Contracts\Console\Kernel::class)->bootstrap(); // 接続するデータベースをテスト用のものにする。 \Config::set('database.default', 'test'); return $app; } // テストメソッドが起動さ
{ "message" : "Validation failed", "errors" : { "identify" : [ "The identify is invalid format", "The identify is too long", ], "password" : [ "The password is required", ], } } 3.柔軟性 httpパラメータで取得するパラメーターの制限、絞り込み、並び順を指定可能にしよう。カンマ区切りで複数条件可能! * fields : 取得したいパラメーター * getNumber : ページ数 * pageSize : 1ページの件数 * sort : 並び替え * q : 文字列の部分検索 例:/companies/:companyId?fields=data&q=サンプル&sort=id,name 注釈:頻繁に使用する条
PHPで超簡単自作APIフレームワーク 目的 JSONの勉強 製作動機 JSONを返すって普通に言ってたけど、JSONを返すって何。。。? 対象者読者 JSONの説明をしてって言って、パッと具体的に説明できない人 事前準備 JSONがそもそも何なのかわからない人はこちら urlパースがよくわからない人はURLを取得できる$_SERVER['PATH_INFO'] 動的言語機能が良くわからない人は動的に呼ぶクラスを変更できる動的言語機能 関連記事 PHPで超簡単自作フレームワーク 補足 ルーティング等が搭載されていないのは、本記事はあくまでJSONがメインだからです。その内ルーティングクラスやORマッパーを搭載したフレームワークも公開する予定です。 作ってみよう 今回実装する内容 1.urlの初めに来るurlに相対したcontrollerを呼ぶオートローダー機能 例:localhost/ap
qiita.com/k-oshima@github
OS X コマンドライン版cc (Clang LLVM cc)のインストール方法 (Xcode CLI / Command Line Tools for Xcodeのインストール)MacMacOSXXcodexcode5 Xcode GUIインストール不要でBoxenをインストールする準備。 ※以下の手順の前にADC (Apple Develoer Connection)には登録済みとする。 ダウンロードとインストール https://developer.apple.com/downloads/ を開く。 検索窓に「xcode」と入力する。 検索結果から Command Line Tools (OS X Mountain Lion) for Xcode - October 2013 とか Command Line Tools (OS X Marvericks) for Xcode - La
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く