信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    FuelPHPでHTML_Emojiを拡張して絵文字メールからHTMLメールを作成、送信する

    HTML_Emojiを使用すると、ガラケから送信されたメールの絵文字を、imgタグに変換することができます。http://libemoji.com/html_emojihttp://libemoji.com/downloadこれは、webページで表示することを前提とした機能なので、EmailパッケージのHTMLなbodyにそのままは使えません。http://fuelphp.com/docs/packages/email/introduction.html以下、FuelPHPでHTML_Emojiを拡張して、EmailパッケージのHTMLなbodyとして使う例です。classes/my/html/emoji.php* HTML_Emojiの配置箇所はrequire_onceの通りです。  'docomo',             'i-mode'   => 'docomo',             'imode'    => 'docomo',             'au'       => 'au',             'kddi'     => 'au',             'ezweb'    => 'au',             'aumail'   => 'aumail',             'softbank' => 'softbank',             'disney'   => 'softbank',             'vodafone' => 'softbank',             'iphone'   => 'iphone',             'j-phone'  => 'jphone',             'jphone'   => 'jphone',             'willcom'  => 'docomo',             'emobile'  => 'docomo',         );         if (isset($carrier) === false) {             $carrier = HTML_Emoji::_detectCarrier();         }         $carrier = strtolower($carrier);         $carrier = isset($aliases[$carrier]) ? $aliases[$carrier] : 'pc';         if (isset($instances[$carrier]) === false) {             $dirname  = substr(__FILE__, 0, -4);             $filename = $dirname . '/' . ucfirst($carrier) . '.php';             require_once APPPATH.'vendor'.DS.'HTML'.DS.'Emoji'.DS.'Pc.php';             $instance = new My_Html_Emoji_HtmlMail();             $instance->_carrier  = $carrier;             $instances[$carrier] = $instance;         }         return $instances[$carrier];     } } classes/my/html/emoji/htmlmail.php* $dir値は調整する必要があります。 cids = array();     }     function _convertCharacter($matches)     {         if (isset($this->_translationTable) === false) {             $this->_initTranslationTable();         }         $utf8 = $matches[0];         if (isset($this->_translationTable[$utf8]) === true) {             $sjis = $this->_translationTable[$utf8];             list($width, $height) = $this->_getImageSize($sjis);             $dir = DOCROOT.'public'.DS.'assets'.DS.'img'.DS.'common'.DS.'emoji_images'.DS;             $file = $img_root.bin2hex($sjis) . '.gif';             $this->cids[] = array( 'cid' => $file,                 'file' => $dir.$file,             );             return '';         } else {             return $utf8;         }     } } 以下、使い方の例です。* HTML_Emojiの標準的な使い方を踏襲しています。* HTML_EmojiがPHP4もサポートしているため、エラー出力レベルを一時的に変更しています。* $emoji->cidsには、Emailパッケージのattachメソッドで使用する情報が入っています。 $from = 'xxx@yyy.zzz'; $to = 'xxx@yyy.zzz'; $subject = 'xxx';   $E = error_reporting(); error_reporting(0);   $emoji = My_Html_Emoji::getInstance('pc');   $body = '絵文字入りのデータ';   $fmt = ' %s '; $html = nl2br($body); $html = $emoji->filter($html, 'output'); $html = sprintf($fmt, $html); $html = mb_convert_encoding($html, 'ISO-2022-JP');   $email = Email::forge();   $email ->from($from) ->to($to) ->subject($subject) ->html_body($html);   foreach($emoji->cids as $cid) { $email->attach($cid['file'], true, 'cid:'.$cid['cid']); }   $email->send();   error_reporting($E); まさかこのブログでの初FuelPHPネタがガラケ関係とは。
  • テクログ

    元技術者(非デザイナー)がWebディレクターに転職するためにした事と、そのメリット

    はじめまして、シューさんです。 ツキイチ企画で、人間毛筆をやらせて頂きました、私です。 今の会社ではWebディレクターなどという大仰な肩書きを頂いておりますが、私はデザイナー上がりではなく、金融・流通システム開発の下流工程で働くエンジニアでした。 一般的なフローだと、Webデザイナーとして就職し、数年経験して業務の中でディレクションにも携わり、ステップアップ先としてWebディレクターになる、というのが普通ではないでしょうか。 それを一切無視して、「なぜこの職業に就けたのか」自分なりに考えた結果と、また、「前職を経てこの職業になって感じたメリット」を、今回はライフハック的に書きたいと思います。 この世から、不幸なエンジニアが少しでも救われますようにと願いを込めて…   そもそも何でWebディレクターになろうと思ったのか? エンジニア時代は孫請けの開発会社で働いていたので、要件定義から関わる事はできず、その辺りは上流SEと呼ばれる元請のしかるべき社員様がやっていたり、マネージャーと呼ばれている年配のエンジニアの方がしていました。 それにより、何が起こるのか? 自分が携わっていないところ(上のほう)から、着手後に追加で来る仕様変更、システム改修と称した仕様変更、バグ発覚による仕様変更(※これは単純に不具合修正ですね)、仕様変更、仕様変更、仕様変更…etc そして、改修によるテスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト… つまりこんな感じ。     while(1){      deviation(); /* 度重なる仕様変更 */      test(); /* テスト漬けの日々 */      private()-i; /* 減っていくプライベートの時間 */      i++;  }  break; /* 無限ループから抜け出せなくて俺は死ぬ */   プログラマ30代定年説、なんていうのを真に受けて「自分もマネジメントスキルを身につけたり、上流工程が出来るようにならなくちゃ!」って思って勉強したのに、来る日も来る日も追加仕様対応、不具合対応、障害対応… もちろんリスク管理などの観点から身についた事も多かったですが、それ以上に疲弊して、すり切れてしまったのが正直なところです。 段々と、もっと自分が興味を持てる分野で働きたいと考えるようになりました。 情報工学科出身だった為に自分にはプログラムを書くことしか出来ないという後ろ向きな理由(今考えると愚かでしたが)から前職に就いていたのですが、 本当はかっこいいデザインとかやりたい、仕組み作りとかもしたい、あと勉強したマネジメントスキルとか、上流工程で要件定義とかやりたい、もっと文化的な生活を営みたい、モテたい!という欲張りな気持ちからこれが全部出来る仕事を考えたら、   Webディレクター   だったのです。   Webディレクターに成るべくやったこと 前置きが長くなりましたが、Web業界で働くにあたって知っておかなくてはいけない事は結構ありました。この記事と重複する部分はありますが、基礎としてこんな事を学んできました。   HTML、CSSの勉強 これは当たり前ですね。ただし、基礎的な範囲までで問題ないと思います。もちろん、深く理解しているに越した事はないですが。タグやプロパティを覚えるのは、フレームワークの関数を覚えるのと一緒です。   Photshop、Illustratorの使い方、基本的なデザインの考え方 エンジニア出身だと、ここが一番ネックに感じることでしょう。アートディレクションも必要になるでしょうし、デザイナーの方に指示を出すときに、言葉を知っているのといないのではイメージの共有具合が全然違います。「間延びして見えるから、タイトル画像のAとWにカーニングを設定して~」なんて言えたらきっとモテます。これは使いまくるしかないのですが、とにかく一通り、ソフト操作のやり方を試しましょう。何を作るためにどんな事をすればいいのか、そのイメージを持っていることが大事です。デザインセンスなんてものは、専門家(デザイナー)に任せたり、色んなサイトや作品に触れる事で後から身につけていければ良い事だと思うんです。   PHP、JavaScript等、サーバーサイド言語の勉強 この辺りは元エンジニアの方ならさほど苦労しないと思います。Webプログラマだった方はもう解っているはずですし。私が使ってきた言語はC、C#、VBなどでしたが、アルゴリズムの組み方はどの言語でも大体一緒です。そのアルゴリズムをプログラム言語に起こすだけ!       でも独学でやるのは不安…なんてあなたに。これらをなんと、タダで教えてくれる所があります。そう! \ ⊂[J( 'ー`)し <ホラたかし!  \/ (⌒マ´   (⌒ヽrヘJつ     > _)、     し' \_) ヽヾ\           丶_n.__           https://www.hellowork.go.jp/              ̄   (⌒              ⌒Y⌒ ハローワークの求職者支援訓練制度を使えば、タダどころか条件さえ満たせば、逆に月10万円もらいながら上記の事を教えてくれます。(※)(お金を貰う為には資産が200万円以下であるとか、色々と制約はありますが…)ついでに、フォトショップ等も学生価格(アカデミック版)で買えます。   ※ただし、こんな記事もあるので学校選びは慎重に…。私が通った所では、授業に対するフィードバックを伝えられる場があったので、「授業の進行ペースが遅すぎます!」なんて言って改善して頂いた記憶があります。また、入学前に面接を実施していると思うので、そこでしっかり学習方針を確かめておくべきです。   私は前職を辞めた後、Web管理者養成科(実践コース)というのに行きました。 「そんなの何の役に立つんだ?」なんて反論もあるかもしれませんが、何も知らない人間からしてみたら、取っ掛かりとしては悪くないかと感じています。 そして4ヶ月間、みっちりとWebの勉強をし、ひたすら「ポートフォリオサイト作り」をしました。 そして、そのサイトのスナップショットに簡単な注釈をつけたものを印刷し、面接に持っていくことにしました。 ↓恥ずかしながら、私が作ったポートフォリオを参考までに置いておきます。(思いっ切り実名出てますが…) ■ポートフォリオ(pdf注意)   就職活動 とにかく今の時代、就職活動は厳しいものになるでしょう。 自分なんか雇ってくれる場所なんか無いんじゃないか?圧迫面接を受けるんじゃないか?そもそもエンジニア上がりの自分、ディレクター志望と言ってもコミュ障なんですけど?不安は尽きないと思います。   でも心配しないで下さい。ポートフォリオを作っておけば、面接の場では基本的に、作ってきた資料を説明すればいいのです。 「あなたを雇う事で弊社に何のメリットがありますか?」なんて怖い質問も、挙動不審になってしまう事も、自分の作品に説得力を持たせられれば関係ありません。 その位、割り切って臨みました。   ・誰をターゲットと想定してこのサイトを作ったか?・何を考えてこのデザインにしたか?・どんな想いを伝えたいのか?   自分で作ったサイトですから、その辺りはちゃんと見えているはずです。それを説明するだけ!ねっ?簡単でしょう? 仕事を始めてから気付いたのですが、それを説明するのってWebディレクターがやる要件定義やプレゼンテーションで大事なポイントなんです。   デザイナーではなく、元エンジニアである強み 下流SEとはいえ、どんな開発でも工程管理などは必須です。やれガントチャートだ、クリティカルパスはどこだ、なんてのはエンジニアの諸兄姉なら馴染みのある言葉でしょう。その考え方って、Web業界でも使います。特に進行管理を行うディレクターには、必須スキルの一つです。 Web制作と開発は進行管理が似ている → 前職で得た知識を生かして仕事ができる! って事です。 またエンジニアであれば、アルゴリズムを組むときに論理的な思考を自然と身につけているはずです。AがBだからCである。って感じで。それって、デザインを推敲するときに大事じゃないですか? だって、「このデザインは何故こうしたか」って説明できないで「ただカッコいいと思ったから」だと、お客さんに納得してもらえるはず無いじゃないですか。そんなの主観ですし。 そしてその逆としても生かせます。つまり、デザイナーに要件を満たすものを作ってもらうためには、どんな情報が必要か?あらかじめ考えておいてお客さんにヒアリングすることもできます。 デザイナー出身でも論理的な思考が出来る方はたくさん居るでしょうが、エンジニア出身だったらそのあたりは必ず持っているスキルなのではないでしょうか。 上記で挙げた事って、強みだと思うんです。アピールポイントや実績なんて無いよ、全然違う業界だし…って悩まないで、そういう切り口で考えれば良いじゃないですか。   まとめると… ・非デザイナーだとしても、開発に携わっていればWebディレクターで生かせるスキルは山ほどある。 ・不安なデザイン部分は、専門の人に分業しちゃうのが一番!だけど理由は大事だからそこは論理的思考で推敲する。 ・求職者支援訓練制度(ハローワーク)は意外と使える。 ・就活ではポートフォリオの説明をガンガンする。 ・Webディレクターになったけど、別にモテませんでした。   という事です。 私はまだまだひよっ子のWebディレクターです。だから、勘違いで思い上がっていることもあるかもしれません。でも、少なくともこれは言えます。 毎日色々なことを吸収して、自分が成長できるのって楽しいですよ。 ただ上から言われた事をやるだけじゃなくて、自分で要件定義から関わった案件が形になっていくのってやりがいがある仕事です! もし、ただ変わりゆく仕様に振り回されているだけの日々を送っているエンジニアの方が居たら、疲れきってボロボロになる前に、Webディレクターを目指してみるっていう道もあるんだよって言いたかったのです。   次回予告 今回は技術的な話から少し横道に逸れてしまいましたが… 今後、テクログではこんな事を書いていこうと思っています。   ・ひよっこWebディレクターが一人前になるために心がけている事 ・案件が炎上するリスクを避けるために準備しておくべき事 ・20代、ソーシャルネット世代に訴える企画の上げ方   この次も、サービスサービスぅ!
  • テクログ

    HTML5の要素について

    技術ブログ、初投稿です。。。初というのは何事も緊張してしまいますw本題に入りまして・・・HTML5で追加・変更・廃止された要素について書いてみたいと思います。では、追加された要素をピックアップsection, article, aside, hgroup, header, footer, nav, figure, figcaptionvideo, audio, source, embedmark, timeruby, rt, rbcommanddetails, summarydatalist, keygen, output(API用)canvasprogress, meterふむふむ、ここで覚えておきたいのはheader、footer, sectionでしょうか。個人的にな話ですが、rubyは電子書籍作るときに使ったことがあります・・・。API用のcanvasは図を描くときに使うので、今後よく使われるんでしょうね~。次は変更された要素a, address, b, hr, i, label, menu, small, strongこれは役割が変更されたようです。b要素などは文字を太くするために使ってたけど、商品名や機能の名称などのキーワードを意味するようになったようですよ。最後に・・・廃止された要素basefont, big, center, font, s, strike, tt, uframe, frameset, noframesacronym, appletisindex, dircenterなどは使ってた人は結構いるのではないでしょうか??ちなみに私は使ってました。。。廃止になってるので、使ってた人は心掛けてくださいね。以上、html5の要素についてでした。
  • テクログ

    WEBディレクターというお仕事

    生ハム原木の購入を真面目に考えているなかむです。   友人・家族・恋人に「何の仕事してんの?」と聞かれた時に 説明しづらいWEBディレクターというお仕事についてご説明いたします。 これからWEBディレクターを目指す方も参考にしてもらえれば幸いです。   まず、WEBディレクターというお仕事を一言で表すと   ウェブサイトを作る上での現場監督   と言えるでしょう。 クライアントとやりとりを行いデザインや仕様を決めたり、また提案したり 制作チームのデザイナーやプログラマーを指示し管理を行ったり・・・ 多岐に渡ったWEBディレクターというお仕事を7つに分け解説していきます。   1.営業能力  ※画像と本文とは何も関係ありません。   クライアントとお話するお仕事なので、営業能力は必須です。   契約をまとめる商談 自分たちを売り込むプレゼン クライアントのニーズを掴む企画提案   など 営業担当と同行し、より専門的なお話をします。   2.調査能力  ※画像と本文とは何も関係ありません。   クライアントの業種や扱っている商材について競合他社の状況を調査します。 マーケティングな調査からウェブサイトの調査まで行います。 3.コミュニケーション  ※画像と本文とは何も関係ありません。   デザイナーやプログラマー、SEOコンサルタント、サーバ担当など 関係部署をまとめるためのコミュニケーションです。 プロジェクトが円滑に進むかどうかディレクターの腕の見せ所ですね。   4.要件定義  ※画像と本文とは何も関係ありません。   クライアントが何をしたいかをヒアリングし、実装するには何が必要かどういう仕様にするのかをまとめます。 クライアントの要望が何なのかを見極めないと、仕様がコロコロ変わってしまうことになります。 プロジェクトを円滑に進めるためにも、慎重かつ大胆にヒアリングをする必要があります。   5.案件管理 ※画像と本文とは何も関係ありません。   案件管理には、計画・リスク測定・進捗管理が必要です。 無理のない余裕のあるスケジュールを立てられれば一番いいんですが、当然キツいスケジュールの時もあります。  そういう場合の決断力も必要となります。   6.サイト設計 ※画像と本文とは何も関係ありません。   ワイヤーフレームの作成 サイトマップの作成 デザインのコンセプト SEOなどの配慮 などウェブサイトの設計です。   7.WEBの知識 ※画像と本文とは何も関係ありません。   最新のトレンドやデザイン知識、新しい技術や流行りのウェブサービス、最新デバイスなど常にアンテナを張って知識を蓄えておく必要があります。 HTMLやCSS、SEO、プロモーション、サーバにまつわる知識などもあると望ましいです。     何となくWEBディレクターというお仕事が掴めましたか? 次回からは各お仕事を掘り下げてご紹介したいと思います。
  • テクログ

    可用性、機密性、ITセキュリティ、要求定義

    こんにちは、けーすけです。 今日のお話は今までで一番困ったオーダーを振り返ってみます。   「PDFファイルをダウンロードできないようにしてほしい」   言葉通りであれば簡単です。ネットワーク上に存在させなければよいだけです。当然これで良いわけはありません。   このオーダーを掘り下げた意味は下記です。「PDFファイルを社員向けのWebサイトで閲覧させ、ローカルへの保存はできないようにしてほしい」   こうなると意味はわかります。社員のみに閲覧させて、社内の独自技術を外部に流出させたくないということです。   IT屋さんの発想としては下記の対応を考えます。・PDFファイルにパスワードをかける・IP制限やベーシック認証で閲覧できる環境や人を制限する   下記を確認しました。Q「社員が悪意を持つことは例外としてもよいか」A「例外ではない。むしろ独自技術の価値を一番知っている社員が、悪意を持って他社に流出する事、あるいは誤って外部に公開することを避けるための方策である」   このオーダーのお客様の意思は下記です。「社員のみがブラウザ上のみから利用でき、社員が社外への持ち出しができないようにしてほしい」   これを実現することが非常に困難であることがわかります。繰り返しになりますが「悪意を持って利用することができない」には正規のユーザも含まれます。悪意をシステム的に判定しなければなりません。   まず、PDFファイルはコンピュータの知識がある人ならば保存できます。さまざまなセキュリティツールはありますが、100%を保障しているツールを見たことがありません。PDF自体の仕様が公開されており、サードパーティ製のツールによる突破まで保障することは非常に困難です。   そこで下記のようなお約束を行いました。 環境:□PDFファイルを閲覧できる環境は社内イントラのみ□閲覧にはAdobe Readerのみを利用し、他の閲覧ソフトは社内環境にインストールしない ※社内ネットワークは外部ネットワークとは物理的につながっておらず、不正侵入の可能性は考慮しなくてよい。 ※USBメモリの持込は不可であるが、各部署が保有するUSBメモリは社外に持ち出すこともある。   設計:□PDFファイルの保存をトリガーとして、PDFファイルの最終ページ以外の全ページをAcrobatJavaScriptによって削除する□PDFファイルの表示をトリガーとして、URLのチェックを行う 正規のURLであった場合、文字の表示をAcrobatJavaScriptによって行う 正規のURLでなかった場合、PDFファイルの最終ページ以外の全ページをAcrobatJavaScriptによって削除する その他:□不正なツールの持込はお客様側の責任で防止する□現状想定し得ない脅威については、今回のスコープには含まない   表示自体をAcrobatJavaScriptで行うことで、AcrobatJavaScriptを禁止させません。何も表示されない状態を標準状態として、条件を満たした場合のみ表示します。AcrobatJavaScriptには暗号化した文章を入れます。環境から取得できる値をキーにすることで、不正に複合化されることを難しくしています。 ここまでを今回の作業範囲として、不足が発見された場合は別途工数をいただきます。       以上、お話できる範囲での体験談です。 可用性と機密性はトレードオフの関係にあり、ITセキュリティの要求定義は厳密に行うことをお勧めします。 セキュリティに限らず、要求定義は重要な技術だと思います。       けーすけでした(・ω・)ノシ
  • テクログ

    FuelPHPでtwitterの調理

    ちょうど業務で利用したので、健忘録がてらに。  「FuelPHPで構築したサイト上でtwitterとOAuth認証を行い、投稿する。」の簡単レシピ。 用意するもの: FuelPHP 1個(バージョンは新鮮なものをお選びください) fuel-twitter 1個(https://github.com/dandoescode/fuel-twitter) facebook-php-sdk 1個(https://github.com/facebook/facebook-php-sdk) ■調理手順 1. /fuel/packages 以下にfuelt-witterを仕舞うためのディレクトリを切っておきます。名前は分かりやすく「twitter」などで。 2. 1で切ったディレクトリ内にDLしてきたfuel-twitterを格納します。 3. /fuel/packages/twitter/config/twitter.php を /app/config/ 以下にコピーします。環境ごとにアカウントを分けたい場合は、適宜 config/devloperなどに振り分けてください。この辺は割愛します。 4. /config/config.php でpackageを読み込んでtwitterパッケージを利用できるようにします。 return array(     'always_load'  => array(         'packages'  => array(             'twitter',          ), .... 5.https://dev.twitter.com/にて、新規アプリを作成します。この際、アプリのApplication TypeをRead and WriteかRead, Write and Access direct messagesにしておくことを忘れずに。取得したConsumer key、Consumer secretはそれぞれconfig/twitter.phpに設定しておきます。 6.Fuelのコントローラ側でOAuth設定             Twitter::set_callback('/');             Twitter::logout();             Twitter::login(); 以上!簡単6ステップで完了です。set_callbackには、OAuth処理後にリダイレクトされるURLを設定します。ざっくりと作ってあるviewで確認をします。 OAuth認証をクリックして、作成したアプリの認証画面が出れば成功です。ログインを押下すると、アプリが認証されてログインしたアカウントのアプリ一覧に上記アプリが追加されます。   7.ここからは投稿処理です。まずViewで適当に画面を作ります。 ざっくり。コントローラー側はこんな感じに。         /*          * action_post          *           * @access public          */         public function action_post(){             $data  = array();             $token = "";             $result = "";             $tweet = "";             $data['word'] = 'oauth/post';             $data['menuClass'] = $this->menuClass;             $data['pageTitle'] = $this->pageTitle;             if(Input::post()){                 // POST時                 if(Twitter::logged_in()){                     $tweet = Input::post('tweetbox');                     if(mb_strlen($tweet)  0){                         // post先ユーザーのトークンをセット(実際はテーブルやら何やらから取得)                         $token = Twitter::get_tokens();                         Twitter::set_tokens($token);                         // 投稿                         $result = Twitter::post('statuses/update',array('status' => $tweet));                         if(array_key_exists('error',$result)){                             $result = "error:" . $result['error'];                         }else{                             $result = "";                             $tweet = "";                         }                     }else{                         $result = "文字数が1文字以上140文字以内ではありません";                     }                     $data['login'] = true;                 }             }else{                 // 初期表示                 if(Twitter::logged_in()){                     $data['login'] = true;                 }else{                     $data['login'] = false;                 }             }             $data['result'] = $result;             $data['tweet'] = $tweet;             $this->template->content = View::forge('oauth/post',$data);         } テスト用なので細かいバリデーション等作ってません。すみません…。 取り合えず確認できればいいや向け(お察しください)上記では、そのときにtwitterにログインしているユーザーのトークンを随時取得して投稿していますが、実際にアプリとして稼動させるときは、DBなどから登録してあるユーザーのトークンを取得して投稿するのがスタンダードだと思うので、投稿部分は $token['oauth_token']        = XXXXXXX; $token['oauth_token_secret'] = XXXXXXX; $post = "XXXXXXXXX"; Twitter::set_tokens($token); $result = Twitter::post('statuses/update',array('status' => $post)); こんな感じになります。 では実際にテストしてみましょう。適当な文字でツイートします。すると…  こんな感じで投稿されますね。 アプリ連携のページにもアプリとして認証されています。と、こんな感じでtwitter-FuelPHPの連携でした。現在Fuel-twitterのアプリは開発が滞っているのか、ちょいちょいエラーが出るようなのですが、各自開発者が独自に改良を加えているようなので、最新のgithubブランチを追ってみると良いようです。 次回、覚えていたらFuelとFacebookの連携処理を書きたいと思います!