自由研究でSNSをつくろう！ プロフィール編
自由研究で作成中のミニマムSNS。4回目！ 寄り道して顔アイコンもいくつか作ったことですし、今回はプロフィール画面を作成していきますよ～。
プロフィール画面の仕様を考える
自由研究SNS（仮）でも、プロフィール画面は基本的にはTwitterと同じように、ユーザーのカバーページとして機能するものにします。
ただ、状況によって表示内容を変えないといけないのが少しややこしいところ。文章で書いてもわかりにくいので、できあがりのスクリーンショットをご覧いただきながらポイントを紹介していきます。
なお、状況の違いとは、自分がログインしているか否か、そして表示するのは自分のプロフィールか、他者のプロフィールか、です。
1. 未ログイン状態のプロフィール表示
はじめに、未ログインの状態で他者のプロフィールを見てみましょう。もっとも、未ログイン状態では自分と他者を区別できないため、その区別はありません。
なお自由研究SNS（仮）では、プロフィール表示を"profile.php"で行ない、表示対象のアカウントはオプションで指定（"profile.php?username"）するようにしました。
今回表示してみるのは、SNS作りの初期にアカウント作成テストで作ってそのままにしてあった"111"というアカウントです。
アカウント作成時にはアカウントIDとメールアドレスしか指定しなかったため、表示する要素は少なめです。でも、アカウント作成時には設定していないName（ニックネーム）とIconが表示されていますね。
これらの項目は必須項目というほどではないので、アカウント作成時には指定を求めませんでした。アカウント作成時にこれらの設定を強いると、どうするか悩んでしまって参加のハードルが上がるので、あとから設定を変えればいい仕組みにしたわけです。
なお未設定の場合、ニックネームはアカウントIDと同じになり、アイコンは初期状態のもの（ただしおじいちゃんはダミーです）が表示される仕組みにしています。
2. ログイン状態で見る自身のプロフィール
次にログインして自分自身のプロフィールを表示してみましょう。新たに"testuser"というアカウントを作成し、ログインします。
今度は、NameとIconの横に［編集］ボタンが追加され、About（説明文）のテキストボックスも表示されています。自分のプロフィール画面では、このように各種設定をそのまま変更できるようにしました。
Aboutはプロフィール表示から直接して更新でき、Nameは［編集］ボタンを押して別画面で作業する仕組みです。
このように編集の仕組みを2種類作る必要はないのですが、頻繁には変えない項目（Name）と頻繁に変えるかもしれない項目（説明文）で使い分けてみました。
こういった編集の仕組みを一度作っておけば、あとから項目を増やすのは簡単なので、はやめに作っておこうという狙いもあります。
3. ログイン状態で見る他者のプロフィール
最後に、ログイン状態で他者のプロフィールを見てみましょう。
表示した"hiponama"のプロフィールは、すでに編集されたものです。
Name（ニックネーム）が設定されているので「ヒポなま(hiponama)のプロフィール」という表記になっていたり、About（説明文）が追加されています。
そして、下には［フォロー］ボタンが存在しています。
未ログインではフォローのしようがなく、また自分自身をフォローする必要はないので、「ログイン中＋他者」の場合にだけ［フォロー］ボタンが表示されるようになっています。なおボタンがグレー（無効）表示になっているのは、まだフォロー機能を実装していないからです。
次回は…？
プロフィール表示は今回作成した3パターン以外に、「相互フォローの相手にだけ見せたい情報」も考えられるのですが、設定が細かくなりすぎてミニマムとはいえなくなりそうなので今回はやめておくことにしました。
というわけで、次回以降は顔アイコンの設定機能や、フォローに関連する機能を作っていかなければなりません。
なんだかんだでもう8月上旬も終わろうとしていますが、はたして夏の終わりに間に合うのでしょうか!?
その緊張感が夏の自由研究っぽくていいんですけどね！
（つづく）
参考ソースコード（他ページと共有する変数の指定やサブルーチンは省略）
<?php
//変数初期設定
$form_command='';
//表示のみなら未指定
//change=対象user変更(フォーム指定)
//edit=編集(編集項目は別途指定する)
//update=更新、全体プロフィール表示
$form_subcommand='';
//name
//icon
//about
$safe=true; //チェック初期化(有効判定)
$short_error=''; //エラーの理由
//サブタイトル
$sub_title='プロフィール';
//ログ(表示用)
$edit_log='';
//共通設定読み込み
include './common.php';
?>
<?php
//引数を取得(追加)
$target_new='';
if($form_command=='change') { //対象user変更時
if(isset($_POST['target_new'])) {
$target_new = $_POST['target_new'];
}
if($target_new<>''){
$target_new=$url_profile.'?'.$target_new;
header('location: '.$target_new); //リダイレクト指定
}
}
if($form_command=='edit' or $form_command=='update'){
//update実行時に受け取る
if(isset($_POST['form_subcommand'])) {
$form_subcommand=$_POST['form_subcommand'];
}
//edit開始時に受け取る
if(isset($_POST['change_name'])) {
$form_subcommand='name';
}
if(isset($_POST['change_about'])) {
$form_subcommand='about';
$form_command='update'; //updateへ移行
}
if(isset($_POST['change_icon'])) {
$form_subcommand='icon';
}
//edit,update共通
if(isset($_POST['new_value'])) { //更新後の値
$new_value=$_POST['new_value'];
}
}
//変数追加設定
//自身の保存情報を取得
utUserProfileLoad($account_id);
utUserAboutLoad($account_id);
$me_name=$loaded_name;
$me_icon=$loaded_icon;
$me_about=$loaded_about;
//表示対象user
$target_user=''; //指定なし
$target_me=0; //1=自分自身を対象とする場合
$target_found=false; //未発見
$target_error='';
if($url_ex[1]<>''){
//(URL引数による指定あり)
$target_user=$url_ex[1]; //URLで指定されたuser
}else{
if($target_new==''){
if($login==1){
//自身を指定して再表示
$target_new=$url_profile.'?'.$account_id;
header('location: '.$target_new); //リダイレクト指定
}else{
$target_error='プロフィールを表示する対象を指定してください。';
}
}
}
//自分自身が対象？
if($login==1 and $target_user==$account_id){
//(YES)
$target_me=1;
}
//対象user指定ありの場合
if($target_user<>''){
//user存在確認
$target_found=utUserExists($target_user);
if($target_found==true){
if($target_me==1){
$target_name=$me_name;
$target_icon=$me_icon;
$target_about=$me_about;
}else{
utUserProfileLoad($target_user);
utUserAboutLoad($target_user);
$target_name=$loaded_name;
$target_icon=$loaded_icon;
$target_about=$loaded_about;
}
}else{
$target_error='[ '.$target_user.' ]は、存在しません。';
}
}
?>
<?php //--------update--------
if($target_me==1 and $form_command=="update"){
if($form_subcommand=='about'){
//ログ
$edit_log='about更新!';
//更新
$target_about=$new_value;
//セーブ
utUserAboutSave($target_user,$new_value);
}
if($form_subcommand=='name'){
$edit_log='name更新!';
//更新
$target_name=$new_value;
//セーブ
utUserProfileSave($target_user,$target_name,$target_icon);
}
if($form_subcommand=='icon'){
$edit_log='icon更新!';
//更新
$target_icon=$new_value;
//セーブ
utUserProfileSave($target_user,$target_name,$target_icon);
}
}
?>
<?php //--------共通処理：ページ開始--------
//head
echo "<head>";
$pagetitle=$main_title.'/'.$sub_title;
$pageurl=$url_profile;
//基礎設定
utHeadBasic($pagetitle,$pageicon,480);
//OGP設定
utHeadOgp($main_title,$main_title,$pagetitle,$pageurl,$ogppicture);
echo "</head>";
//body冒頭
echo '<body>';
echo '<b><a href="'.$url_index.'">'.$main_title.'</a></b><br>';
echo '<br>';
echo '<b>'.$sub_title.'</b><br>';
echo '<br>';
?>
<?php //--------共通処理：準備表示--------
//対象に関する警告
if($target_error<>''){
echo '<p>';
echo '・'.$target_error.'<br>';
echo '</p>';
}
//エラー
if($short_error<>''){
echo '<p>';
echo '・エラー: '.$short_error.'<br>';
echo '</p>';
}
//対象の表示名を作成
$target_fullname=$target_name;
if($target_name<>$target_user){
$target_fullname=$target_fullname.'('.$target_user.')';
}
?>
<?php //--------編集UI表示--------
if($target_me==1 and $form_command=='edit'){
//フォーム冒頭(編集時)
echo '<p>';
echo '<b>[ '.$target_fullname.' ]のプロフィール編集</b>';
echo '</p>';
echo '<form action="'.$url_profile.'?'.$target_user.'" method="post">';
echo '<input type="hidden" name="form_command" value="update">';
if($form_subcommand=="name"){
echo '<input type="hidden" name="form_subcommand" value="name">';
echo '現在のニックネーム[ '.$target_name.' ]<br>';
echo '新しいニックネーム:<br>';
echo '<input type="text" name="new_value" value="'.$target_name.'" size="30" required placeholder=""></p>';
echo '<input type="submit" name="send" value="実行">';
}
if($form_subcommand=="icon"){
echo '未対応です！';
}
}
?>
<?php //--------対象あり(プロフィール表示)--------
if($form_command<>'edit' and $target_found==true){
//フォーム表示
echo '<p>';
echo '<b>[ '.$target_fullname.' ]のプロフィール</b>';
echo '</p>';
echo '<form action="'.$url_profile.'?'.$target_user.'" method="post">';
echo '<input type="hidden" name="form_command" value="edit">';
echo '<p>・ID: '.$target_user.'<br></p>'; //ID
echo '<p>・Name: '.$target_name.' '; //ニックネーム(name)
if($target_me==1){
echo '<input type="submit" name="change_name" value="編集">';
}
echo '<br></p>';
if($target_icon==0){
$icon_title='初期設定';
}else{
$icon_title='No.'.$target_icon;
}
echo '<p>・Icon: '.$icon_title.' '; //icon
if($target_me==1){
echo '<input type="submit" name="change_icon" disabled value="編集">';
}
$icon_path=utIconPath($target_icon);
if(file_exists($icon_path)){
echo '<br>';
echo '<img src="'.$icon_path.'">';
}
echo '<br></p>';
if($target_me==1){
//(自身のabout)
echo '<p>・About<br>';
echo ' <textarea name="new_value" cols="40" rows="10">'.$target_about.'</textarea><br>';
echo ' <input type="submit" name="change_about" value="更新">';
}else{
//(他者のabout)
if(trim($target_about)<>''){
echo '<div>・About:<br>'.str_replace("\n",'<br>',$target_about).'</div>';
}
}
echo '</p>';
}
?>
<?php //--------対象なし(対象入力)--------
if($form_command<>'edit' and $target_found==false){
//フォーム表示
echo '<p>';
echo '<b>プロフィールを表示する対象を指定して[実行]してください。</b><br>';
echo '</p>';
echo '<form action="'.$url_profile.'" method="post">';
echo '<input type="hidden" name="form_command" value="change">';
echo '対象ユーザーのID(半角英数字)<br>';
echo '<input type="text" name="target_new" size="30" required placeholder="半角英数字でIDを記入"></p>';
echo '<input type="submit" name="send" value="実行">';
}
?>
<?php //共通処理：フォーム締め
if($target_found==true and $login==1 and $target_me==0){
//他者のプロフィール
echo '<br>';
echo '<br>';
echo '<input type="submit" name="follow" disabled value="フォロー(未対応)">';
}
if($login==1){
echo '<input type="hidden" name="account_id" value="'.$account_id.'">';
echo '<input type="hidden" name="token" value="'.$token.'">';
}
echo '</form>';
?>
<?php //共通処理：締め
//実行結果
if($edit_log<>''){
echo '<p><b>実行結果</b><br>';
echo '・'.$edit_log;
echo '</p>';
}
echo '<p>';
echo '<b>デバッグ情報</b><br>';
if($login==1){
echo '*ログイン済み('.$account_id.')<br>';
}else{
echo '*未ログイン<br>';
}
echo '*target_user: '.$target_user.'<br>';
echo '*form_command: '.$form_command.'<br>';
echo '*icon_path: '.$icon_path.'<br>';
if($common_error<>''){
echo '*common_error: '.$common_error.'<br>';
}
echo '</p>';
echo '</body>';
?>この記事が気に入ったらサポートをしてみませんか？