はてなブックマーク

はじめに Vue.js #4 Advent Calendar 2017 7日目の記事です。 ここ３年以上、WebフレームワークにRails４系を使ったお仕事を色々やってきてます。 フロントエンド側はそれぞれの現場で色々なものを使ってきたのですが、今年は色々タイミングが重なって、Rails4系の環境にVue.jsを使った開発をしてきたので、この１年の取り組みについて紹介しようと思います 何となく想定してる読み手の人のイメージ Rails4ベースのサービスの開発に関わってる しかもそのサービスは1,2年ほど運用しててそれなりの規模になってる 何らかのJavaScriptフレームワークを採用したいけど、色々選択肢があって結局先に進めない という感じの人をイメージしながら書いてます。 ここでは書かないこと Rails４＋Vue.jsでのSPAの開発のTIPS的なモノには触れていません。（逆に自分が

はじめに Re:dashを利用したいという社内ニーズに応えるために環境構築したのですが AWS環境をバリバリいじるのは今回が実は初めて 先代が構築した構成をベースに作業 という状況で作業をしてて少しハマったこともあって自分用にメモとしてまとめました。 要点だけ先に書くと、ELBのヘルスチェックの設定が正しくなかったためなので、似た構成でハマった方がいたらそこを確認してみるのが良いのかと思います。 やりたいこと 当面の目標として以下を考えて作業しました Re:dashが稼働してるサーバーにインターネットからアクセス ひとまずBasic認証を設定 公式ドキュメントにConfigure the domain(s) you want to allow to use with Google Appsという記載あったので近いうちにそっちの設定に変更するかも 本番稼働してるRDS（MySQL）のリードレ

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

hostname = window.location.hostname protocol = window.location.protocol port = window.location.port rootURL = "#{protocol}//#{hostname}:#{port}" $('#tasks-list').on 'click', -> params = { url: this.rootURL + '/tasks.json', method: 'GET' } $.ajax(params) .done (items) -> elements = [] items.forEach( (item, index) -> elements.push( "<tr><td>#{item.title}</td>" + "<td><strong data-task-id=#{item.id}

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

単語同士の相関関係、例えば Rubyと関連がある単語ならRuby on Rails PHPと関連がある単語ならCakePHP CakePHPと関連がある単語は、PHPとRuby on Rails という状態がこんな感じ↓で可視化されてると、色々と仕事で役立ちそうというのがわかって必要になって作っていました。 仕事で作った処理のベースとなる部分の処理だけを抜き出してサンプルアプリを作り処理のキモになりそうなところをちょっと解説してみようと思います。 解説にあたって コード1つ1つの解説は大変なので バックエンド側 フロントエンド側 でそれぞれポイントになりそうなコードを引用しながら解説することにします。 ソースコードはGitHubにあります 手元の開発環境など Mac OS X 10.11.2 Ruby 2.2.2 rbenv利用してインストール Rails 4.2.2 AngularJS

はじめに フロントエンドなエコシステムだと、AngularJS 使った開発だとテストランナーにKarmaとかを選択するかと思います。 （フロントエンドに詳しい人が他にいないという事情があって）Ruby/Railsなエコシステムの中でどうにかして、Rails＋AngularJSな構成下で、JavaScriptのテスト実行環境をうまいこと構築出来ないと模索する中で最近教えてもらったteaspoonを活用することで自分がイメージしたことが出来たのでその流れをまとめておこうと思います。 teaspoonとは？ Javascript test runner for Rails. Run tests in the browser or headless with PhantomJS, Selenium WebDriver or Capybara Webkit. teaspoon ということでRails

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

はじめに Instagramのサイトでこ任意の写真を表示してる段階でコメント欄の下の方にあるボタン（赤枠で囲った所）をクリックすると、埋め込みコードを取得できる画面が表示されるかと思います この埋め込みコードですが、一見するととても複雑なのですがちょっと調べてみたら実は不要な情報がたくさんあることがわかりました。 以下に、埋め込みコードの中から最低限必要な情報が何なのか解析した一連の流れをまとめました 検証した環境 Mac上でRailsのThin web server (v1.6.3 codename Protein Powder)を使って確認しただけです。 作業にあたって 自分がフォローしてるアカウントでBrewDogというアカウントのこの写真を例にしてます。 ※どうでもいいけどPunkIPAは昔のボトルデザインの方が好みだったなぁ・・ オリジナルの埋め込みコード 埋め込みコードをコピー

はじめに Railsで業務システムっぽいものを開発しているのですが、システムの性質上、それぞれの画面での入力項目が多いこともあり、要望として下書き機能が必須という状況になってました。 当初は下書き機能を提供するgemを導入してサクッと終わらせようと思ったのですが仕様を考えるとちょっとマッチしない部分があったり、あまりメンテされてないような感じだったりと採用するのに不安を感じたので、独自に実装しました。 ある機能の実装方法や便利なgemの情報は色々見つかるのですが、 今回の下書き機能に限定しないと思うのですが、ある仕様を満たすような機能を実装する過程について情報をまとめておくことで、似たようなことに直面した方の参考になるかと思ってまとめることにしました。 過程はどうでもいいのでコードを知りたいっていう方は最後の方にコードを貼ってありますのでそちらをご覧いただければと思います。 今回の仕様につ

ACS上に登録されてるデータを抽出して表示するようなチュートリアルです 開発環境 OS X 10.8.5 Titanium SDK 3.3.0.GA XCode 5.1.1 開発環境補足 以下環境だと**[TiUtils isIOS8OrGreater]: unrecognized selector sent to class 0x582f64"**というエラーが表示されて動作しませんでした。 （ただ私の以下環境はXCode5とXCode6とが混在してて、メッセージ的にもiOS8っぽい内容出てるから、混在してるのが要因の可能性あります） Mac OS X 10.9.5 Titanium SDK 3.3.0.GA TitaniumClassic環境です XCode 5.1.1 概要 地図情報を活用したサンプルアプリ 今回作るアプリケーションのイメージ 地図情報を活用したサンプルアプリ開発 地

はじめに 現在、Titaniumでの開発をマンツーマンで教えてる方がいて、Classic環境でひと通りの基礎的なことをマスターしてもらったので、今度はこれをふまえてAlloyでの開発・・と思ったんだけどサンプルアプリ＆解説がないことに気づきました(^_^;) で、自分のブログで以前まとめた記事があったのでそれを流用しつつ、自分で記事を書くことにしました 応用が効きそうな分野で言うと、メイン画面→詳細画面に遷移するというようなアプリをイメージしてます 自分の実行環境 Mac OS X 10.9.5 Titanium SDK 3.3.0.GA XCode 5.1.1 alloy 1.4.1 Titanium でAlloy用の新規プロジェクト作成する File→New →Mobile App Projectと進む 左側のタブでAlloyを選択。右側はひとまずTwo-tabbed・・のテンプレート

前置き 現在、Ruby/Railsでの開発について教えてる人がいるのですが、pryやirbで日本語入力を可能にするという記事を見つけて 「そういえば、お互いにPryの環境で日本語入力できず不便だったので環境を見なおしましょう！」 と誘って手順に従って作業したのですが、その後互いにハマった（ハマってる）ことがありました。 トラブル解決の時に 現在使ってるRubyのパスはどこか？ 現在使ってるRubyが参照してるgemのパスはどこか？ インストール済のgemってどうやって確認するか というのが恥ずかしながらすぐにわからなかったので調べたことを書いておきます 私の環境 Mac OS X 10.9.5 Ruby rbenvを利用 ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-darwin13.0] 現在使ってるRubyのパスやRubyが参照して

はじめに Titanium SDK 3.1以降、Titianium.Facebookモジュールではなく、Modules.Facebookに変更になってます。（詳しくは公式サイトを） モジュールの導入時のセットアップで多少異なる点があるけど基本的な使い方としては大きな変更は無くその点での戸惑いはなかったのですが、Modules.Facebookを利用してACSへのユーザーログインでFacebookアカウントを利用する処理方法について情報がまとまっておらず、仕事で必要だったので調べたものをまとめることにしました。 想定する方 一応以下のような方を想定してまとめてみました。 Titanium Mobileでサンプルコードを書いたことはある ACSという言葉は聞いたことがある OAuthの概念はなんとなく知ってる やりたいことはシンプルなのですがそれに関連するベースの知識が色々問われてくるため関連

※分割したファイルを読み込む処理の説明が一部漏れていたため追記してます。（2014年12月25日 15時35分 はじめに jQueryをメインに開発を進めていて、それをベースに機能追加していき、気づいたら肥大化・・・ こんな状況を改善するために 別のライブラリを導入したいし必要に応じて最近主流のJavaScriptライブラリやフルスタックなフレームワークに移行したい けど、テストも書かれてないからいきなり手を付けるのは怖い まずは内部構造を把握しながらリファクタリング という結論になったのはいいけど、どこから着手すればいいんだろっていうので困ってるという環境って少なからずあるのかなと思ってます。 テキスト要素をクリックすると、編集画面に切り替わり、編集後にその内容が反映されるようなこのような↓サンプルアプリを題材にしてどのようにリファクタリングするのかをまとめてみました。 フロントエンドJ

はじめに前置き CakePHPなどでWebアプリケーションを書いてて、JavaScript側のコードが思ったように書けずに苦労するケースが割りとあるのかなと思ってます。 その要因となるものは色々あると思うのですが、考えられるものの１つとして、PHPでのクラス定義とJavaScriptでのクラス定義とがうまく対比できない所にあるのかなと思って、参考になる情報がないかググってみました。 PHPとJavaScriptにおけるオブジェクト指向を比較するというスライドは情報はとてもまとまってるのですが、自分が探していたそれぞれの言語でのクラス定義の方法を対比させるようなコード例が出ておらず、しかたがないので自分でコードを書いて対比させて折角なのでドキュメントにまとめることにしました。 注意 JavaScriptでのクラス定義の方法は色々なアプローチがあると思うのですが、自分がなれ親しんでるCoffe

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

前置き的な話 Facebookグループにアップしたい写真がいくつかあったのですが 元画像の解像度が高い そんなに回線速くない（スマフォをテザリングして利用してて、）環境 という状況だったので、だったらリサイズすればと思って調べたついでに過去、自分のブログにまとめていたのですが、Qiitaで検索する機会が自分の中であがってきたのでこっちにもまとめることにしました。 なお、最初GraphicsMagick for node.jsなgmというモジュール試したのですが、サンプル通りにやってもリサイズ出来なかったので、NODE.JS MODULESのresizeタグで一番上にあったeasyimageを試したら、意図したように動作したのでこちらを利用しました。 利用するための準備 ドキュメントにも書いてありますが、このたぐいの画像処理なモジュールはImageMagickを利用して処理するようで、まずそ

最初に前置き 現在、仕事で開発してるアプリで、位置情報と連携するものを開発してるのですが、ユーザさんがどこで、どのような機能を使ってるのかを後々把握できるような仕組みが必要になりました。 Google Analyticsのネイティブモジュールは古いのしか見つからない こういうのを実現するためのおそらく最適な手段は、Google Analytics for iOSだと思われ、実際にGoogle Analytics - Titanium Appcelerator Moduleというものがだいぶ昔からあります。 ただ、 NOTE: This module is no longer actively being developed. You are welcome to use/update the code but there is the possibility that it will no

前から気になっていたRestAPI Adapterを触る機会が増えてきて利用方法がなんとなくわかってきたので、QiitaのWebAPIから投稿情報を取得してTableView使って表示するすごく簡易的なビューワーアプリを作ってみました。 自分の環境 OS X 10.9.5 Titanium SDK 3.4.0.GA XCode 6.0.1 Node.js v0.10.13 alloy 1.4.1 CoffeeScript 1.7.1 開発前の事前準備 Alloy用の RestAPI Sync Adapter の配置 PROJECT_FOLDER/app/assets配下に、alloyフォルダを作成して、その中にsyncフォルダを作成します Alloy用の RestAPI Sync AdapterというのがGitHubにあるのでダウンロードして、上記作成したsyncフォルダに配置します。最終