サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
breaktimes.hatenablog.com
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
こんにちは。PR TIMESエンジニアの落合です。 前回の記事(Chefを使ってサーバー構築運用! PR TIMES導入編! - BREAK TIMES)で、 Chefの簡単な概要と、導入方法を簡単に解説させていただきました。 今回は、具体的なChefの活用法と構築方法をご紹介させていただければと思います。 PR TIMESにおけるChefの活用について 現在PR TIMESでは、開発環境、ステージング環境、プレビュー環境、本番環境が存在しています。 それぞれ、開発環境・ステージング環境には、WEBとDBが入っており、プレビューと本番環境では、 WEBとDBで別のサーバーを使用しています。 これらを上記の図のように、Windows上の作業マシンからknife-soloを実行して、 本番への適応を行えるような仕組みの構築を進めています。 それでは、実際にどのように、構築を進めているかをご紹介
こんにちは☆ PR TIMES エンジニアのうさみです 少し前に人感センサーと連携したアプリをつくりたい!ということで、どう実現しようかなぁと検討しました breaktimes.hatenablog.com そもそも「人感センサー」という言葉が聞き慣れないよ・・・ という方もいらっしゃるかと思いますが、コンビニへ入店した時に鳴る音や、お家の玄関付近を通った時に点灯する明かりを想像していただけるといいかなと思います 「人が来たよ! 音を鳴らすよ!」「人が来たよ! 明かりを点けるよ!」 と、人の所在を検知するセンサーのことを人感センサーというのですね☆ 人感センサ - Wikipedia まずはその人感センサー自体をどうしよう?ということで、超小型PC「Raspberry Pi」で自作する方法と、SONY製スマートDIYキット「MESH」の人感タグなるものを利用する方法のどちらかで検討しまして
フロントエンジニアの本間です。 今回は業務スピードが上がる便利なGoogle Chromeの拡張機能を紹介します。 エンジニアに限らず、色々な人が使える汎用的な物もご紹介します。 使えそうな物があれば幸いです。 まずはこれ 1, chrome.google.com Webデザイナーの方は必須!ブラウズ上ならどこでもカラーコードを調べらます。操作も簡単、調べたいところでクリックするだけ 2, chrome.google.com 先ほどのピクセル版です。どこでもピクセルが図れます。こちらの操作はドラックするのみ! 3, chrome.google.com これは表示しているサイトのhtmlをチェックしてタグの過不足などを検出してくれます。初歩的なミスを指摘され、赤面する前に入れときましょう。 4, chrome.google.com サイトのキャプチャを取ってくれます。全体、部分キャプチャ、簡
PR TIMESフロントエンジニアの山田です。 AMPに関する前回の記事で導入の顛末をまとめました。 AMP対応はGoogleの検索結果にも影響!PR TIMESへの導入記。 - PR TIMESデザイナー&エンジニアブログ BREAK TIMES 実はその後もいくつかの施策を試しながらアクセスの増減を見ていました。 そうした中でさらにAMPへのアクセスを増やすことが出来ましたので、まとめてみます。 こちらが今回の施策をおこなう前後でのAMPページヘのアクセスです。 今回の施策を実施後のアクセスを見ると10〜20倍もPVが増え、実施前がほとんど0に近くなって見えるくらい伸びています。 ここで実施したこととは、「構造化データをきちんと整えること」です。 これによって検索エンジンにきちんと情報を理解してもらいやすくなり、SEO的にも効果が上がってきます。 構造化データを検索エンジンが読んで理解
はじめまして!PR TIMES エンジニアの宇佐見です。 今年の1月にPR TIMESの開発チームにJOINしまして、主にサーバーサイドの開発に携わっています。 簡単に自己紹介させていただきますと・・・ JOINする前はエンジニアとしてFlash/FlexによるRIAやサーバーサイドの開発、WEBデザイナーというポジションでデザインしたり時には紙媒体のイラストを描いたりしていました。 直近ではiOS/MacOSのアプリケーション開発を得意とする企業さまにてアプリ開発をしていまして、技術書籍を出されている社長さま直々に開発の極意を日々叩き込まれながらアプリ開発の楽しさを感じていました。 PR TIMESでもアプリの開発に携われるといいなとこっそり思っています。 前置きが長くなりましたが・・・ 初投稿となる記事は、私の大好きなキラキラ☆*:.。. した演出、パーティクルの描画をSwiftで実装
こんにちは。PR TIMESフロント・エンジニアの山田です。 このたびBREAK TIMESではWEBエンジニア・デザイナーの有益な情報交換の場として定期的にセミナーを行うことが決定いたしました。 第1回目は「HTML5とPDCAサイクル」をテーマに、制作の流れを追うような3セッションを予定しています。WEBに関わる制作者として必要な技術や知識を得ることができる、またとない機会ですので、奮ってご参加ください。 また、セッション終了後には懇親会も予定しております。豪華なケータリングやビールなどのドリンクをご用意していますので、他の参加者や講師の方々と交流を深めてください。お食事が足りなくなってしまった場合は、ピザなどのデリバリーを追加することも検討していますので、大いに食べて飲みましょう! (写真はイメージです) BREAK TIMES NITE VOL.1 -HTML5とPDCAサイクル-
こんにちは。PR TIMESエンジニアの落合です。 主にWEBアプリケーション開発を担当しているのですが、 最近は開発環境構築や、インフラ周りも担当しています。 前回は開発環境自動化というネタで話させてもらいましたが、 今回は、Chefで開発環境を開発したお話をさせてもらいます。 vagrantを使用する事によって、簡単に環境を共有する事は出来ますが、 Peclなどのライブラリを開発していく上で追加した場合、 毎回指示書(手順書)などを作成して情報の共有を図る必要がありました。 そこで、Chefの登場です! Chefとは? Chef社が開発している「インフラフレームワーク」とか「構成管理ツール」と言われるツールです。 通常サーバーを構築する場合、OSのセットアップからネットワーク設定や、ミドルウエアのインストール、各種設定やチューニングを行います。 またその際、設定手順書も同時に作成してい
PR TIMES エンジニアのうさみです。 iOSアプリを開発する機会がありまして、テーマカラーの値を指定するとそのテーマカラーの画面に切り替わる仕組みを取り入れることにしました。 テキストの色や背景色は下記のようにプロパティを変更すればいいだけなので、簡単に実現できますね。 UILabel *label = [UILabel alloc] initWithFrame:CGRectMake(0, 0, 100.0f, 20.0f)]; label.textColor = [UIColor redColor]; UIView *view = [UIView alloc] initWithFrame:CGRectMake(0, 0, 100.0f, 100.0f)]; view.backgroundColor = [UIColor greenColor]; この仕組みを実装している中で、例えば
こんにちは。PR TIMESフロント・エンジニアの山田です。 来たる2014年10月30日(木)、《TECHコン》なるエンジニア交流イベントを開催します! ■《TECHコン》とは? エンジニア同士の交流を「合コン」のようなシステムで楽しむ、それがTECHコンです。 初めての会話をしっかりサポートします。 ・エンジニア交流会です! ・男女の出会いイベントではありません。 ・会場にはお食事をご用意。参加費無料です。 ・複数台ある食事テーブルを、決まった時間ごとに席替えしていくシステム。 ・1回の参加で必ず複数グループと知り合うことができます。 ・エンジニア同士の情報交換に加え、PR TIMES社員と異業種交流もできます。 ・「コーディングQuiz」など技術的レクリエーションもご用意。エンジニア脳も活性化。 ・Quiz正解1位の方にはiPad miniをプレゼント。 和やかな雰囲気の中、食事を楽
PR TIMESのサービス説明ページではHTML5を使って動画を埋め込んでいます。 しかしただ埋め込んだだけでは、垂れ流しとなり動画を適切に見てもらうことができません。 そこでjavascriptなどから動画を制御することで、他のコンテンツを見るときの邪魔にならず、また閲覧者に適切に見てもらえるようにしました。 まずvideoタグを使って動画を埋め込みます。 このときにidを忘れずに設定しましょう。 Videoタグ非対応のブラウザでは、objectタグを挟むことによって動画を表示させることができます。 <video width="1600" height="550" id="prvideo" autoplay loop poster="video.jpg"> <source src="video.webm" type='video/webm;codecs="vp8,vorbis"' />
2015年ももう少しで終わり、新たな年も始まりますね。 年が明けると卒業まで1年少しとなった学年の方々は、就職活動に向けてそわそわしてくるのではないでしょうか? すでに活躍されているエンジニアでも年が明けたら心機一転、転職を考えている方もいらっしゃることと思います。 そこで今回はPR TIMESではどんな体制で開発しているのか、どんなエンジニアを求めているのか、そんなことをお話します。 PR TIMESのサービス まずPR TIMESで運営している主なサービスにはこんなものがあります。 ・プレスリリース配信サービス 「PR TIMES」 prtimes.jp ・カスタマーリレーションサービス 「Tayori」 tayori.com ・WEBクリッピングサービス webclipping.jp ・ソーシャルメディアユーザーのためのモニターサービス 「conecc」 conecc.jp ・ブログ
PR TIMES エンジニアのうさみです。 3月2日から3月4日までの3日間、東京・渋谷にて try! Swift 2016 が開催されました! 今回、PR TIMESはシルバースポンサーとして参加させていただきました。技術的なことはもう少しSwiftの技術力がついた頃に触れるとして、イベントに参加して感じたことを少しだけ・・・ PR TIMES のロゴ、ありました! イベント中はこちらのネックストラップを装着です☆ try! Swift が開催されたのが今回初ということもあり、ご存知でない方も多いかと思いますが、公式サイトでは以下のように紹介されています。 try! Swiftは世界中のSwiftデベロッパーが一堂に会し、知識や技術を互いに共有し高め合うことを目的としたカンファレンスです。 http://www.tryswiftconf.com/ try! Swift (@tryswif
PR TIMESフロントエンジニアの山田です。 6月20日から一週間、世界3大広告賞のひとつカンヌライオンズの視察に行かせて頂きました。 送り出して頂いたPR TIMESには感謝しています。 今年はヘルス・イノベーション・エンターテインメントとそれぞれの2日間ずつフェスティバルが行われたのですが、エンジニアとしてはやはりイノベーションに興味があるところ。 そのあたりも交えてレポートします。 会場 フェスティバル全体がフランスのカンヌ市にあるパレ・デ・フェスティバル・エ・デ・コングレという海辺の会場とその周辺で行われます。 パレ・デ・フェスティバル・エ・デ・コングレはカンヌ映画祭でもレッドカーペットが敷かれ、よくメディアにも登場するので、見覚えのある方もいらっしゃるかもしれません。 会場正面のメインモニタにはSnapchatの大きな広告。やはりいま勢いに乗っていますね。 屋外のステージではセ
あけましておめでとうございます!! チーフエンジニアの落合です! それでは、新年1発目のネタですが・・・・MongoDB3.2です! 現在、PR TIMESで扱っているサービスに、MongoDBを導入検討を行っております。 導入する事を前提に、複数台のサーバーを用いて、 シャーディング構成(レプリカセットは無し)を作成しましたので、 本日は、構築手順を報告したいと思います。 前提 まずは、以下の通りに3台のVPSを開発環境として用意しています。 今回は、さくらインターネットのVPSを使用し、スイッチを使ってプライベートネットワークを構築しています。 サーバー名* プライベートIP* OS* mongo01 192.168.0.1 Centos6.5 mongo02 192.168.0.2 Centos6.5 mongo03 192.168.0.3 Centos6.5 インストール手順 Mo
PR TIMES エンジニアのうさみです☆*:.。. 8月20日に、東京・練馬にてiOSDC Japan 2016が開催されました! 「ブログを書くまでがiOSDC!」というラストでイベントが閉幕してから既に1週間・・・みなさんがもう別の勉強会等へ足を運んでらしたりする中、私はあの日の余韻を今もなお感じているところです・・・(ご、ごめんなさい) iosdc.jp iOSDCは20日だけではなく、主催者様のすばらしいご判断で19日夕方より前夜祭が開催されることとなり、iOSエンジニアにはたまらないトークが1.5日間!ぶっ続けで繰り広げられました! 練馬にある施設のココネリホール☆ 前夜祭の受付が開始されたところ・・・ 技術的なことは既にたくさんのエンジニアの方々がすばらしい記事を書いていらっしゃいますので、スポンサーとして参加した感想やイベントの様子を写真とともに紹介したいと思います☆*:.
エンジニアの呉です。 今回紹介したいのはコマンドラインから使えるWebブラウザーであるphantomjsです。そもそも、なんでphantomjsを使うのか?それはWebサイトのキャプチャーをとるために、最初wkhtmltoimageを使ったけど、スマホ版はうまく撮れなかったため、いろいろを調べた結果はphantomjsを決めました。 phantomjsについて phantomjsはコマンドラインから使えるブラウザーです。レンダリングエンジンには「WebKit」が採用されています。phantomjsを利用すると、コマンドラインから、Webブラウザーを操作して、ブラウザー内に表示されるデータを取得したり、スクリーンショットを撮ったりすることができます。Webサイトからデータを取り出すスクレイピングにも使えます。 phantomsのインストール方法(centos 6.7) ハードウェアのスペック
エンジニアの深川です。 今回はLINE BOT API Trial で遊んだ内容について書こうと思っていたのですが、 LINE Developers - BOT API - Overview LINE BOT API のCallback URLはSSL通信なので、雑なHTTPサーバを用意すればいいかなという目論みは外れて、ドメイン取得、SSL証明書の発行、WEBサーバの設定とやって、HTTPS接続可能なWEBサーバを用意する必要があります。 今回はLINE BOT API Trial を使う前段ということで、お題がSSL証明書の警告の出ないHTTPSサーバの構築について。OSはCentOS6を想定 ※ 追記:LINE BOT API Trial、追加募集開始とのことです。 【LINE】「LINE BOT API Trial Account」の追加募集を開始 | LINE Corporati
こんにちは。PR TIMESデザイナーの新井です。 UXの重要性は年々高まってきていますが、自分たちのビジネスにどう活かすかを世界の第一線で活躍しているUXデザイナーたちから学べる機会はなかなかないので前年に引き続き、今年もUX Days Tokyoに参加してきました。今回、PR TIMESはゴールドスポンサーをさせていただきました。 2016.uxdaystokyo.com 内容の把握、理解が完全でない点もありますが、今回参加して自分なりに解釈したことをまとめました。 16年のUXワークから学ぶ16のレッスン—Jesse James Garrett Adaptive PathのファウンダーであるJesse James GarretがサンフランシスコにAdaptive Pathを作り、UXコンサルタントとして活動されてきた16年の経験の中で得た16のポイントを紹介してくれました。 1. G
PR TIMESフロントエンジニアの山田です。 クリスマスですね。 PR TIMESが運営するサービスにもエンジニアチームでクリスマス気分を盛り上げる施策をいくつか組み込みましたので、ご紹介します。 お気づきになられた方はいらっしゃいましたでしょうか? PR TIMES プレスリリース配信サービスのPR TIMES。 期間限定で「クリスマス」「サンタクロース」などといったワードで検索したり、これらのワードが含まれているプレスリリースの詳細ページに仕掛けを入れました。あくまでプレスリリースが主役なのでさりげなくです。 ・雪が降る ・タイトルにクリスマスリース ・クリスマスツリー Tayori Tayoriのサービスブログでもご紹介したように、クリスマスに関連するアイコンを追加しています。 tayori.com そしてこちらも12月25日まで限定でフォーム送信時にサンタクロースが登場します。
PR TIMESサービス開発本部の山田です。 8月2日(金)に「BREAK TIMES Meetup vol.1 〜ライトニングトーク『フロントエンド』編〜」を開催します! BREAK TIMESの名前をつけたイベントは久しぶりとなるので、楽しみです。 これから様々なテーマで開催していく予定ですが、再開1回目はフロントエンドのライトニングトーク会。 PR TIMESからは山田とフロントエンドエンジニアの西野のふたりが登壇する予定です。 フロントエンド・エンジニアの方だけでなく、フロントエンドやUIに興味がある方も是非ご参加ください。 懇親会ではケータリングとドリンクもご用意しています。 技術のことやサービスのことはもちろん、会社のこと働き方など気軽にお話しながら交流しましょう! こちらも参加費は無料ですので、是非ご参加ください! お申込み・詳細はこちらから! breaktimes.conn
Google HackFairとは グーグルの最新技術を使った様々なプロジェクトを展示するイベントです。 毎年、Google Developerチームから主催をしていて以下の技術を使ったプロジェクトのみ参加対象となります。 Android Things TensorFlow/ Cloud Machine Learning Tango/ Daydream PR TIMESのサービス開発本部から山田、岡村、吉の3人のエンジニアが作ったプロジェクトが最終参加チームに選定され、10月21日〜10月22日に開催するMaker FaireイベントのGoogle特別ブースにプロジェクトを展示することになりました。 プロジェクトの内容について TensorFlowとCloud Machine Learningを使った顔認証打刻システム ハードウェア raspberry pi 2台にカメラモジュールを付けて
こんにちは。フロントエンドエンジニアの本間です。 今日は$.ajaxファイルアップロードでプログレスバー表示についてです。 UIUXにおいて体感速度を短縮するのは重要で、同じ待ち時間でも進捗表示することによって体感速度が向上します。 さらにプログレスバーの色や模様によっても体感速度が変わってくるという研究結果もでているようです。 gigazine.net PRTIMESでは企業管理画面のリリース配信登録画面でワードファイルをアップする際に使っています。 やり方は$.ajaxの引数にxhrオブジェクトを渡し、progressイベントハンドラで取得します。 $.ajax({ url : api.url, async: true, xhr : function(){ var XHR = $.ajaxSettings.xhr(); if(XHR.upload){ XHR.upload.addEve
プログラムでOfficeの文書を生成する為にはどのようにしたらいいでしょうか。 プログラムを動作させるコンピュータが、Windowsであれば、COMオブジェクトを使用してExcelを出力するのはなんとなく出来そうです。 でも、例えばLinuxでExcelを作成する場合はそれは使えません。 そもそも、Office文書はどんなふうにファイルを作成したら良いのでしょう。 調べてみると、Excel97-2003までのファイルはある特定の形式でファイルを作成すれば良さそうです。 [MS-XLS]: Excel Binary File Format (.xls) Structure これを一から分析してファイルを作っていくのは不可能とは言わないまでも相当な手間が掛かりそうです。 ちなみに、Office 2007からは、Office Open XML(OOXML)という形式のXMLファイルになったので、
PR Timesエンジニアの落合です。 エンジニアのみなさん開発環境自動化してますか!? 今回は、弊社で使用している開発環境についてをご紹介したいと思います。 今まで、開発環境について 今までの環境では、Linuxで開発サーバーを構築するか、自分のWindowsマシンに仮想サーバーを作成したり、 簡単に使えるXamppをインストールしたりと、いろんな環境を試してきました。 開発サーバーを構築すると、複数人で開発する際、コンフリクトが起こり、開発が進みづらくなる時があり、 仮想サーバーを構築した場合、各々のマシンに環境を用意しなければなりません。 また、ミドルウェアの設定等も、各自のマシンで設定されてしまう為、設定漏れが発生する可能性も・・・。 Xamppも非常に有効なツールですが、やはり最終的にはLinuxで動作させる為、 何故かLinuxでは動かないとか、LinuxコマンドをPHPから実
PR TIMES エンジニアのうさみです。今年1月に新オフィスに移転してから、もうすぐで3ヶ月・・・暖かい季節になってまいりました☆ 移転の際に設置した弊社オリジナルの受付アプリも、それだけの間、お客様にご利用いただいているのですが、そろそろ機能改善も含めつつ新しい機能も盛り込んでバージョンアップをしたいなと考えています。 新機能として一番に取り入れたいことは、人感センサーを利用して受付アプリ側でアクションを起こすことです。具体的には、以下のようなことを実現したいです。 お客様がエントランスにいらっしゃったら人感センサーが感知して受付アプリが◯◯◯をする (◯◯◯の箇所は考案中) 人感センサーというと電子工作の知識を必要としそうですが、あいにく私は詳しくはありません。。そんな私でも実現できる方法がきっとあるはず!という思いで調べてみましたところ・・・ありました! 私の技術力の範囲では以下の
PR TIMESエンジニアの吉です。本日はスマートフォンアプリ開発について話したいと思います。 基本的にIOSアプリはSwiftかObjective-C、AndroidはJavaで開発しますが学習コストが必要です。シンプルなアプリあるいはプロトタイプのアプリなど早くアプリを作りたい場合はSwift、javaを使わなくても作れる方法はいろいろあります。 Monaca, PhoneGap, Titanium Mobile, React Native... 私はプロジェクト性質や開発メンバーのスキルなどを考慮してどれを選ぶのかを決めるべきたと思っています。適切な判断をするためには様々な技術を積極的に触ってみるのがいいでしょう。 このブログで紹介したいのはReact Nativeです。 開発元はfacebookでjavascriptを使ってとても簡単にアプリを開発できるのが特徴です。今年のF8イベ
PRTIMESエンジニアの吉です。 弊社ではNode.JSとRedisを使って一部の機能を実装しています。 今日はRedisをつかった集計方法ノウハウをみなさんと共有したく、簡単に紹介したいと思います。 なぜ集計にRedisを使うのか 最近のWebアプリケーションは様々なシーンにおいて大量のデータをサーバーに送ってきます。 特にユーザーのアクセス情報や行動ログ、内部セッションデータの保存などデータ間の関係性が低い情報に関してはNoSQLに保存するのが望ましいと思います。 ここで登場するのがRedisです。 Redisはデータをメモリ上に保持するので非常に高速な処理が可能です。 また、list, set, zset, hashといったデータ構造を持っていて効果的にデータを保存できる点からデータの集計に向いていると考えているからです。 以下、Redisのzsetを使って期間別のデータを絞り込ん
WeChatは無料のメッセージと通話のアプリで 今回ご紹介させて頂くのは「WeChat」というソーシャル系の無料通信サービスです。機能としては日本ですでに爆発的に流行している「LINE」と似ていますが、「LINE」にない機能もいくつか実装されており、海外を含め現在登録者数がどんどん増えています。 中国発の「WeChat」は中国のインターネット通信大手Tencentが提供するサービスで、中国語では「微信」と呼ばれています、このサービスは多数の国で展開されており、昨秋には登録者数がすでに6億人を超えており。今「LINE」の最大ライバルも言われています。 これから何回かに渡って、WeChatの機能からAPIを利用した開発までを詳しくご紹介をしていきます。さっそくですが、自分のiphone5からWeChatアプリをインストールしました。「LINE」と使い方とはほとんど変わりませんが、一番使いやすい
次のページ
このページを最初にブックマークしてみませんか?
『PR TIMESデザイナー&エンジニアブログ BREAK TIMES』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く