ScotchBoxにLaravelをインストールする

VagrantのScotchBoxにLaravelをインストールしようとすると、composerでエラー。

The following exception is caused by a lack of memory and not having swap configured
Check https://getcomposer.org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors for details

みたいな感じ。
調べてみると、メモリがたりません。ってことらしいです。
ScotchBoxはUbuntuなので、Ubuntuにスワップ領域を追加する処理をします。

Ubuntuでスワップ領域を確保してcomposerでLaravelをインストール

Laravelをインストールする前に、下記のコマンドを実行します。

スワップ用ファイルを作成

$ sudo mkdir /var/swap/
$ sudo dd if=/dev/zero of=/var/swap/swap0 bs=2M count=2048
$ sudo chmod 600 /var/swap/swap

スワップ領域の割り当て

$ sudo mkswap /var/swap/swap0
$ sudo swapon /var/swap/swap0

サーバ起動時に自動的にスワップを割り当てるように処理

$ sudo vi /etc/fstab

最後に一応スワップの状態を確認してみる

$ sudo cat /proc/swaps

上記を行ってスワップ領域の設定が完了したら、あとは通常通りLaravelのインストールが行えるはずです。

$ composer create-project laravel/laravel --prefer-dist

以上です。

参考はこちらでした。
http://qiita.com/scleen_x_x/items/f3fc492bcbf0f6c2896c

Vagrant+Scotch Box にphpMyAdminをインストール

VagrantでPHP開発環境をつくりたいんだけど、最低限PHPとMySQLが動けばいいくらいであとは細かいことは気にしなくていいって、感じの軽い開発のときに、そういう環境がさくっと立ち上げられるScotchBoxが重宝しそうです。
PHPとか新しいバージョンのがはいっているのでLaravelとかも動きます。
ただ、phpMyAdminが入っていない?のか見当たらなかったので、ScotchBoxの立ち上げから、phpMyAdminのインストールまで。

これで、PHPとmySQLが動いている「とりあえずなPHP開発環境は揃うはず」

参考にさせていただいたサイト

Scotch BoxをインストールしてphpMyAdminを動かす

  1. 任意の場所で
    git clone https://github.com/scotch-io/scotch-box.git <フォルダ名>

    これで、フォルダ内に必要ファイルが入ります。

  2. 上記のフォルダを見ると、「Vagrantfile」とうファイルがあるので任意で編集。
    Vagrant.configure("2") do |config|
    
        config.vm.box = "scotch/box"
        config.vm.network "private_network", ip: "192.168.33.10"
        config.vm.hostname = "scotchbox"
        config.vm.synced_folder ".", "/var/www", :nfs => { :mount_options => ["dmode=777","fmode=666"] }
    
    end
    

    上記でいうところの

    config.vm.hostname = "scotchbox"
    

    scotchbox がホスト名になります。私のChromeだと、アドレスバーにscotchboxとだけ打つと検索しにいってしまうことがあって不便だったので、scotchbox.local みたいなアドレスっぽい名前に修正しました。

    config.vm.synced_folder "."・・・・
    

    の “.” がローカルの作業フォルダになります。通常は、上記でcloneしたときに作ったフォルダの中にpublicていうのができててそれが作業フォルダになります。ここを変えると作業フォルダを変更できますが、ここで指定したフォルダの中にpublicというフォルダができてそれが作業フォルダになります。
    例えば、

    config.vm.synced_folder "./www/"・・・・
    

    としたときには、wwwフォルダのなかのpublicフォルダが公開フォルダになります。
    そのままのほうがわかりやすいかも。

  3. あとは
    vagrant up
    
  4. で、環境が立ち上がって先ほど決めたホスト名でのアクセスを確認できたらphpMyAdminのインストールをします。
    まずは

    vagrant ssh
    
  5. ScotchBoxのOSはUbuntuなのでphpMyAdminインストールは
    sudo apt-get install phpmyadmin

    インストール中にいろいろ聞かれますが、
    Webサーバーはapachを選択。
    Configuring phpmyadmin は「No」
    ・・・
    でインストールは終了しますが、このままだと<ホスト名>/phpmyadmin でアクセスできません。

  6. Ubuntuの公式にしたがって
    sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf-available/phpmyadmin.conf
    sudo a2enconf phpmyadmin
    sudo /etc/init.d/apache2 reload
    

    これでOK。
    <ホスト名>/phpmyadmin
    でphpMyAdminにアクセスできたら成功です。

  7. ちなみに、ScotchBoxが最初から準備してくれているDBへのアクセスは
    ユーザ名:root
    パスワード:root
    です。

以上、まあようするにUbuntuへのphpMyAdminのインストール方法なんですが、まとまった情報がなかったので
まとめ+備忘録を兼ねて。

アドレスが少し変わりました

すでにお気づきかもしれまんが、当ブログのアドレスが少し変わりました。
といっても、各記事のアドレスはかわりません。

ブログトップページのURLが、
https://www.katacom.jp/
から
https://www.katacom.jp/a/

に変更になっております。

ドメインルートには、私が個人的に営んでいる事業のサイトが表示されております。

引き続き、当ブログも(なるべく)更新していきたいと思います。

今後とも、何卒よろしくお願いいたします。

m(_ _)m

Windowsから、Macbook Pro(JISキーボード)に乗り換えて戸惑ったことと解決方法

実は、5月上旬からメインの開発用PCを今までのWindowsからMacbook Pro に乗り換えました。
そんなわけでこの1ヶ月はMacbookを使ってコーディングとかしてきたんですが、感想としては「素晴らしい」の一言です。
特にタッチパッド周りと仮想デスクトップ(っていうの?)のあたり、ノートPCで作業するために徹底的に考え抜かれたっぽい機能がとても心地いいです。

さて、そんな中で、乗り換えて戸惑ったことを今後乗り換える人のために書いて置きます。
とくに、私の場合はキーボードがJis配列なもので、それに起因するものが多いです。

Sublime Textでの改行の正規表現(多分、あらゆる場面での正規表現のときに言えること)

乗り換えた当初にめちゃくちゃ躓いたのがこれ。

キッカケは
Sublime Textで改行コードを一括削除する必要があって、正規表現で検索置換したいと思った時のことです。
いつものように、検索バーを開いて、正規表現のボタンを押してから、検索対象に「 ¥n 」と入力したんです。(あ、わかりやすいように円マークは全角で入力していますね)

ところが、何もおこらないんですね。

Windowsではサクラエディタをメインでつかっていたもので、SublimeTextでの検索方法が何かおかしいのかな?とか思っていろいろ調べたけど、検索・置換のやり方は間違っていない。。
パッケージが必要なのか?とか思っていろいろインストールしたり、やってみたけど全然だめ、もう一時間くらい悩んだ挙句に発見しました。
(そんなに時間使うなら手で削除すれや。ッて思うかもしれないけど、、、わかるよね、この気持 ^^;)

Macの場合は Option + ¥ キーで、バックスラッシュが入力できるんですね!

考えてみれば、バックスラッシュはバックスラッシュでしょ?って当たり前なのですが、
ずっとWindowsを使ってきたので、バックスラッシュは「¥」と思い込んでしまっていました。
Windowsのときは、正規表現のときは、ずっとそれでやってきましたので、見事にはまってしまいました。

なので、WindowsからMac(Jis配列キーボード)に乗り換えた人は、正規表現を使うときは

「Macのバックスラッシュは ¥ ではない」ってことを覚えておくと便利かも。

半角やカタカナへの一発変換

Windowsだと全角カタカナを入力したいときに、いったんひらがなで入力してから、変換のときにF7キーでカタカナに変換していました。
でもMacだと、ファンクションキーは fnキーを押しながら使うので、非常に使いづらいな。って思ってたんですが
下記の方法で一発変換できるんですね。

全角カタカナ → control+K
半角英数字 → control+: (コロン)
半角カナ → control+; (セミコロン)

これがわかってからは、非常に使いやすくなりました。

commandキーの入力

Windowsでいうと、Ctrlキーの役割を果たすことが多いのがcommandキーですが、これが押しにくい。
最初は、WindowsのCtrlキーみたいに左手小指でおしていたのですが、周りのMacユーザに聞いたら、どうやら親指で押すのが一般的のようです。
それ以来、意識して親指を使うようにしてきました。
最初はペーストのときとか、親指つりそうになりましたが、ようやく慣れてきました。

いまだに、Adobe系ソフトののWeb用に保存的なショートカットを押すときに指がこんがらがりますが・・^^;

以上、私のように、長らくWindowsユーザをやってきたのに、何かの拍子でMac(それもJisキーボード)に乗り換えた人のためにメモでした。

デザイニングインブラウザとフルスタックエンジニアとマテリアルデザインと私

ここ数年耳にすることが多くなった言葉として「デザイニング イン ブラウザ(インブラウザデザイン)」「フルスタックエンジニア」「マテリアルデザイン(フラットデザイン)」という言葉があります。
これらの言葉について、面白そうだなと思いつつも実際にはどうなんだろう・・・とか、あんまり一般化しないなとか・・・流行りで終わりそうだなとか・・・いろいろ思っていましたが、最近ようやくこれらのワードがつながってきたのでまとめます。

(田舎の、それこそ技術者が1〜2名しかいないような会社の、そういう環境にいる視点ですので、時代に遅れた感はあるけど、実際地方の現場ではこんな感じですという記事となります。^^)

デザイニング イン ブラウザ(インブラウザ デザイン)

Webデザインの現場において、今まではデザイナーがAdobeのソフトなどでデザインを作成し、それをプログラマーとかコーダーが、HTMLでコーディングしてつくり上げるという方法が一般的でしたが、いきなりブラウザ上でデザインを作成しちゃいましょう。という方法です。
(ちょっと乱暴な表現かも?)

たしかに、大枠で言えばHTML5、CSS3、細かな話でいえばWebフォントが一般的になりつつあり、レスポンシブWebデザインやパララックス(最近聞かない?)などがどんどん取り入れられている現状、Webの表現方法が非常に多彩になってきていますから、例えば見出しなどを目立たせたいと思ったときもわざわざデザインソフトでつくらなくてもコーディングのレベルでデザインを作ってしまえます。また、メンテナンスを考えた時も、見出しの文字が1文字変わるだけなのに、わざわざデザインソフトを立ち上げて修正して画像に書き出して貼り直す。なんてことをしたり、もっといえば、他所から引き継いだ案件などでは、デザインの元データが見当たらないのでつくりなおしなんてこともしょっちゅうあるので、この点だけ考えても、メリットは大きいと思います。

また、お客様視点からしても、「この見出しの部分を1文字なおして」と業者に依頼したのに、「実はその部分は画像で貼り付けてありまして修正に手間がかかるので追加料金となります」といわれても、「いや、文字修正でしょ?消して打ち直せばすぐじゃん。なんで?」となることも多く、この意味でも、やっぱりテキストなどを画像にして貼り付けるという行為はやり方としてスマートではないですね。

デザインの打合せのときも、デザインについてあれこれ意見がでるけど、(その場にAdobeのソフトがないために)結局それを一度持ち帰ってデザイナーに修正してもらって、後日診てもらう。というよりも、その場でコードを修正して「こんなでどうでしょ?」ということができたら話が早いと思います。

また、HTML5の時代ですから、これからは、レスポンシブWebデザインはもちろん、当然、動きのあるサイトデザインが一般的になってくるでしょう。それらを紙ベースやPDFで見てもらってもなかなかイメージがつかないと思います。
打合せの段階でブラウザで確認できることはもちろん、打合せ担当のディレクターにある程度のコードの知識があれば、テキストエディタがあればある程度の修正がその場でできますから、お客様の要望に合わせて「こんな動きもできますよ」という提案ができたら、とても良いと思います。

とくにWordpressの案件などでは、Wordpress自体はCloud9などを使えばものの10分で環境構築+プラグインのインストールまでできますから、仮でもテストサイトを立ち上げて、その場でコーディングによってデザインや動きを見せながら打合せができたら、かなり工数を削減できると思いますし、あとから「なんかサイトができたら思ってたのと違った」というのを低減できるのではないかと思います。

我々コーダー、プログラマー寄りのWeb制作者にとっては、なんかいろいろ変わっていきそうな気がする「デザイニング イン ブラウザ(インブラウザデザイン)」です。

でも、実際にはなかなか広まっていかないな。。というのもあります。
多分それは、制作側のスキルの問題が大きんじゃないだろうかと思います。

例えばWordpressがこれだけ広まったのも、PHPとか知らなくてもお問い合わせフォームや新着情報機能が実装できるってあたりの、技術がない人でも使いやすい。ってのが最大要因な気がします。

デザイニングインブラウザ(インブラウザデザイン)が、今ひとつ広がらないのは、デザインからコーディング+ちょっとしたプログラムまで全部できる人が実は少ないので、実際にブラウザ上でデザインといっても、難しいのだろうな。というふうに思います。

そこで、今後のWeb関連のエンジニアに求めらているのが、フルスタックであること。。になってきます。

フルスタックエンジニア

最初に、フルスタックエンジニアと言う言葉を聞いた時は、(なんかカッコイイことばだな)と思いました。
でも実際にその言葉がつかわれているのが、転職サイトなど人材系のサイトばかりで、どうも現場でいわれているというよりも、転職業者のあいだで人を募集するための言葉とかなのか?という印象で終わりました。

ただ、上記で述べたようにWebの表現方法やできる事がどんどん多彩になっていく中で、紙で印刷したものを見ながら「どんなふうにつくりましょうか」というのはいずれは限界が来ると思います。また、昨今はクラウドソーシングもどんどん広がっているようですから、紙にデザインを作るとか、紙に印刷された固定的なものをコーディングする。という仕事はどんどん安いところに流れていきます。
たとえばクラウドソーシングには「Gengo」のような翻訳サービスもあるわけですから、それとIT技術系のクラウドソーシングがシームレスに連携するだけで、日本語しかできなくてもアジア圏などにも外注をだせるわけです。

そう考えると、今実際にWebデザインを紙でつくれます。紙で作ってもらえればコーディングできます。というように、「指示書」や「要求定義」があれば作業ができるレベルの仕事は少なくなっていくと思います。
(少なくなっていくというよりは、資本があって投資ができて、人件費を削減できる仕組みを構築できる大きな企業に利益が集中していくので、田舎で中途半端にやっているところに回ってくる仕事は減っていくといったほうが近いですね)

そんななかで、我々Webに関わるエンジニアが生き残っていくためには、やっぱりここなのかな。と思わずにいられません。
前項でも書きましたが、インブラウザでデザインから構築できると、出来上がりがイメージしやすいだけでなく、工数の削減にもなりますし、なにより、地方ってお客さんがWebに詳しくなかったりして、「やりたいことはあるけど、どうやって実現したらいいのかわからない」って人がたくさんいます。
なので、紙で書いたもので打合せするよりも、その場で簡単にプロトタイプを組みながら、ああでもないこおでもないと打合せできるような環境をつくってあげると、イメージがしやすく、そして話が早く、最終的にはお客様のマーケティング計画に近いものが出来上がる可能性が高くなります。

実際に言われている「フルスタックエンジニア」ってどちらかというと、サーバからWebデザインまで全部みたいな作る側の人のことを指していると思いますが、人材が不足している地方においては、それにさらにディレクターや営業やコンサルなど、お客様と直接やりとりするためのスキルも含めて「フルスタックエンジニア」がこれから求められて行き、そういうのになっていかないと、おまんまを食べていけなくなるのではないか?と考えます。

とは言いつつも、そんなに悲観しているわけではなく、私の周りなどはそうなんですけど、フリーランスで直接お客さんとやりとりしてWeb作っているような人達って、フルスタックな人たくさんいるんですよね。

そりゃそうですよね。我々地方の技術者は、ホームページだけでなく、インターネットの設定やプリンタのインストール、はてはエクセルの使い方までお客様から聞かれちゃう何でも屋をやっるところも多いのではないかと思います。
「ホームページが映らなくなったんだけど」と言われても「サーバは専門外なのでわかりません」とは言えません。
「ここにバナーを追加したい」と言われても「デザイナーじゃないのでできません」とは言えません。
お客さんにとっては、インターネットに詳しい人、パソコンに詳しい人として相談してくれるのだから、それらに答えるのが仕事。としてやってきているような人が多いので、結果フルスタックに近い人達が沢山いるのです。

そういう人たちが、今後重宝されてくるといいな。なんて思います。

マテリアルデザイン

もう1つ「マテリアルデザイン(フラットデザイン)」という言葉もよく耳にします。
これ、最初にでてきたときには、ただの「流行り」かと思っていました。一部デザインに先進的な皆様の間で流行っているだけで、田舎のWeb屋には、あまり関係ない話なのかと。。。
でも、このインブラウザでデザインを進めていくのと、とっても相性がよいのがこのマテリアルデザインであるということがわかってきました。
マテリアルデザインの元となっている「マテリアルオネスティ」という考え方があるのですが、要するに素材を活かしたものこそが美しいという考え方のようです。

↓↓詳しくはココ↓↓
http://contentmarketinglab.jp/trend-in-japan/responsive-web-design-2.html

ここを読んで、たしかにそうだなと思ったのが、Webデザインにわざわざ影をつけるのって変じゃね?ってことです。
だって画面には光源なんてないのだから、フラットなものなのです。

じゃあなんで、Webデザインに影をつけるのか?

それは「目立たせるため」ですよね。「お問い合わせはこちら」とか、「お申し込みは今すぐクリック!」みたいなボタンをつくるのに、周りの部品に埋もれさせないために、ドロップシャドウをつけて目立たせたりします。

でも、そのために、例えばAdobeでわざわざ影付きのデザインをつくって貼り付けたり、CSSで頑張って影をつけたり。。
そのために、たとえばレスポンシブデザインの際に、わざわざ影の位置や広さを調節したりが必要になるかもしれません。そんな感じでメンテナンスが大変、というのはどうでしょうか。

目的にたちかえって「目立たせるため」ということだけを考えれば、デザインそのものを見なおして、マテリアルデザインという考え方にのっとって作ってみるというのはどうでしょうか。

まだマテリアルデザインの全貌を理解しているわけではないのですが、例えばGoogleのアプリなどマテリアルデザインを採用しているアプリやWebサイトをいじってみると、ボタンを目立たせるというよりも、ボタンがよりタップしやすい場所に、タップしやすいカタチで配置されていたりといった工夫がされているものが多いです。

いままで紙ベースでデザインしてきた場合は、上から読み始めて下に読み進めていく。
という流れがあたりまえです。その視線の流れにそって、途中で「目立つボタン」を設置してクリック率を高めよう。というのは当然だと思います。

でも、今後はどうでしょうか?デバイスは多彩になり、スマホ、タブレット、スマートテレビ、携帯ゲーム機、PC。。。いろいろなデバイスでのアクセスを考えて時には、かならずしも上から下に、左から右に読み進めるのが、ユーザにとって優しいとは限りませんよね。

そうした中で、PCのディスプレイとマウスでの操作を前提としたものよりも、Webの本来の「素材」である「画面」という考え方でデザインをしていったほうが、良い物が作れる気がするのです。

先ほどの「目立つボタン」をつくりたいのなら、片手持ちのスマホで閲覧を想定するさいには、つねに右下にフロートさせたボタンをおいておくというてもあります。
ページを読み進めていくなかで、アニメーションさせることで目立たせることもできます。
同じように目立たせるというものが、いままでの固定的なデザインから、動的なものに変わっていく中で、そのガイドラインとなるのが、マテリアルデザインではないかと思いました。

また、インブラウザデザインと相性がよいといったメリットもあります。
ブラウザのなかでコーディングしてデザインをつくっていく手法では、なるべく余計な装飾が少なく、それでいて見やすい、操作しやすいデザインを作る必要があります。そういう意味ではCSSでざっくりコーディングしちゃって、あとで修正していけるマテリアルデザインはとても相性が良いといえます。

そういう、インブラウザでのデザインをつくっていく中での一つのガイドラインを、マテリアルデザインが示していくれているのかな。なんて考えております。

最後に

なんかとりとめのない話になっちゃったな。
実際には地方にはまだホームページって何?みたいなお客さんもいるし、いまだに「社長、これからはホームページですよ」なんつって、どうしようもないホームページを高く売りつけている業者も存在しています。
なので、明日から何かが変わりますという話ではないかもしれないけど、
でも、企業側からすれば、これから若い人たちが経営層に入ってくれば、当然、マーケティングを見据えたWeb運用というものがはじまってくるし、そうしたときにテンプレートとコピペで作ったホームページを売っていたら、「それなら自分たちでつくりますけど」となってしまうのではないかと思います。

そうした中で、(半年後どうなっているかわからないけど)今の時点では、技術的な分野で「取り組みたいな」と思えるものとその方向を書いてみました、

ブラウザ埋込み型のJavascriptエディタ「ACE」を実装してみた。

2015-10-02
この記事は結構見てくださっている方が多いこともあり、すこし修正して
Qiitaにて公開しました。

http://qiita.com/shin1kt/items/48ed9c5d3d485757d19b
こちらも合わせてどうぞ。


最近Chromebookをいじってばかりいるせいで、ブラウザ上で動くエディタとかにとても興味がでてきて、いろいろ試しています。
Cloud9とかすごいですね。うまく使えばいろいろな開発環境が劇的にかわるかもとか思い始めています。
「あぁ、もうそういう時代がきているのね感」みたいのを日々感じる今日このごろ。

そんな中、Cloud9のエディタがすげー便利だな。。なんかWindowsやMacで使われているSublimeTextみたいなことがJavascriptエディタでできるなんて。。とか感じていたのですが、どうやら「ACE」というJavascriptエディタをつかっているらしい。とのことで、すごく興味がわきさっそくですが自分のサーバに実装してみました。

まずはこちらを御覧ください。
https://www.katacom.jp/a/ace-builds-master/editor.html
DEMO用のファイルをすこし変更してアップロードしただけなので、ただ入力できるだけ。
なんですが、「HTML」を入力してみてください。
いろいろ便利でしょ?

Javascriptエディタ「ACE」HTML入力の使い方例

タグを入力

  1. 普通にタグを入力すると終了タグが自動的に入ります。
  2. あとは中身を入力するだけ

タグ間を移動

終了タグにカーソルがあるときに、開始タグに一気に移動したいときとか。。

  1. 終了タグ内にカーソルがある状態で
  2. Ctrl+Alt+Shift+左 (MacはAltをOptionで)
  3. で開始タグに移動

複数タグを同時編集

例えばulで囲ってたけど、olに変えたいなという感じのとき

  1. 終了タグにカーソルがある状態で
  2. Ctrl+Alt+左 (MacはAltをOptionで)
  3. 左を押すたびにタグを移動してカーソルが複製されていきます。
  4. 編集したいタグ全部にカーソルが表示されたらあとは、編集するだけ。
  5. あとは、Ctrl+Alt+Shift+(右|左)を押して移動すると複製されたカーソルを解除しながらタグ間を移動します。

行をコピー

  1. コピーしたい行にカーソルがある状態で
  2. Ctrl+Shift+d
  3. で、行がコピーされます

てな感じで、HTMLタグ編集も楽々です。
その他ショートカットキーは
https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

こちらで確認できます。

Javascriptエディタでここまでできるんですねぇ。。

というわけで、実装してみます。

javascriptエディタ「ACE」を実装してみる。

  1. ダウンロード
    https://github.com/ajaxorg/ace-builds
    ここに、使いやすくまとまったコードがありますので、まずはそれを。
  2. そしたら展開。
  3. editor.html というのがDEMOファイルになっています。
  4. まずは、editor.html を少しいじります。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Editor</title>
      <style type="text/css" media="screen">
        body {
            overflow: hidden;
        }
    
        #editor {
            margin: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
      </style>
    </head>
    <body>
    
    <pre id="editor">
    エディタにデフォルトで入れたいコードはココに書く
    </pre>
    
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/html");
    </script>
    </body>
    </html>
    
  5. 上記をそのままコピーしても大丈夫だと思いますが、ポイントは、
    • 28行目:src/ace.js を参照するようにします。
    • 31行目:テーマを決めます。SublimeText風にしたいので、monokaiを指定
    • 32行目:モードを決めます。今回はHTMLモードにします。

    テーマやモードは、srcフォルダの中に theme-●●.js 、mode-●●.jsが準備されていますので、そこからいろいろお試しください。

  6. editor.html と srcフォルダ をアップロードして、editor.htmlにアクセスします。
  7. というだけの作業で公開されるのが、
    https://www.katacom.jp/ace-builds-master/editor.html
    です。

あとは、この値を取得してあれこれとか、これを利用してWebサービスのあの部分に使おうとか。いろいろとアイディアが湧き出てきそうですね。
まずは、今回実装まで。
今後いろいろといじっていきたいと思います。

参考にさせていただいたサイトは
http://d.hatena.ne.jp/tsugehara/20130419/1366380767
http://blog.asial.co.jp/934
です。ありがとうございます。m(_ _)m

【続報】GCALDaemonを使ったAipoとGoogleカレンダーの同期でエラーについて、強力な助っ人が現れて無事同期できました。ネットって素晴らしい!の巻

以前に

GCALDaemonを使ったAipoとGoogleカレンダーの一方通行同期でエラー

という記事をかいた後も、あいかわらず同期できなくて困っていますと、記事をみてくださった、ぐらさん様からコメントをいただきました。
自家製のRubyスクリプトで動かしているとのこと。
そして、ありがたいことに、ぐらさん様が作成したRubyスクリプトを頂戴することができました。

そして・・・いろいろなれないサーバいじりなどをした結果、ついに同期することができました!

というわけで、この喜びを多くの方に分かち合うために、ぐらさん様から許可をいただき、Aipo→Googleカレンダーへの同期のためのプログラムを公開させていただきます。

それが、こちらです。↓↓
ダウンロード: aipotogcal
※こちらは「ぐらさん」様より許可をいただき公開させていただいております。この場を借りて感謝を表明いたします。
m( _ _ )m
※ご承知とは思いますが、使用は自己責任でお願いしますね。

また、私が稼働させるまでの手順を下記に記述しました。
参考になれば幸いです。

Googleサービスアカウントの取得から秘密キーの入手

このプログラムでは、ブラウザを介さずにGoogleのAPIにアクセスするために、Googleのサービスアカウントを取得する必要があります。

  1. Google Developers Consoleにアクセスする。
    https://console.developers.google.com/
  2. プロジェクトを作成→任意の名前とIDを入力して作成
  3. 作成されたプロジェクトから、APIと認証の「認証情報」を開く
  4. OAuthから「新しいクライアントIDを作成」→サービスアカウントを選択して作成
  5. 秘密キーパスワードが表示されるのでメモ(※注意。一度しか表示されません)(※1)
  6. 秘密キーの表示と同時にファイルがダウンロードされる。このファイルが「秘密キー」となるので保存(※2)
  7. 作成したサービスアカウントのメールアドレスなどが表示されるので覚えておく(※3)

Googleカレンダーの設定

Aipoから同期させたいGoogleカレンダーに、プログラムからアクセスが出来るようにします。

  1. Googleカレンダーにアクセス
  2. 同期させたいカレンダーを選択(もしくは作成)
  3. カレンダーの共有設定から、上記のサービスアカウントで作成された「メールアドレス」を共有に加える(私は「変更および共有管理権限」で加えましたが、ひょっとしたら「変更権限」だけでよいかもしれません)
  4. カレンダーの設定画面から「カレンダーのアドレス」の項目に表示されている「カレンダーID」を覚えておく(※4)

プログラムの設定

Googleカレンダー側には設定ができたので、次はAipo側の設定です。

  1. Aipoの動いているサーバに「aipotogcal」をアップロード(サーバの権限によってはAipoと別のサーバでも良いかもしれません)
  2. 同じく上記※2で保存した秘密キーファイルをアップロード
  3. 「api.yaml」を編集します。
  4. key_pass:上記※1の秘密キーパスワード
  5. key_file:上記※2の秘密キーファイルの場所を記述(サンプル:/usr/local/aipotogcal/************.p12)
  6. cal_id:上記※4のカレンダーID
  7. issuser:上記※3のメールアドレス
  8. timezone:通常は”Asia/Tokyo”で問題ないはず
  9. ical_uri:AipoのiCalのURL(通常は、https://********.***/aipo/ical/calendar.ics)のはず
  10. aipo_user:Aipoのユーザ名
  11. aipo_pass:Aipoのパスワード


あとは、Rubyでちゃんと実行できるか確かめた上でCRONで定期実行させるだけです。

設置時に躓いたことメモ

※私の場合はAipoサーバ環境に問題があり、AipoのHTTPレスポンスヘッダーに文字コード指定がないために
from ASCII-8BIT to UTF-8 (Encoding::UndefinedConversionError)
というエラーがでました。本来はサーバ設定で解決すべき問題なのですが、そこまでの知識が及ばず…
対策として、66行目あたりに
ics.force_encoding(“UTF-8”)
という記述を追加して無事動かしました。本来はサーバ側の設定でHTTPヘッダを適切に処置出来るようにするのが正解だと思います。

※実は一番苦労したのが私の環境にRubyが入っていなかったために、Rubyのインストールをするところでした。
これはいろいろな環境があって一口に言えないためにあえて今回は書きません。
下記等を参考にインストールしました。
(Rubyインストールに参考になったサイト)
http://d.hatena.ne.jp/yk5656/20140324/1396158118
http://centos.bungu-do.jp/archives/000294.html

納品をなくせばうまくいく?(地方のWeb屋の今後を考えた)

ちょっと前に読んだ本ですが、とても興味深い内容でした。

私は、もう10年程片田舎でWeb周りの技術者をやっておりますが、ぶっちゃけ、一番うまくいかないのが、納品。。それも「要求定義」です。

システム開発とかの基本的な流れは以下のようなものだと思います。

  1. 依頼を受ける
  2. 話を聞きながら要求定義をまとめる
  3. それをもとに見積もりを出す
  4. OKなら進める。
  5. 要求定義を満たすものをつくって納品

理論上は、これでうまくいくはずなのですが、大体がうまくいきません。
なぜなら、我々地方のWeb屋のお客様は大体がITの素人さんです。すると、「Webを作って商売に活かしたいけど、実際に何をすればいいのかわからない」という方がほとんどなんです。

だから、いくら最初によく話し合って要求定義をまとめて、設計書を煮詰めても、大体出来上がってから、思っていたのと違った。ということで、修正になったりします。

当然、立場として受注した方が弱いので泣き寝入りで修正するか、強気に追加料金を要求してもめるか?ということになります。

昔は私も、自分の要求定義のまとめ方が悪いのだろう。とか、質の悪いお客さんにあたってしまったのだろう。。と思っていたのですが、最近になって、これはやり方そのものを根本的に変える必要があるのでは・・・と思うようになりました。

この本にあるやり方は、私の理解が不足していることもあるとおもいましたが、このように感じ取りました。

  1. お客様と「何をやりたいか?」の目標を共有
  2. その目標について、毎月で予算をきめてもらう。
  3. 技術者は、その予算内で出来ることを提案&実施
  4. すぐに、それを実施して、一緒に結果を見る、よければ「予算内」で、もっと進める。悪ければ違う方法を提案&実施する。

これは、とても危ない方法のようにも思うかもしれません。
ものを売ってお金をもらう。というのではなく、お客様と担当者の「信頼」のみに頼るやり方です。

でも、思い起こすと、自分が実際に今までお客様と良い関係を築けたときって、これに近い事ができているんですよね。

お客さんが自分を信頼してくれて、お金の範囲内で自由にやってくれ。と言われ、こちらは、細かなことでいちいち許可や見積もり承認を求めずに、成果だけを共有して、好き勝手やらせてもらう。

人種にもよるとおもいますが、この関係が築けたら、燃えるエンジニアって結構いるんじゃないかと思うんです。

今までは、こういう関係って、フリーランスと事業主の個人対個人での信頼の上にしか成り立たないと思っていたのですが、この本では、これを企業対企業として成り立たせるための、やり方やヒントが書かれています。

そういう意味で、とても興味深く、今後の自分の方向性に大きなヒントをくれた本だと思っています。