ラベル web の投稿を表示しています。 すべての投稿を表示
ラベル web の投稿を表示しています。 すべての投稿を表示

2017年6月18日日曜日

ng-japan 2017に行ってきた

ng-japan 2017に行ってきました。
ツイートとスライドをまとめただけの記事です。

Keynote: How to Think About Angular



RxJSを活用したアプリケーション開発

CQRSを学ぶために「.NETのエンタープライズアプリケーションアーキテクチャ第2版　.NETを例にしたアプリケーション設計原則」という本を使っているそう。

You need to know SSR

 

Angularアプリのテストについて

Web Payments + Credential Management API

これはAngularのトークではなく、ブラウザでの支払いフォームなどの改善や新機能の紹介。
※スライドのURLを見つけられなかった。

Apple Pay JSをPayment Request APIと同じように使えるwrapper
https://github.com/GoogleChrome/appr-wrapper

Angular, Firebase, Cloud Functions for Firebase

スライド


関数型はモテる。

Advanced Component styling with Angular (v4+)



Best practices for modules in Angular



Angular Animations

スライド

What's New in Angular Material

Autocomplete や Datepickerふえたよー。今後も対応部品増やしていくよー。というトーク。



投稿者 mstssk 0 コメント ラベル: , , ,

2015年4月30日木曜日

DroidKaigiのWebサイトの作り方

DroidKaigiに来ていただいたみなさん。ありがとうございました！

私は運営メンバーに参加して、Webサイトの構築・管理とかしてました。

CFP開始当初は時間がなかったので、私がえいやとBootstrapで作成。
ただし、公開前にデザイナーさんにアドバイスを頂いて細かい部分を手直ししたり、公開後も他のメンバーからガシガシPRを貰って手を入れていきました。
採択セッションの公開時のあたりで、デザインをゆりりーさんにお願いし、私が技術面を担当する体制に。

サイトはGitHub Pagesを使ってます。 今まではペライチのHTML置くくらいにしか使ってませんでしたが、DroidKaigiのサイトではも少しちゃんと機能を使ってます。

本記事ではその辺をまとめてみます。

※ Androidの話は全くしません。

リポジトリ

  • GitHub PagesのOrganization siteとしてリポジトリ作成
  • organizationname.github.ioという名前でリポジトリを作ると、masterブランチの内容が同名のURLで公開されます。
    • Organizationじゃなく、個人ユーザーの場合も同じ。
    • gh-pagesブランチを使うのはProject siteの場合です。
  • リポジトリはPrivateのままでもGitHub Pagesは公開できます。

CMS（Jekyll+Liquid）

  • GitHub PagesではJekyllが使えます。
    • ただし素のJekyllが使えるわけではなく、あくまでGitHub Pagesのgemを使う形になります。
  • 色々制約があるので、Using Jekyll with Pagesを要参照。
    • 例えば、_config.ymlのsource:〜設定は無視されるので、常にリポジトリのトップレベルにソースを置く必要があります。
      これに気付かずpushしたら、30分ほどサイトがすっとんだ事がありました。
  • Jekyllのプラグインも決まったものしか使えません。
  • テンプレートエンジンはLiquid
  • アクセス時にページを書き出すのではなく、Jekyllの起動時（GitHub Pagesではpush時）に書き出しキャッシュするだけ。
    • なので、インタラクティブなWeb APIっぽいものを作る事は出来ません。
    • 実はセッションリストをjsonで取得できるようにしてあるんですが、それもLiquidで書き出してるだけです。
  • _data/の下にYAMLで任意のデータを置くとテンプレートから参照できます。
    • それでセッションリストのデータを持っています。
    • YAML書き換えるとページとjsonも勝手に書き換わります。
    • Jekyllでは普通_posts/2015-04-24-DroidKaigi.mdって感じのパスで記事を書いて行くようなんですが、 DroidKaigiのサイトではそれは使っていません。
  • Jeykyllで処理するファイルの先頭にはFront Matterを書きます。

テスト

  • YAML使ったり、json書き出したりとかしだしたので、CIでテストもするようにしました。
  • Travis CIで回してます。
  • テスト内容
    • ビルド
    • HTMLの構文チェック HTML::Proofer
    • favicon
    • リンク切れ
    • imgのalt属性のチェックはわざと無視。代替文字が必要なデザインじゃないので。
    • YAML,jsonの構文チェック（パースしてみてるだけ）

テストはとりあえずでいいやとインラインで書いちゃってるけど、どういう書き方がベターなんだろ。

Webフォント

英字はRoboto。日本語はNoto Sans。

その他

ちゃんとSEOとか知ってる人には常識だろうけど

  • 一度設定したOpenGraph用の画像を消す時は注意
    • サイトのmetaタグの画像パスなどを書き換えても、すぐにはFbは反映してくれない様です。
    • デザイン刷新時に古い画像を消したら、一時的にFbのシェア時に画像が出なくなってしまいました。
  • はてブとかツイートボタンとか、ソーシャルボタンはURLが明示的に指定できるならした方がいい
    • 指定がなければ勝手に現在のURLになる
    • http/httpsの違いや、ハッシュの有無で別のページとして扱われちゃう
    • canonical URLも書くべき <link rel="canonical" href="http://droidkaigi.github.io/"/>
  • ページランク
    • サイト公開直後はDroidKaigiで検索しても全然検索結果の上位に来なかった。5ページ目以降とか。
    • てくぶのコミケ用ページをGitHub Pagesで作った時もそうだったんですが、一月くらいは上がらない感じ。
    • 後からsitemap.xmlを用意したりとかしたけど、結局Googleがいつクロールしてくれるかはわからないので…

一緒に書いたけど、ソーシャルリンクについてはどちらかと言うとテクブのサイト作ってた時の知見。
あと、PRのブランチへにpushしたら、どっかにデプロイしてすぐ他の人がプレビュー出来るようにすればよかったなー、と気付いた。 レビューが捗る。

感想記事的なものは別に書きます。

投稿者 mstssk 0 コメント ラベル: , , ,

2010年4月14日水曜日

TwitterFollowingChecker

Twitterで、相手がフォローしてくれているかどうかを表示するグリモンを作りました。
http://userscripts.org/scripts/show/74291
GoogleChromeでも動きます。

フォローしてくれているユーザには ☑ を、そうでなければ □ を表示します。

フォロー関係を調べるには、TwitterのAPIのこれ(http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-friendships-exists)とかを使うとtrue/false帰ってくるんですが、別に技術的な事を知らなくても手軽に相手がフォローしてくれているかどうかを確認する方法があります。
Twitterのダイレクトメッセージはフォローしてくれている相手にしか送信できないので、ユーザごとのメニューにダイレクトメッセージの項目があるかどうかを見れば簡単に確認できます。
ですが、いちいちボタンをクリックしてプルダウンメニューを表示させるのも面倒なので、このグリモンを作りました。

実装としても、ユーザごとにダイレクトメッセージの項目があるかどうかを確認しているだけなので、APIを使っていません。APIの制限が気になる人にも優しい作りです。
（実際には、ユーザの情報があるHTML要素にdirect-messageableというクラスが付いているかどうかを見ています。）

既知の問題：
・自分にも☑が出る。
→ 害は無いし別にいいや、と思って放置。
・そもそも☑ってマークが分かり辛い。
→ そのうちそれっぽいシンボルを描く。または誰か描いて。
・Twitter Follower Checker（http://www.sukechan.net/labs/follower_checker/）と名前が紛らわしい。
→ 最初その名前にしようとして、ググってみたらだだ被りだったので今の名前に。英語として意味が通じているかどうかは怪しい。

<追記>
Actionsにmessage usernameがあるかどうかでも分かるのね……
まぁ、他人やリストのフォロー一覧とかユーザ検索の結果一覧なんかでも使えるのでどうぞ。
投稿者 mstssk 0 コメント ラベル: , , ,

2009年11月15日日曜日

Alice Carroll problem in Tohoku IT Security study session.


第2回東北情報セキュリティ勉強会に行ってきました。

講演したのは、HASHコンサルティングの徳丸浩さんと、MS09-047脆弱性の謝辞の犯人のnig_luceさん。
あと、お菓子。
講演の後にディスカッションなんかも行ったり。
それとあと、お菓子とか。

徳丸さんの講演内容は、この記事を読んでもらう方が早かったり → 発注者のためのセキュリティ http://www.hash-c.co.jp/d/20090906.html

一応、記憶をつらつらと書き出してみる。

Webアプリケーションのセキュリティとかって、契約に十分に盛り込まれていなかったりする。発注側としてはもし問題が起きた場合に責任の所在が曖昧になるのは避けたい。
ただし、「脆弱性が全くないこと」なんて契約に盛り込めるわけが無い。抽象的な記述のくせに、不可能だと一発で分かる記述なんて、どうしようもない。そもそもそれは、バグの範疇だったりする。
対応策としては、具体的な実装・検収方法を指定するなどある。ただし、諸刃の剣。コストが高くなってしまう。発注側が実装まで指定してしまうのは、開発側のノウハウを潰すことになったりするので。

では、他にコストを下げられる箇所があるか。
仕様策定時に、情報資産を個々にいちいち洗い出したりするが、それって毎度毎度やる必要があること？ セキュリティに関する脅威とか、いちいち再確認してもどうせ決まりきってる。
また、絶対問題が起きない製品を作るなんて不可能。ならば、逆にリスクの許容範囲はどこまでか、を考える。問題を起点にして考えるのではなく、ベストプラクティスなセキュリティ対策でどこまで対応出来るのか、から考える。そして、ベストプラクティスなセキュリティ対策なんてのも、決まりきっている。

開発側としては、安全対策を施したライブラリを使ったり等々、開発標準を決めておけば良い。（IPAなどが開発標準のモデルを公開している）

そして、セキュリティに関して発注側が直接負担しなければならないコストは大したことがなかったりする。
（面倒くさくなったので残り割愛）


nig_luceさんの講演は、所謂ID3v2タグのアリス・キャロル問題（全然所謂じゃない点に付いてはご愛嬌）。

フザケた呼び方してますが、実は結構深刻だったりする。
講演では実際に、タグ情報に細工をしたMP3ファイルを再生しようとするとどうなるか、というのも行ってくれた。結果、Windows Media Playerが死亡。
ExplorerでもファイルアイコンにマウスオーバーしただけでMP3ファイルのタグ情報を読みにいくし、詳細表示モードでもそう。そして、内部ではタグ情報を得るためにWindows Media Playerと同じ処理をしようとするので、Explorerも死亡。

ちなみに言うと、報告から対応パッチが出るまで、8ヶ月経過してたそうな。


ディスカッションは殆ど雑談。でも、一応内容はセキュリティのこと言ってたよ！

というわけで、とても有意義な勉強会でした。
主催したまっちゃだいふくさん、スタッフの方々、他の参加者の方々、ありがとうございました。

第3回が楽しみだなぁ！！

参考：アリス・キャロル（Alice Carroll）ARIAの登場人物 - Wikipedia
投稿者 mstssk 0 コメント ラベル: , , ,

2009年9月5日土曜日

How to management my books...

読んだ・持っている 本を管理するWebサービスをつらつらメモしていく。

読書管理ツール Bookboard.jp
http://www.bookboard.jp/

読書メーター
http://book.akahoshitakuya.com/

みんなの本棚 by BOOK OFF
http://www.mindana.jp/

ブクログ
http://booklog.jp/

to be continued ..?
投稿者 mstssk 0 コメント ラベル: ,

2009年5月8日金曜日

Aptana PHP memo

Aptana Studio
http://www.aptana.com/

Aptana PHP
http://www.aptana.com/php

Aptana PHPの現行バージョンは1.0だが、Alpha版の1.1はSmartyテンプレートの作成などにも対応している。
Aptana PHP 1.1のインストール方法
http://www.aptana.com/docs/index.php/Aptana_PHP_Plug-In_1.1

php.iniのinclude_pathの内容を、Aptana PHPの設定のPHP Libraliesに指定してやる。これをしないと、デバッグ時にSmartyをrequireしようとするところでNot Foundエラーが出る。

http://aptana.com/docs/index.php/Installing_Aptana_on_Linux
http://andrewbleakley.com/blog/2008/11/01/installing-and-running-aptana-on-ubuntu-810/
投稿者 mstssk 0 コメント ラベル: ,

2009年5月7日木曜日

PHP Smarty tips

最近PHPをちょこっとずつ勉強中。
Smartyのテンプレでよく使うであろうパターンの覚書。

escape修飾子と予約変数$smartyの組み合わせ

Smartyのテンプレでは、変数に修飾子というものを付加して表示結果を弄れる。escape修飾子は文字列中の記号などをエスケープしてくれる。
また、予約変数の$smartyを使うと、テンプレート内からPHPの定義済み変数にアクセスできる。
よくあるwebの入力フォームでは、入力エラーの場合に入力内容をそのまま表示仕返してやったりする。それを、Smartyを使えば次のようにテンプレートに記述することで済む。
<input type="text" name="hoge" value="{$smarty.post.hoge|escape}">

関数も修飾子として使える

escapeなどSmartyで用意されているものだけでなく、PHP側の普通の関数もテンプレート内から修飾子として呼び出せる。
例えば、入力内容をそのスクリプト自身にsubmitさせてやるようなフォームなら、basename関数を修飾子として使い、actionの指定もテンプレート内で動的に書き出せる。
<form action="./{$smarty.server.SCRIPT_NAME|basename}" >
投稿者 mstssk 0 コメント ラベル: , ,

2009年4月3日金曜日

dot is separator

NTTドコモ、メールアドレスのルールを変更 〜 ピリオド連続などが使用不可に
http://www.rbbtoday.com/news/20090403/59059.html

メールアドレスを決める時、本来は次はアウト
・ドットから始まる
・ドットで終わる
・ドットの連続

だけど、docomoとauは今まで上記のルールから逸脱したアドレスでも登録出来るようになってた。世の中には、ルールから外れたメールアドレスが無効なものだとして、そういうメールを受け付けないメールサーバもあるので、docomo/からのメールを受信できない、またはdocomo/auへ送信できないっていう場合があったりする。

まぁそれは知ってたんだけど、でも何で？とふと思った。
で、ちょっと調べたら、当たり前な事実が出てきて、そんなことにも気づけなかった自分にorz

ドットって、メールに限らずアドレスでは基本的に区切りの文字として使うんですよね。
なので、区切り文字が先頭や最後尾にあったり、区切り文字が連続していたりするのはアウト、っていうわけ。

例えば、mixi.jpとか。mixi.jpというドメインの中で、ccTLD(国別コードトップレベルドメイン)のjpの部分を切り分けてる。
投稿者 mstssk 0 コメント ラベル: ,

2008年10月18日土曜日

Flock2.0のアイコンを変更

Flock2.0をgetdebで拾ったdebファイルからインストールしたのだけれども、アプリケーションメニューに表示されるアイコンが気に入らない。

これはアプリケーションのアイコンじゃないだろう……


なので、変更してみた。
Flockがインストールディレクトリにiconsというディレクトリがあったので覗いてみたら、案の定本来使われるべきだと思うアイコンがあったので、差し替え。


Tango風Flockアイコンもあったのでメモ
http://www.winmatrix.com/forums/index.php?showtopic=19425
投稿者 mstssk 0 コメント ラベル: , ,

2008年10月7日火曜日

OpenIDについてのメモ2

昨夜作ったばかりのOpenIDのアカウントが使えない。

まず、http://www.openid.ne.jp/にログインできない。
何度やっても「正しく入力してください。」と言われて弾かれる。

試しにパスワードの再設定を試したら、その時だけはログインできた。
ログアウトし、再びログインしようとすると「正しく入力してください。」。

OpenID対応サイトにOpenIDでログインする時は、たまーーーーーーにログインできる。
その後、http://www.openid.ne.jp/をログアウトして、再びログインしようとすると(ry

他のOpenID発行サイト使った方が無難なのかもしれない。Yahoo!とかはてなとか。
投稿者 mstssk 0 コメント ラベル:

2008年10月6日月曜日

OpenIDについてのメモ

http://www.openid.ne.jp/

様々なサービスにOpenIDのアカウント一つでログイン出来る。
OpenIDの形式はURLになっている。http://username.openid.ne.jp

対応サービスへのログイン時にOpenIDを入力すると、OpenIDサーバの認証ページに飛ばされて、（OpenID側のページにログインしていなければ、ログインした後に）そのサービスをOpenIDで認証し利用するかを問われる。

一度認証したサービスはOpenIDのアカウント情報ページで確認できる。
個々のサービスの認証を拒否/削除なども出来る。

OpenIDでは利用しているサービスを認証するかどうかの情報を保存するだけで、OpenIDのアカウント側で認証情報を削除しても、サービスの側のアカウント情報が消えるわけではない。
OpenID側で認証を削除したサービスに再び認証する場合には、再び認証するかどうかを問われる。つまり、OpenIDにとっては新たに認証するサービスと同じ扱いになる。サービスの側に影響はない。

利用しているサービスのアカウント情報をそのままに、OpenIDを削除してしまった場合にはどうなるのかというのを試そうかと思ったが、そもそもOpenIDのサイトにアカウント削除の項目が見当たらなかった。（メール問い合わせのみの対応？）
仕様は決まっている筈だと思うので、英文の仕様書とにらめっこするしかないかもしれない。
投稿者 mstssk 0 コメント ラベル:
登録: 投稿 (Atom)