サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
wp.tech-style.info
私は普段からchromebook C101PAを活用しているのですが、今までchromebookで開発をするにはSSHを使用し、外部で作業をする必要がありました。しかし、今年のGoogleIOでchromebookのlinux対応が発表されたことを聞き、pixelbookを購入しlinux対応に備えましたw 先日のchromeOSのバージョンアップでLinux対応が始まり、テンション上がったので記事にします。 ChromeOSでLinuxが利用できる!今年のGoogleI/Oでcrostiniと呼ばれる、chromebookのlinux対応が発表されました。 ChromeOS上でターミナルが使用できるようになり、linuxを利用できるようになります。 From the terminal, you can run commands, install more tools using the
fswebcamでコマンドから写真撮影fsphil/fswebcamを使うと簡単にWebカメラを扱えるようになります。コマンド一発で写真が撮れるスグレモノです。Raspberry Piへssh接続してインストール。 $ sudo apt-get -y install fswebcam以下コマンドで撮影ができます。 $ fswebcam -D 2 -r 1280x720 capture.jpg-D 2コマンド実行から撮影までの時間を遅らせます。秒指定。色々調べてみましたが、 即時撮影より遅延撮影の方が画質が良かったりエラーにならなかったりするようです。(実際、遅延撮影でエラーはなくなりました。)-r 1280×720解像度を指定します。今回使用しているC270は最大1280×720なのでいっぱいまで指定しました。 Webカメラを接続してこのコマンドを叩くだけで画像が撮れました! Node.j
Node-REDの細かい使い方などは本記事では割愛しますが、 フローチャートのような形で実装ができる様々な機能を持つノードが用意されており、それらのノードを使うことでコード(Node.js)をほぼ書かずに実装可能値の判定などやパラメータチェック、値の代入、APIへのリクエストなど様々なノードが用意されているコードを含むフローチャート全体をJSONでエクスポートすることができ、ソースの共有が簡単Deployボタンですぐにデプロイができるので、テストもすぐにできるといった特徴があります。普通に実装すると意外に面倒くさい、APIへのリクエスト~データ取得まで簡単にできてしまうので、開発者は機能の実装に集中することができます。 全てブラウザ上で操作で実装できるのでChromebookユーザの僕もらくらく実装できました。 View側の実装Node-REDではTemplateのノードでViewの部分を
数字を0埋め(ゼロパディング)したい時はあるかと思います。 月・日を2桁0埋めしたり、IDを0埋めしたり・・・。 とりあえず「PHP ゼロ埋め」と調べるとPHP公式のstr_pad関数が出てきますが、 今回はあえて使わずにスマートに実装する方法をご紹介します。 とりあえずstr_padで0埋めを実装するstr_pad関数は指定文字で指定文字数分を埋めてくれる役割があります。 だいたいの人はこれでゼロパディングを実装するのではないでしょうか。 str_pad — 文字列を固定長の他の文字列で埋める 第一引数:0埋めの対象となる文字列 第二引数:埋める桁数 第三引数:埋める文字 第四引数:左を埋める場合はSTR_PAD_LEFT、右を埋める場合はSTR_PAD_RIGHT、両側を埋める場合はSTR_PAD_BOTHを指定します。 実際にコードを書くとなると下記のようになります。 echo st
先日Python入門者の集いで登壇させて頂き、PythonでChromecastを制御した話をさせていただきました。今回はPythonのパッケージ「pychromecast」を使ってChromecastを制御する方法についてご紹介します。 pychromecastとは pychromecastとはPythonからChromecastを制御するためのパッケージです。Python2または3で利用できます。ネットワーク上のChromecastを検出し、動画・静止画の再生などを制御することができます。通常はGoogle Cast SDKを使用してCastのアプリを開発をしますが、Google Cast SDK Developer Consoleに有料($5.00)で登録しなければなりません。 pychromecastはそういった登録をせずに開発を始めることができます。 Pythonにpychrom
今回はjQueryのAjax関数を使った非同期通信処理をご紹介していきます。Ajaxを使うことでページ遷移をさせずにコンテンツを書き換えたり、他の処理を行いながらサーバとデータのやりとりを行うことができます。jQueryのajax関数はDeferredに対応しており、並列処理の記述が簡単にできたり、コードの汎用性が非常に高くなるメリットがあります。 AjaxとはAjaxとはjavascriptを用いて非同期で通信を行い、その結果に応じて処理を行う技術を指します。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 e-words – Ajaxとは Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリ
今までサイトの読み込み速度を速くする手法の一つに、遅延ロードや非同期読み込みが一般的でした。LazyLoadなどの遅延ロードを行ったり、Ajaxで非同期にscriptを読みこんだり。これらはjsをゴリゴリ書いたりすることで実現することができましたが、Resource Hintsに記載されているlinkタグのrel属性を使うことで、事前にコンテンツを読みこませることができます。今回はResource Hintsの仕様とlinkタグでの使い方をご紹介していきます。 Resource HintsとはResource Hintsに記載されている内容としては、主にリソースの事前読み込みについて書かれています。この仕様を使ってリソースの取得をタイミングを制御し、ユーザへ素早くコンテンツを配信させることができます。 This specification defines the dns-prefetch,
PHPのswitch文はなかなか曲者という話はちょくちょく聞いてましたが、 今回、少しばかりswitch文でハマりました。 失敗談のついでにswitch文で気をつけなければならないことをまとめていきます。 switch文におけるcontinueの扱いまず、僕を貶めたコードを御覧ください。 $list = array('a','b','c'); //$listの中身をチェックしていく foreach($list as $value) { switch($value) { case 'a': echo 'こんにちは'; break; case 'b': echo 'こんばんは'; continue; } echo '(*´ェ`*)テレリコ'; }はい、僕のイメージでは$valueに’b’が来たとき、 foreachをcontinueして欲しいと思っていました。 しかし実際はcontinueされ
今回はHTML5で新たに追加されたLocalStorageをご紹介します。今まではアクセスしたユーザの情報を永続的に保持するためには、クッキーやセッションを使用しなければなりませんでした。サーバサイドではこの方法で問題ないのですが、これをフロントエンドで実現するには一手間必要です。javascriptでクッキーを簡単に扱うためのプラグインのjquery.cookieなんかは割と有名かと思います。 SessionStorageの使い方はこちら→javascriptでセッション?HTML5 SessionStorageの使い方 LocalStorageとはWebStorageと呼ばれるものの一つで、javascriptを用いてクライアント側にデータを保存する仕組みです。ユーザのローカル(ブラウザ)にデータを保存することができるので、半永久的にデータを保持することができます。データの読み込み・更
ちょっと複雑な処理をゴリゴリ書いていると例外が欲しくなってきます。 途中で計算がおかしくなった時に処理を中断させたい時とか。 こういう時は自分でtry-catchを書いてthrow new Exceptionしたりすると処理を中断できて便利。 基本的な例外処理try { //----なんかの処理A---- if($A === FALSE) { //処理A失敗 throw new Exception(); } //----なんかの処理B---- if($B === FALSE) { //処理B失敗 throw new Exception(); } } catch (Exception $e) { echo '失敗したよおおおおおおお'; }でも、ここでいくつか問題があることに気づきます。 なんの処理で失敗したかが分かりにくい処理A失敗時と処理B失敗時のcatch処理を変えられないこれを解消す
SessionStorageとはSessionStorageとはWebStorageの一種で、javascriptを用いてクライアント側にデータを保存する仕組みです。ユーザのローカルへデータを保存することができるのはLocalStorageと同じですが、データの有効期限が異なります。LocalStorageでは半永久的にデータを保持できるのに対し、SessionStorageはウィンドウやタブを閉じるまでしか保持できません。そのため、サーバで使われるセッションと同じように、作業途中のデータや画面遷移時の一時的なデータ保存などに有効活用できます。 使い方はlocalStorageとほぼ同じです。sessionStorageはブラウザが対応していればすぐに利用することができます。 ブラウザの対応チェックLocalStorageと同様にWebStorageはHTML5で追加されたAPIなので、古
Gitの場合も基本的な運用では任意の場所にGitサーバを立てます。そして各自のローカルのTortoiseGitやEclipse,ターミナルなどで接続します。 ここまではSVNと一緒なのですが、gitの場合はここで各自のローカルにもリポジトリができあがります。当然、作業フォルダ(ワーキングツリー)も存在します。 ここでSVNユーザの方は「は?なにいってんの?」ってなると思います。たぶん。 ですが、このローカルリポジトリがなかなか便利なんです。 ここではまず、「gitにはリモートリポジトリ・ローカルリポジトリ・作業フォルダ(ワーキングツリー)」という3つの状態があることを覚えておいてください。 覚えておくべきGit用語まず最初にSVN脳からGit脳に切り替えていきます。 同じ用語が出てきますが、意味が変わってくるのでまずSVNと比較しながらGitの用語を覚えていきましょう。 リモートリポジトリ
最近は様々なサービスでWebAPIが提供されています。普段の開発をする中でもシステム連携などでAPIを作る機会が出てくるのではないでしょうか。 WebAPIの中でもREST APIなんてものもよく聞くのかなぁと思います。REST APIの設計は色々と奥が深く、なかなかおもしろい技術です。 今回はそんなREST APIを設計する上でのポイントをご紹介していきます。この記事では実装よりも設計思想的な部分を書いています。次回以降にもう少し実装に近いレベル記事を書いきます! REST APIとはRESTの原則に沿った形で設計されたAPIを指します。 じゃあ、RESTってなんぞや?となると思いますが、参考サイトにはこんなことが書かれています。 「セッションなどの状態管理を行わない(やり取りされる情報はそれ自体で完結して解釈することができる)」(Webシステムでは、HTTP自体にはセッション管理の機構
今回はHTMLのテーブルの内容を簡単にソートできるライブラリ「jquery tablesorter」を紹介します。 このライブラリでtableを指定するだけでソート機能のついたtableに早変わり! 非常に簡単なのでおすすめします。 記事の途中でサンプルも公開しているので御覧ください! jquery tablesorter jquery tablesorterを速攻で使うまず上記リンクからtablesorterをダウンロードします。 zipを解凍すると色々入っていますが使うのはjquery.tablesorter.min.jsのみです。 使用するまでのステップ。 jQueryを読み込むjquery.tablesorter.min.jsを読み込むtableタグにidを振る(tablesorterで指定する為)対象テーブルは必ず最初の行でtheadタグを使用し、中身をthタグにするthead以
今回はPHPで何気なく書いているコードを速度計測し、高速化が図れるようなコードを考察していきます。 普段私達が当たり前のように書いてるコード、意外と無駄が多かったりします。 一番身近なところだと標準出力のecho,print関数。 出力する時はどちらを使っても問題ありません。 でも実は大きな速度差が出てくるんです。 ということで今回は知ったらすぐ実践できる、 コードの高速化を検証を交えながら紹介します! 計測方法//計測回数 define('COUNT',10); //試行回数 define('TEST_COUNT',100000); //小数点桁数 define('DECIMAL_DIGITS',10); //平均値 $average = 0.0; for($i = 0; $i < COUNT; $i++) { $start = microtime(true); for($j = 0;
今回はPostgreSQLでデータベースをダンプする方法についてご紹介します。 データベースをコピーしたり、バックアップを取ったりする時に使用することになるかと思います。 PostgreSQLではダンプをするのにpg_dumpとpg_dumpallコマンドを使用します。これらのコマンドはPostgresの稼働中に実行可能で、ユーザからのアクセスに影響は与えません。 以下、実行環境です。 $ psql --version psql (PostgreSQL) 9.3.5 $ pg_ctl status -D ./data pg_ctl: server is running (PID: 2168) /usr/pgsql-9.3/bin/postgres "-D" "./data" データベースを指定してダンプする – pg_dumpデータベース単位でダンプをする場合はpg_dumpを使用します。
CakePHP御存知の通りはControllerとModelで処理を書いていき、そこからViewをレンダーします。 ですが先日、Ajaxのレスポンスで処理結果のステータスとHTMLの両方をJSONで返したい!ということがありました。 こういう場合はViewでヒアドキュメントを利用すればゴリゴリ書くことも可能ですがメンテナンス性が低下します(後述) 今回はControllerの中でViewをレンダーし、HTMLをController内で扱う方法をご紹介します。 Viewを正しく使ってJSONを返却する恐らくこれが正攻法だと思います。ですがメンテナンス性としてもあまり好きではありません。Controller側ではLayoutのレンダーを無効化し、アクションのViewのみをレンダーさせています。また、CakeResponse($this->response)でContentTypeをapplic
CakePHPでは基本的にXHTMLを採用しており、省略可能なHTMLタグや属性はデフォルトで省略されていません。 なのでHtmlHelperやHtmlHelperを呼び出しているHelperはXHTMLのタグを出力します。 XHTMLでも良い!という場合はそのまま使えますが、どうしてもHTML5で書きたい!タグを省略して書きたい! という時はCakePHPの機能を使って設定をしてやる必要があります。 HtmlHelperをHTML5に対応させる順序は以下のとおり。 Configにタグの設定ファイルを作成HtmlHelper::$_tagsを参考にHTML5に置き換えたタグを設定ファイルに記述するAppController::$helpersでHtmlHelperの設定を追加する実はCakePHPのドキュメントにも小さーーーく解説してありますが、これだけではかなり分かりづらいので、噛み砕い
CakePHPでアクションの処理を実行している時、他のアクションに移りたい・・という時があります。 そんな時に役立つControllerの関数をご紹介します。 CakePHPに触り始めた頃の僕は無理矢理こういう風に書いてました。 class TestController extends AppController { public function index() { $this->redirect(array('action' => 'move')); } public function move() { } }・・・これではリダイレクトなのでURLがmoveに書き換わり、moveActionとして処理が仕切り直されます。 アドレスを変えたくない!内部的に切り替えたい! でもCakePHPの公式ドキュメントにもやり方が書いてない! ・・書いてないんですが、実はこんな関数が用意されています
今回はピュアのPHPでリダイレクトをする方法を紹介します。 PHPではheader関数を使ってリダイレクト処理を記述します。 僕が初めて触ったPHPはCakePHPだったので、 いざピュアPHPを使うときには画面遷移の方法がわかりませんでした。 「$this->redirect()じゃだめなんすかwwwそっすかwwダメっすかwwwウィッスww」 って開発現場でなっていたのは内緒。 PHPでリダイレクト処理を行うPHPのheader関数でヘッダーを書き換えることでリダイレクトを行うことができます。 PHPドキュメント-header header('location: index.php'); exit();//←忘れずに!header関数でLocation: URL指定してやればリダイレクトをすることができます。 注意しなければいけないのが、 こいつを動かす前後に何らかの出力をすると正しくリ
今回はHTML5のCanvasを使ってグラフを描いてくれるjavascriptライブラリ、『Chart.js』をご紹介します。 Chart.js| HTML5 Charts for your website. 詳しいことはドキュメンテーション(英語)が用意されているので、そちらを読んでいただければと思います。 今回は実際にchart.jsでチャートを表示してみるところまでやってみます。 Chart.js導入方法上記のリンクからchart.jsをダウンロード後、ヘッダーでjavascriptを読み込んでやります。 Chart.jsとChart.min.jsがありますが、minがついている方は圧縮版(タブや改行をなくしたもの)です。 どちらを使っても問題ありません。 <script src="Chart.js"></script>ソースを書いてみようまず、HTML上にチャートの描画エリアを作成
定数で値を宣言すると後から変更されないように値を保持しておくことができます。 ファイルパスやフラグの管理など、他の言語でも必須となりますよね。 javascriptの実装中もフラグなどの管理に定数を使いたくなることがあると思います。 javascriptでの記述は以下 const FILE_PATH = '/image/hoge.jpg'; const SPEED = 10; FILE_PATH = 'foo.jpg'; // できない SPEED = 1000; // できないプログラムをやっている人からすると当たり前な話ですが、 これには落とし穴がありconstはIE非対応という問題があります。 IE10まではconstが非対応IE10でconstを使おうとすると構文エラーとなります。 これはIE10以前でも同様にエラーとなっています。 MDNによると・・・ 現在の const の実装
今更5.4?って言われてしまうかもしれませんが、 今回は便利そうなtraitについて紹介していきます。 traitに関数を切り出す事で様々なクラスで利用でき、拡張性を高めることができます。 僕はtraitを最近知りました(小声 これを使うと設計方法も多少変わるのではないでしょうか。 traitとはPHP5.4から追加されたもので、モジュールをクラスとは別にまとめて管理することができます。 変数や関数をtraitに作成し、他のクラスで使い回して利用するという感じです。 PHPの単一継承を和らげるという効果があります。 traitの仕組み自体はクラスと似ていますが、インスタンスにできないという点が大きく異なります。 traitの使い方/** * Outputトレイトの作成 */ trait Output { public $str = 'hello '; public function ech
microdata属性とはmicrodata属性とは、今まで文書構造を表現していたHTMLに意味付けをしてやる属性です。 親となるタグにitemscope属性とitemtype属性を付与し、 その中で使用するタグにitemprop属性を付与して意味付をしていきます。 クローラなどのロボットが理解しづらい情報をmicrodataというフォーマットで記述する事で、 サイトの内容を理解しやすくなるというSEO的に大きな効果があります。 詳しくはGoogleさんのドキュメントが分かりやすいので以下を読んでください。 Google microdataについて microdata属性を導入すると、Googleの検索結果にレビューの☆が表示されたり、 住所や名前などを目立つように表示してくれたりします。 microdataによるパンくずの書き方はまたもやGoogleさんにお任せします。 microdat
CakePHPでAjaxを使う方法をご紹介していきます。 Ajax処理を書くとき、CakePHPでは色々な手法があるので簡単にまとめていきます。 また、下記の記事でも改めて解説していますので御覧ください。 CakePHPでJSONを返すAPIを作る 初めてCakePHPでajaxを使った時にMissingViewでハマり、 CakePHP×Ajaxを解説しているサイトが見当たらず苦戦した思い出があります。 非常に便利なAjaxですが、CakePHPで使用する場合はAction側で一手間加えてやる必要があるのです。 ということで今回はCakePHPでAjaxを使う方法について解説します。 注: CakePHPにはAjaxHelper(JsHelper)が用意されていますが、今回は使いません。 というのも、個人的に使い勝手があまり良くない印象があるので。 (そもそもjavascriptはjsフ
以前、CakePHPでjQueryのAjaxを使う方法というエントリーを書きましたが、 今回はJSON形式の配列を返却するAPIを作ってみます。 ここ一年間、APIを設計したり使ったりしましたが、自分なりのノウハウをまとめてみようと思います。 JSON形式で返すメリットjavascriptでオブジェクトとしてそのまま扱えるPHPから他の言語へデータの受け渡しが容易JSONはXMLなどと比べ軽量JSONを返すWebAPIはjavascriptとの相性も良く,Ajaxでのやりとりにも使えます。 PHPの場合はjson_encode、json_decodeで等でJSONと配列を簡単に変換できます。 $json = json_encode(array('あ', 'い', 'う')); echo $json; // ["\u3042","\u3044","\u3046"] ※["あ","い","う"
今回は簡単にスピナーを実装できるspin.jsをご紹介します。 なんと準備するものはspin.jsのJSファイル一つのみ!CSSもjQueryも必要ありません! spin.js そもそもスピナーってなんすかスピナーとはロード中にぐるぐる回るアレのことです。 読み込んでいる最中にユーザのストレスを軽減する事ができると言われています。 主にAjaxでの通信中に使用したりすることが多いと思います。 spin.jsのメリット数あるスピナーのライブラリからspin.jsを推す理由は以下の4点です。 使用するのはjsファイルだけjQuery等の外部ライブラリが不要とても軽量CSSを汚さない個人的に一番大きいのはjsの1ファイルのみ読みこめば使用できるという点。 jQueryライブラリなどでよくあるのが付属のCSSファイルを読み込むというもの。 ライブラリを多用しているとライブラリ用CSSファイルが多く
このページを最初にブックマークしてみませんか?
『イケてないコード - Webエンジニアのブログ - HTML,PHP,jQueryなど、Web開発で使え...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く