タグ

2014年4月23日のブックマーク (10件)

  • SVGのパス(線)の一部の色を変える

    SVGのパス(線)の一部の色を変える SVGのパスの色を一部変える方法を教えてもらったので備忘録としてまとめました time2014/03/29 hatenabookmark- 今、こんな感じのSVG鉄道路線図を作っています。 図の中で運休中の部分は色を変えたいなと思ったのですが、どうやらこの一を構成する path 要素は一色だけで途中から色を変えるってのはどうも難しいようです。 SVGのパス(path要素)の一部分だけ色を変えたい。例えば、この路線図のA〜Bだけ色を変えるとか https://t.co/FyeF7Z6AOt — Hashimoto Naoki (@hashcc) 2014, 3月 25 対象の図形はこんな感じ。 コードを抜粋 <g> <path fill="none" stroke="#C30D23" stroke-width="15" stroke-linecap

    d4-1977
    d4-1977 2014/04/23
  • UXデザインとレイヤー思考

    UXデザインとレイヤー思考 UIを考えるだけでなく、その前提となる利用シーンや、その前提となるサービスの価値を、満たされてない所があればきちんと明確にする、あるいは利用シーン全体を俯瞰してどういう状況でサービスを使うのかを明らかにする。そういうレイヤー構造をうまく上下することがUIデザインをする上で必要で、UXデザインの特徴でもあるよねという話 time2013/12/14 hatenabookmark- UX Advent Calendar 2013というユーザエクスペリエンスに関する記事をみんなで書いて繋いでいこうという趣旨の企画があるのですが、今年はこれにのっかって、UXデザインに関する記事を書いてみることにします。 UXデザイン(UXD)や人間中心デザイン(HCD)は勉強してみて、自分の仕事UIデザイン)で日々役立ってると感じるんですが、それはUXデザインの手法を知れてよかったと

  • 【社内勉強会】弊社でGit!実案件での運用

    SVN運用をしていた社内で、Gitの標準化も進めるべく社内勉強会資料を作成しました。 資料作成に当たり、@matsukaz さん@nvie さんの資料を参考にさせていただきました。 ありがとうございました!

    【社内勉強会】弊社でGit!実案件での運用
  • ユーザ登録・API 認証の仕組みを Rails で実現する - ボクココ

    スマホアプリから会員の新規登録、ログインが両方できるようにAPIを作成中。ようやく自前でアクセストークンを作ってOAuth認証が出来たのでまとめておく。 まず何がしたいか? スマホアプリでAPI認証ができるように、OAuthを自前で作成したい。 -> スマホアプリ側ではユーザ名とパスワードを入力すればトークンが取って来れて、そのトークンで各APIにアクセスすればユーザ固有の情報が取って来れるようになる仕組みを作る。 スマホアプリ側でユーザ作成も出来るようにしたい。 -> APIでユーザが作れるようにする。もちろんhttps前提。 環境 gemfile ruby '2.0.0' gem 'rails', '4.0.0' gem 'rails-api' gem 'active_model_serializers' gem 'mongoid', '4.0.0.alpha1' gem "moped

    ユーザ登録・API 認証の仕組みを Rails で実現する - ボクココ
  • Rails の認証で Devise ではなく Sorcery という選択 - ボクココ

    現在 AngularJS と Ruby on Rails 間の認証の仕組みを実装しようとしている。 この際問題になるのは、デフォルトのRails認証の仕組みは、HTMLベースであるため AngularJS で必要とされる JSON でのレスポンスが受け取れない、という点がある。 もちろん、Devise による認証でも Devise::Controller 系を継承することで独自のコントローラをカスタマイズすることが可能だ。だが、これは Devise 側のソースコードを理解し、適切なコードとレスポンスを Devise の慣習にそって実装する必要がある。これがなかなか大変。 そこで登場するのが Sorcery . これは簡単にいえばシンプルな認証の仕組みだけを提供してくれるものだ。 個人的に最も大きな違いといえば、Devise は devise_for :user や devise_for :

    Rails の認証で Devise ではなく Sorcery という選択 - ボクココ
  • チーム開発実践入門を読んで重要なポイントをまとめてみた - Qiita

    チーム開発実践入門 以下に引用しながら私の体験を交えた感想を記載して参ります。 ※先に引用して書いているので、感想がない部分がございますがご了承願います。 理想的なプロジェクト チケット管理システムに課題・障害などを集約し優先度と重要度が分かるようにする できる限り(正しく)バージョン管理システムを利用する 繰り返し再検証可能なCIシステムを用意する 環境の影響を最小限にとどめ、常にリリース可能にしておく すべてを記録して追跡可能にする これまで客先常駐ばかり経験しているので、このような内容を網羅しているプロジェクトには参加したことはありません。 チケット管理やバージョン管理やリリースに関してはルールはありましたが、CIは使用したことがなく名前しか聞いたことがない状態でした。 分散バージョン管理システムを使うべき5つの理由 リポジトリの完全なコピーをローカルマシンに持つことが出来る 動作が

    チーム開発実践入門を読んで重要なポイントをまとめてみた - Qiita
  • ランディングページで平均4.2%の成約率を出すために行っている27の手順

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. おそらく、大半の企業はランディングページで望むだけの売上を得ることが出来ていないのではないだろうか。 もし望むだけの数字を達成できているなら素晴らしいことだ。しかし、大半の方は、どの会社に頼んでも数字は変わらないので、ほとんど諦めかけているかもしれない。 一方、弊社のランディングページは平均で4.2%のコンバージョン率が出すことができている。 また業界別では、賃貸業で18.27%、美容で15.72%、健康品で14.21%、建築業で13.64%、整骨院で7.13%など、業界平均を大きく上回る数字だ。 そこで日は、バズ部がランディングページを制作する上で実際に行っている全ての手順をご紹介する。 これを読めば、高いコンバージョン率を記録して

    ランディングページで平均4.2%の成約率を出すために行っている27の手順
  • Google以上に便利? Bingウェブマスターツールが大幅に進化 ::SEM R (#SEMR)

    Google以上に便利? Bingウェブマスターツールが大幅に進化 Bing ウェブマスターツールも実は活用できる機能はいくつかあるので、Google にしか興味関心がない SEO担当者も、一応は画面を見てみることをお勧めする。インバウンドリンクデータくらいは使い道があるはずだ。 公開日時:2014年04月21日 18:18 日の検索市場は Google検索と Yahoo!検索という2強が90%程度のシェアを占めていることもあり、マイクロソフトの検索エンジン・Bing の存在感は薄い。10代、20代の中には MSN というポータルサイトの存在すら知らないという人もいるのではないだろうか。 さて、その Bing であるがウェブマスター向けに「Bingウェブマスターツール」という、Google ウェブマスターツール相当のサービスを提供していることは覚えているだろうか。SEO業界で働いている人

    Google以上に便利? Bingウェブマスターツールが大幅に進化 ::SEM R (#SEMR)
  • 覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita

    DevTools、使ってますか? もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや

    覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
  • レスポンシブイメージ | Web Design Leaves

    以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 1つの大きな画像をフルードイメージ(下記)で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フルードイメージ(Fluid Image) ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。 ウィンドウサイズより大きい画像でも、ウィンドウサイズ(または親要素の幅)に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法 具体的には、img 要素に対して以下のスタイルを適用する。