はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 巡回セールスマン問題 巡回セールスマン問題(以下TSP)についてご存知でしょうか。 完全グラフと全ての辺の移動コストが与えられた上で、全ての点を１回ずつ通り、始点に戻る巡回路の中で総移動コストが最小となる巡回路を求める組合せ最適化の問題です。 今回の記事の趣旨とは異なるため、ソルバーの詳細及びTSPを解くアルゴリズムの紹介は他の文献に譲ります。(個人的には辺の移動コストが定数でないTSP (dynamic TSP)にも興味があるので追ってまとめたいと思います。実応用としては、渋滞が発生して移動時間が変わる等の状況を考慮することに相当しま

Relayを触り始めた当初、useQueryとuseFragmentって何してるの？何が違うの?ってレベルでよくわからなかったので、 初めてRelayを触る人のために詳しく図解してみました。 そもそもRelayとは Relayは、facebook社(今はMetaか...)が開発しているReactのためのGraphQLクライアントです。 Relayには下記のようなメリットがあります。 取得したいデータの構造をコンポーネントに閉じ込めることができる つまり、コンポーネント内で取得するデータが変更されても他のコンポーネントに影響がでないため、依存関係を気にしなくて良い。 useQueryとuseFragmentの仕組みによるもの → のちほど詳しく解説！ フェッチ・レンダリングの自動的に最適化される クエリの重複フィールドの除去 データに変更があった時に、必要なコンポーネントのみ更新する ▼ 公

※ あくまで自称です。笑 ※ 今後もどんどん拡張していく予定です。 ※ emotion/styled に関しては割愛する予定です。 Emotionとは？ フレームワークにとらわれず使うことができるCSS in JSのフレームワーク。 (styled-componentsと比較されがちだが、emotionの方が後発であるためstyled-componentsができることは基本できます。) 初期設定 利用したいEmotionのパッケージをインストールする Emotion関連のパッケージ @emotion/css フレームワークにとらわれず、Emotionを使用するためのパッケージ。 @emotion/react React用のEmotionパッケージ。 @emotion/styled styled-component っぽい記法で書くことができるEmotionパッケージ。(筆者はstyled-

モダンフロント技術におけるGTMの問題 ここでいうモダンフロント技術は、VueやReactなど仮想DOMを用いられた技術を指します。 仮想DOMなので「DOMが存在しているとは限らない」 要素の表示や要素のクリックなどのトリガーに関して、class名やらid名などDOMの情報に対して条件を絞りイベントを制御すると思いますが、必ずしもGTMがその仮想DOMが正しく検知できるとは限らないです。 仮想は消失したり入れ替わったりするものなので。 そのため、GTMの既存の要素の表示や要素のクリックに依存しない設計を理想とします。 GTMのページビュートリガーが使えない モダンフロント系の技術では、React Routerやらvue-routerなどの仕組みによって、 サーバーサイドを介さずにクライアントサイドのみでページの変更を行なっているケースが多いです。 つまり、History APIで更新して

Help us understand the problem. What are the problem?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

世はまさに、React hooks時代。 React hooks無しにして、Reactは書けない！！という人も多いのではないでしょうか。 その中でも特に「カスタムフック」は、React hooksの便利さをの根幹とも言える、最も重要な機能です。 カスタムフックは自由にカスタマイズできる一方で、設計や実装に悩むことが多くあります。 そんなカスタムフックに、本気で向き合ってみようと思います。 1章 - そもそもカスタムフックとは 自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。 公式ドキュメント: 独自フックの作成 簡単に言うと、React hooksの処理をコンポーネントに直接書くのではなく、 別ファイルに切り出して新しいhooksとして定義した関数のことをカスタムフックと言います。 2章 - カスタムフックを利用するメリット カス

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

QiitaのOGPが可愛すぎて、自分のブログにも導入したい！と思い、 Cloudinaryを使って記事タイトル入りOGPを作成しました。 ▼ twitterに記事を投稿すると、こんな感じ。 Cloudinaryとは？ 画像の加工が得意なクラウドサービス。 APIを使用して、画像の変形・配信などができます。 料金プラン 基本的には無料で使えますが、上限があります。 料金プランに関しては、下記の記事がわかりやすかったです。 参考記事: Cloudinaryの新しいプランを調べてみた SDKが提供されている言語・プラットフォーム サービス開発における言語はほぼ網羅しています。 対応していない言語で使いたい場合も、URLにパラメータを渡して画像を変形することもできます。 参考： https://cloudinary.com/documentation どんなことができるか 下記の記事がわかりやすか

この記事はエイチーム引越し侍 / エイチームコネクト Advent Calendar 2019の10日目の記事です。 前日は、こぼさん(@anneau)の『Vueを使ってサイトを1ヶ月で作った話。そして、それを、1ヶ月使ってリプレイスした話。』でした！ 私も身近で引越し侍　まるごとスイッチを開発している姿を見ていたのですが、膨大な仕様のサービスを、2ヶ月という限られた期間で、スピード感もって開発していることがひしひしと伝わりました。 尊敬する大先輩の記事です。ぜひ読んでみてください！ 本日はぴかぴかの新卒1年生のちーずが担当いたします！ QiitaがPWAに対応していることに最近気づき、以前より記事を読むようになりましたが、投稿は久しぶりになってしまいました アイコンのQiitanのシルエットがかわいいので、スマホのホーム画面にQiitaを追加することをおすすめします はじめに Nuxt.

この記事は Linux上で.envとDocker Composeを使ったvolumesの権限設定を紹介したいと思います 書く理由は Linux上でDocker Composeを使ったvolumesの設定で権限で怒られたから 権限で怒らないためには host(Docker Composeを動かす方)のLinux user id、group idとコンテナの中のvolumesのuser idとgroup idが異なるからです。 これらを同じくすれば治りました 対応内容 setDotEnv.shを実行して、hostのLinux user id、group id、user nameを.envに書いておく docker-compose.ymlのargsを使って、.envにあるuser id、group id、user nameをDockerFileに渡す docker-compose.ymlでbui

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? （自身のblogにもおいてます） 前置き あくまで個人の見解です。 一部誇張または誤解を生むかもしれない表現がございますが、ネタなのでご容赦いただければ。 ミルクボーイさんありがとう。 本編 U: どうもーミルクボーイでーす。お願いしますー。 U: ありがとうございますー。 U: 今、エンターキーをいただきましたけどもね。ありがとうございます。 U: こんなんなんぼあってもいいですからね。 U: ゆーとりますけどもね。 K: あのー、うちのおかんがね、最近流行ってる新しい技術があるらしいんやけど。 U: そうなんや。 K: その名前を忘

Blogを作ろう！ってなったものの、どのHeadless CMSを使えばいいか、全くわからなかったので、とりあえず調査しました。 はじめに この記事はあくまで自分がどのHeadless CMSを使ってblogを作るかを検討するための比較記事です。 欠けている機能説明等も多いと思いますが、ご了承ください。 HeadlessCMS比較記事は圧倒的に下記記事がわかりやすかったです。 4種類のHeadlessCMSを試してみた感想（wordpress/strapi/contentful/microCMS） Contentful 特徴 とにかく高機能、細かく設定できる、かゆいところに手が届く 無料枠 2つのプロジェクト 無料枠 メンバー数 10人 無料枠 レコード数上限 5000個 管理画面のUI データ構造作成 データの形式選択 コンテンツ編集画面 API ちょっとミスったこと markdownは

おはこんばんちは、ゆるすぎて投稿を忘れていたちーずです。(反省) 本日は、IEと戦うためのTipsを、IE滅びろという気持ちを抑えて書きます。 なぜこの記事を書く？ 新卒として働き初めてから、新規立ち上げサイトのCSS設計を担当させていただいた経験がありましたが、 その中で一番失敗したこと、反省したことがIE対応だったからです。 自戒の念を込めて、この記事を書こうと思いました。 基本的なIE対応 まずはじめに、基本的なIE対応をする際に考えるべきことをざっくりと説明します。 1. Can I use でプロパティがIEに対応しているかを調べる Can I useとは、HTMLやCSSなどのブラウザ対応状況が調べられるサービスです。 自分が使用したいプロパティがIEに対応しているかを簡単に調べることができるため、ブラウザ対応しているか不安なプロパティを使う際は必ず調べましょう。 緑　 : 対

@shwldさんのスタイルガイドジェネレータを比べてみた という記事を読んで非常に良い！わかりやすい！とおもったのですが、古くなってしまっていたため、自分でまとめ直しました。 スタイルガイドジェネレータとは？ スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用元 : Webデザインのスタイルガイドの作り方 今回でいうスタイルガイドは、HTML / CSSのルール・規約を集めたものを指します。 スタイルガイドジェネレータはそのスタイルガイドを生成するツールのことを指します。 bootstrapやbulma.ioのドキュメントのようなものを、自分の書いたHTML / CSSで作ることができます。 以下は

import umap from sklearn.datasets import load_digits from scipy.sparse.csgraph import connected_components import matplotlib.pyplot as plt import matplotlib.cm as cm from sklearn.manifold import TSNE import time def main(): digits = load_digits() digits.target = [float(digits.target[i]) for i in range(len(digits.target))] # UMAP start_time = time.time() embedding = umap.UMAP().fit_transform(digits

はじめに この記事は初心者でもwebpackを用いて簡単な環境を構築できるように書いた記事です。 中級者以上でしたらおそらく物足りない記事になるかもしれませんが、初心者には十分な環境を整えることができると思います。 今回用いた環境 macOS Sierra 10.12.2 Node.js v6.9.1 入ってるかわからない人は $ node -vと打ってみてください。 v6.9.1などバージョンが表示されたらおっけーです。 node.jsをまだインストールしていない人は下記のリンク等などを見てインストールしてみてください。 5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】 準備 それでは、環境を作っていく流れをまずはざっくりと説明していきます。 ターミナルを開いて準備しましょう。 1. まずはディレクトリ作成。 普通に

JSONExportとは JSONExportはJSONからモデルのコードを出力してくれるMac用のアプリケーションです。 出力できるもの Java for Android. Java for Android - to use with Realm. Swift Classes. Swift Classes - To use with SwiftyJSON library. Swift Classes - To use with Realm. Swift - CoreData. Swift Sturcutres. Objective-C - iOS. Objective-C - MAC. Objective-C - CoreData. Objective-C - To use with Realm. できること // // RootClass.swift // Model file Gen

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「require 使いたいライブラリのファイル名」 大抵のプログラミング言語では、別々のファイルに分割されたプログラムを組み合わせて、一つのプログラムとして利用する機能を持っています。 他のプログラムから読み込んで利用するプログラムを「ライブラリ」と言います。 このライブラリを読み込むには、requireメソッドを使用します。 open文　URLにアクセスし、 URLを開く charsetメソッド　対象サイトの文字種別(utf-8)を取得 readメソッド　対象サイトのhtmlを読み込む(open文によってURLを開き、htmlを読み込む) doc = Nokogiri::HTML.parse(html, nil, charset) は基本的に謎。 p doc.titleでtitle取得 スクレイピングを用いて理解する。（ここが理解できればサイト完成に近づく!） # URLにアクセスする為

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 動機 ぼくがいま勉強しているJavaScriptのフィードバックを得る際に、コードそのものをWeb上で公開できるサービスはないかと探していたところいつくか見つかったので、まとめ。 Web上でJavaScript実行できる利点 すべてのサービスに共通して、シェアができることが一番の特徴。 自分のパソコンをリモートして見てもらっているような分かりやすさがある。 また、わざわざjsファイル、cssファイルなどを開かさせる手間もなく、一度に俯瞰できるのがコード書く人にもフィードバックする人にも優しい。 JSFiddle 特徴 HTML・CSS・

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?